1.1 Binary file bootstrap-source/bootstrap-3.0.3.zip has changed
2.1 --- a/bootstrap-source/bootstrap-3.0.3/.editorconfig Sat Jan 18 12:34:36 2014 +0100
2.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
2.3 @@ -1,11 +0,0 @@
2.4 -# editorconfig.org
2.5 -
2.6 -root = true
2.7 -
2.8 -[*]
2.9 -indent_style = space
2.10 -indent_size = 2
2.11 -end_of_line = lf
2.12 -charset = utf-8
2.13 -trim_trailing_whitespace = true
2.14 -insert_final_newline = true
3.1 --- a/bootstrap-source/bootstrap-3.0.3/.gitattributes Sat Jan 18 12:34:36 2014 +0100
3.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
3.3 @@ -1,8 +0,0 @@
3.4 -# Enforce Unix newlines
3.5 -*.css text eol=lf
3.6 -*.html text eol=lf
3.7 -*.js text eol=lf
3.8 -*.json text eol=lf
3.9 -*.less text eol=lf
3.10 -*.md text eol=lf
3.11 -*.yml text eol=lf
4.1 --- a/bootstrap-source/bootstrap-3.0.3/.gitignore Sat Jan 18 12:34:36 2014 +0100
4.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
4.3 @@ -1,42 +0,0 @@
4.4 -# Ignore docs files
4.5 -_gh_pages
4.6 -_site
4.7 -.ruby-version
4.8 -
4.9 -# Numerous always-ignore extensions
4.10 -*.diff
4.11 -*.err
4.12 -*.orig
4.13 -*.log
4.14 -*.rej
4.15 -*.swo
4.16 -*.swp
4.17 -*.zip
4.18 -*.vi
4.19 -*~
4.20 -
4.21 -# OS or Editor folders
4.22 -.DS_Store
4.23 -._*
4.24 -Thumbs.db
4.25 -.cache
4.26 -.project
4.27 -.settings
4.28 -.tmproj
4.29 -*.esproj
4.30 -nbproject
4.31 -*.sublime-project
4.32 -*.sublime-workspace
4.33 -.idea
4.34 -
4.35 -# Komodo
4.36 -*.komodoproject
4.37 -.komodotools
4.38 -
4.39 -# grunt-html-validation
4.40 -validation-status.json
4.41 -validation-report.json
4.42 -
4.43 -# Folders to ignore
4.44 -node_modules
4.45 -bower_components
5.1 --- a/bootstrap-source/bootstrap-3.0.3/.travis.yml Sat Jan 18 12:34:36 2014 +0100
5.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
5.3 @@ -1,10 +0,0 @@
5.4 -language: node_js
5.5 -node_js:
5.6 - - 0.10
5.7 -before_script:
5.8 - - gem install jekyll
5.9 - - npm install -g grunt-cli
5.10 -env:
5.11 - global:
5.12 - - SAUCE_USERNAME: bootstrap
5.13 - - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
6.1 --- a/bootstrap-source/bootstrap-3.0.3/CNAME Sat Jan 18 12:34:36 2014 +0100
6.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
6.3 @@ -1,1 +0,0 @@
6.4 -getbootstrap.com
7.1 --- a/bootstrap-source/bootstrap-3.0.3/CONTRIBUTING.md Sat Jan 18 12:34:36 2014 +0100
7.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
7.3 @@ -1,79 +0,0 @@
7.4 -# Contributing to Bootstrap
7.5 -
7.6 -Looking to contribute something to Bootstrap? **Here's how you can help.**
7.7 -
7.8 -
7.9 -
7.10 -## Reporting issues
7.11 -
7.12 -We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue.
7.13 -
7.14 -1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available.
7.15 -2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
7.16 -3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases.
7.17 -4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug.
7.18 -
7.19 -
7.20 -
7.21 -## Pull requests
7.22 -
7.23 -- CSS changes must be done in `.less` files first, never just in the compiled `.css` files
7.24 -- If modifying the `.less` files, always recompile and commit the compiled files `bootstrap.css` and `bootstrap.min.css`
7.25 -- Try not to pollute your pull request with unintended changes--keep them simple and small
7.26 -- Try to share which browsers your code has been tested in before submitting a pull request
7.27 -- Pull requests should always be against the `master` branch, never against `gh-pages`.
7.28 -
7.29 -
7.30 -
7.31 -## Coding standards
7.32 -
7.33 -### HTML
7.34 -
7.35 -- Two spaces for indentation, never tabs
7.36 -- Double quotes only, never single quotes
7.37 -- Always use proper indentation
7.38 -- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
7.39 -- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
7.40 -
7.41 -### CSS
7.42 -
7.43 -- Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
7.44 -- Multiple-line approach (one property and value per line)
7.45 -- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
7.46 -- End all lines with a semi-colon
7.47 -- For multiple, comma-separated selectors, place each selector on its own line
7.48 -- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
7.49 -
7.50 -### JS
7.51 -
7.52 -- No semicolons
7.53 -- Comma first
7.54 -- 2 spaces (no tabs)
7.55 -- strict mode
7.56 -- "Attractive"
7.57 -
7.58 -
7.59 -
7.60 -## License
7.61 -
7.62 -With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
7.63 -
7.64 -By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE-MIT) licenses.
7.65 -
7.66 -
7.67 -
7.68 -## Release checklist
7.69 -
7.70 -1. Close ship list issue for the release.
7.71 -2. Close the milestone for the release.
7.72 -3. Open new release issue that includes this checklist.
7.73 -4. Ping folks to coordinate release (mainly @jdorfman for BootstrapCDN).
7.74 -5. Update version numbers using `grunt change-version-number --oldver=A.B.C --newver=X.Y.Z`. Review the changes and stage them manually.
7.75 -6. Run `grunt` one last time.
7.76 -7. Push to `master` branch.
7.77 -8. Merge `master` into `gh-pages`.
7.78 -9. Generate `bootstrap-X.Y.Z-dist.zip` file for release.
7.79 -10. Create release on GitHub with `/dist/` folder and release notes.
7.80 -11. Push `gh-pages`.
7.81 -12. Publish blog post.
7.82 -13. Tweet tweet.
8.1 --- a/bootstrap-source/bootstrap-3.0.3/DOCS-LICENSE Sat Jan 18 12:34:36 2014 +0100
8.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
8.3 @@ -1,319 +0,0 @@
8.4 -Creative Commons Legal Code
8.5 -
8.6 -Attribution 3.0 Unported
8.7 -
8.8 - CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
8.9 - LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
8.10 - ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
8.11 - INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
8.12 - REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
8.13 - DAMAGES RESULTING FROM ITS USE.
8.14 -
8.15 -License
8.16 -
8.17 -THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
8.18 -COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
8.19 -COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
8.20 -AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
8.21 -
8.22 -BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
8.23 -TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
8.24 -BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
8.25 -CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
8.26 -CONDITIONS.
8.27 -
8.28 -1. Definitions
8.29 -
8.30 - a. "Adaptation" means a work based upon the Work, or upon the Work and
8.31 - other pre-existing works, such as a translation, adaptation,
8.32 - derivative work, arrangement of music or other alterations of a
8.33 - literary or artistic work, or phonogram or performance and includes
8.34 - cinematographic adaptations or any other form in which the Work may be
8.35 - recast, transformed, or adapted including in any form recognizably
8.36 - derived from the original, except that a work that constitutes a
8.37 - Collection will not be considered an Adaptation for the purpose of
8.38 - this License. For the avoidance of doubt, where the Work is a musical
8.39 - work, performance or phonogram, the synchronization of the Work in
8.40 - timed-relation with a moving image ("synching") will be considered an
8.41 - Adaptation for the purpose of this License.
8.42 - b. "Collection" means a collection of literary or artistic works, such as
8.43 - encyclopedias and anthologies, or performances, phonograms or
8.44 - broadcasts, or other works or subject matter other than works listed
8.45 - in Section 1(f) below, which, by reason of the selection and
8.46 - arrangement of their contents, constitute intellectual creations, in
8.47 - which the Work is included in its entirety in unmodified form along
8.48 - with one or more other contributions, each constituting separate and
8.49 - independent works in themselves, which together are assembled into a
8.50 - collective whole. A work that constitutes a Collection will not be
8.51 - considered an Adaptation (as defined above) for the purposes of this
8.52 - License.
8.53 - c. "Distribute" means to make available to the public the original and
8.54 - copies of the Work or Adaptation, as appropriate, through sale or
8.55 - other transfer of ownership.
8.56 - d. "Licensor" means the individual, individuals, entity or entities that
8.57 - offer(s) the Work under the terms of this License.
8.58 - e. "Original Author" means, in the case of a literary or artistic work,
8.59 - the individual, individuals, entity or entities who created the Work
8.60 - or if no individual or entity can be identified, the publisher; and in
8.61 - addition (i) in the case of a performance the actors, singers,
8.62 - musicians, dancers, and other persons who act, sing, deliver, declaim,
8.63 - play in, interpret or otherwise perform literary or artistic works or
8.64 - expressions of folklore; (ii) in the case of a phonogram the producer
8.65 - being the person or legal entity who first fixes the sounds of a
8.66 - performance or other sounds; and, (iii) in the case of broadcasts, the
8.67 - organization that transmits the broadcast.
8.68 - f. "Work" means the literary and/or artistic work offered under the terms
8.69 - of this License including without limitation any production in the
8.70 - literary, scientific and artistic domain, whatever may be the mode or
8.71 - form of its expression including digital form, such as a book,
8.72 - pamphlet and other writing; a lecture, address, sermon or other work
8.73 - of the same nature; a dramatic or dramatico-musical work; a
8.74 - choreographic work or entertainment in dumb show; a musical
8.75 - composition with or without words; a cinematographic work to which are
8.76 - assimilated works expressed by a process analogous to cinematography;
8.77 - a work of drawing, painting, architecture, sculpture, engraving or
8.78 - lithography; a photographic work to which are assimilated works
8.79 - expressed by a process analogous to photography; a work of applied
8.80 - art; an illustration, map, plan, sketch or three-dimensional work
8.81 - relative to geography, topography, architecture or science; a
8.82 - performance; a broadcast; a phonogram; a compilation of data to the
8.83 - extent it is protected as a copyrightable work; or a work performed by
8.84 - a variety or circus performer to the extent it is not otherwise
8.85 - considered a literary or artistic work.
8.86 - g. "You" means an individual or entity exercising rights under this
8.87 - License who has not previously violated the terms of this License with
8.88 - respect to the Work, or who has received express permission from the
8.89 - Licensor to exercise rights under this License despite a previous
8.90 - violation.
8.91 - h. "Publicly Perform" means to perform public recitations of the Work and
8.92 - to communicate to the public those public recitations, by any means or
8.93 - process, including by wire or wireless means or public digital
8.94 - performances; to make available to the public Works in such a way that
8.95 - members of the public may access these Works from a place and at a
8.96 - place individually chosen by them; to perform the Work to the public
8.97 - by any means or process and the communication to the public of the
8.98 - performances of the Work, including by public digital performance; to
8.99 - broadcast and rebroadcast the Work by any means including signs,
8.100 - sounds or images.
8.101 - i. "Reproduce" means to make copies of the Work by any means including
8.102 - without limitation by sound or visual recordings and the right of
8.103 - fixation and reproducing fixations of the Work, including storage of a
8.104 - protected performance or phonogram in digital form or other electronic
8.105 - medium.
8.106 -
8.107 -2. Fair Dealing Rights. Nothing in this License is intended to reduce,
8.108 -limit, or restrict any uses free from copyright or rights arising from
8.109 -limitations or exceptions that are provided for in connection with the
8.110 -copyright protection under copyright law or other applicable laws.
8.111 -
8.112 -3. License Grant. Subject to the terms and conditions of this License,
8.113 -Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
8.114 -perpetual (for the duration of the applicable copyright) license to
8.115 -exercise the rights in the Work as stated below:
8.116 -
8.117 - a. to Reproduce the Work, to incorporate the Work into one or more
8.118 - Collections, and to Reproduce the Work as incorporated in the
8.119 - Collections;
8.120 - b. to create and Reproduce Adaptations provided that any such Adaptation,
8.121 - including any translation in any medium, takes reasonable steps to
8.122 - clearly label, demarcate or otherwise identify that changes were made
8.123 - to the original Work. For example, a translation could be marked "The
8.124 - original work was translated from English to Spanish," or a
8.125 - modification could indicate "The original work has been modified.";
8.126 - c. to Distribute and Publicly Perform the Work including as incorporated
8.127 - in Collections; and,
8.128 - d. to Distribute and Publicly Perform Adaptations.
8.129 - e. For the avoidance of doubt:
8.130 -
8.131 - i. Non-waivable Compulsory License Schemes. In those jurisdictions in
8.132 - which the right to collect royalties through any statutory or
8.133 - compulsory licensing scheme cannot be waived, the Licensor
8.134 - reserves the exclusive right to collect such royalties for any
8.135 - exercise by You of the rights granted under this License;
8.136 - ii. Waivable Compulsory License Schemes. In those jurisdictions in
8.137 - which the right to collect royalties through any statutory or
8.138 - compulsory licensing scheme can be waived, the Licensor waives the
8.139 - exclusive right to collect such royalties for any exercise by You
8.140 - of the rights granted under this License; and,
8.141 - iii. Voluntary License Schemes. The Licensor waives the right to
8.142 - collect royalties, whether individually or, in the event that the
8.143 - Licensor is a member of a collecting society that administers
8.144 - voluntary licensing schemes, via that society, from any exercise
8.145 - by You of the rights granted under this License.
8.146 -
8.147 -The above rights may be exercised in all media and formats whether now
8.148 -known or hereafter devised. The above rights include the right to make
8.149 -such modifications as are technically necessary to exercise the rights in
8.150 -other media and formats. Subject to Section 8(f), all rights not expressly
8.151 -granted by Licensor are hereby reserved.
8.152 -
8.153 -4. Restrictions. The license granted in Section 3 above is expressly made
8.154 -subject to and limited by the following restrictions:
8.155 -
8.156 - a. You may Distribute or Publicly Perform the Work only under the terms
8.157 - of this License. You must include a copy of, or the Uniform Resource
8.158 - Identifier (URI) for, this License with every copy of the Work You
8.159 - Distribute or Publicly Perform. You may not offer or impose any terms
8.160 - on the Work that restrict the terms of this License or the ability of
8.161 - the recipient of the Work to exercise the rights granted to that
8.162 - recipient under the terms of the License. You may not sublicense the
8.163 - Work. You must keep intact all notices that refer to this License and
8.164 - to the disclaimer of warranties with every copy of the Work You
8.165 - Distribute or Publicly Perform. When You Distribute or Publicly
8.166 - Perform the Work, You may not impose any effective technological
8.167 - measures on the Work that restrict the ability of a recipient of the
8.168 - Work from You to exercise the rights granted to that recipient under
8.169 - the terms of the License. This Section 4(a) applies to the Work as
8.170 - incorporated in a Collection, but this does not require the Collection
8.171 - apart from the Work itself to be made subject to the terms of this
8.172 - License. If You create a Collection, upon notice from any Licensor You
8.173 - must, to the extent practicable, remove from the Collection any credit
8.174 - as required by Section 4(b), as requested. If You create an
8.175 - Adaptation, upon notice from any Licensor You must, to the extent
8.176 - practicable, remove from the Adaptation any credit as required by
8.177 - Section 4(b), as requested.
8.178 - b. If You Distribute, or Publicly Perform the Work or any Adaptations or
8.179 - Collections, You must, unless a request has been made pursuant to
8.180 - Section 4(a), keep intact all copyright notices for the Work and
8.181 - provide, reasonable to the medium or means You are utilizing: (i) the
8.182 - name of the Original Author (or pseudonym, if applicable) if supplied,
8.183 - and/or if the Original Author and/or Licensor designate another party
8.184 - or parties (e.g., a sponsor institute, publishing entity, journal) for
8.185 - attribution ("Attribution Parties") in Licensor's copyright notice,
8.186 - terms of service or by other reasonable means, the name of such party
8.187 - or parties; (ii) the title of the Work if supplied; (iii) to the
8.188 - extent reasonably practicable, the URI, if any, that Licensor
8.189 - specifies to be associated with the Work, unless such URI does not
8.190 - refer to the copyright notice or licensing information for the Work;
8.191 - and (iv) , consistent with Section 3(b), in the case of an Adaptation,
8.192 - a credit identifying the use of the Work in the Adaptation (e.g.,
8.193 - "French translation of the Work by Original Author," or "Screenplay
8.194 - based on original Work by Original Author"). The credit required by
8.195 - this Section 4 (b) may be implemented in any reasonable manner;
8.196 - provided, however, that in the case of a Adaptation or Collection, at
8.197 - a minimum such credit will appear, if a credit for all contributing
8.198 - authors of the Adaptation or Collection appears, then as part of these
8.199 - credits and in a manner at least as prominent as the credits for the
8.200 - other contributing authors. For the avoidance of doubt, You may only
8.201 - use the credit required by this Section for the purpose of attribution
8.202 - in the manner set out above and, by exercising Your rights under this
8.203 - License, You may not implicitly or explicitly assert or imply any
8.204 - connection with, sponsorship or endorsement by the Original Author,
8.205 - Licensor and/or Attribution Parties, as appropriate, of You or Your
8.206 - use of the Work, without the separate, express prior written
8.207 - permission of the Original Author, Licensor and/or Attribution
8.208 - Parties.
8.209 - c. Except as otherwise agreed in writing by the Licensor or as may be
8.210 - otherwise permitted by applicable law, if You Reproduce, Distribute or
8.211 - Publicly Perform the Work either by itself or as part of any
8.212 - Adaptations or Collections, You must not distort, mutilate, modify or
8.213 - take other derogatory action in relation to the Work which would be
8.214 - prejudicial to the Original Author's honor or reputation. Licensor
8.215 - agrees that in those jurisdictions (e.g. Japan), in which any exercise
8.216 - of the right granted in Section 3(b) of this License (the right to
8.217 - make Adaptations) would be deemed to be a distortion, mutilation,
8.218 - modification or other derogatory action prejudicial to the Original
8.219 - Author's honor and reputation, the Licensor will waive or not assert,
8.220 - as appropriate, this Section, to the fullest extent permitted by the
8.221 - applicable national law, to enable You to reasonably exercise Your
8.222 - right under Section 3(b) of this License (right to make Adaptations)
8.223 - but not otherwise.
8.224 -
8.225 -5. Representations, Warranties and Disclaimer
8.226 -
8.227 -UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
8.228 -OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
8.229 -KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
8.230 -INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
8.231 -FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
8.232 -LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
8.233 -WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
8.234 -OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
8.235 -
8.236 -6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
8.237 -LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
8.238 -ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
8.239 -ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
8.240 -BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
8.241 -
8.242 -7. Termination
8.243 -
8.244 - a. This License and the rights granted hereunder will terminate
8.245 - automatically upon any breach by You of the terms of this License.
8.246 - Individuals or entities who have received Adaptations or Collections
8.247 - from You under this License, however, will not have their licenses
8.248 - terminated provided such individuals or entities remain in full
8.249 - compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
8.250 - survive any termination of this License.
8.251 - b. Subject to the above terms and conditions, the license granted here is
8.252 - perpetual (for the duration of the applicable copyright in the Work).
8.253 - Notwithstanding the above, Licensor reserves the right to release the
8.254 - Work under different license terms or to stop distributing the Work at
8.255 - any time; provided, however that any such election will not serve to
8.256 - withdraw this License (or any other license that has been, or is
8.257 - required to be, granted under the terms of this License), and this
8.258 - License will continue in full force and effect unless terminated as
8.259 - stated above.
8.260 -
8.261 -8. Miscellaneous
8.262 -
8.263 - a. Each time You Distribute or Publicly Perform the Work or a Collection,
8.264 - the Licensor offers to the recipient a license to the Work on the same
8.265 - terms and conditions as the license granted to You under this License.
8.266 - b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
8.267 - offers to the recipient a license to the original Work on the same
8.268 - terms and conditions as the license granted to You under this License.
8.269 - c. If any provision of this License is invalid or unenforceable under
8.270 - applicable law, it shall not affect the validity or enforceability of
8.271 - the remainder of the terms of this License, and without further action
8.272 - by the parties to this agreement, such provision shall be reformed to
8.273 - the minimum extent necessary to make such provision valid and
8.274 - enforceable.
8.275 - d. No term or provision of this License shall be deemed waived and no
8.276 - breach consented to unless such waiver or consent shall be in writing
8.277 - and signed by the party to be charged with such waiver or consent.
8.278 - e. This License constitutes the entire agreement between the parties with
8.279 - respect to the Work licensed here. There are no understandings,
8.280 - agreements or representations with respect to the Work not specified
8.281 - here. Licensor shall not be bound by any additional provisions that
8.282 - may appear in any communication from You. This License may not be
8.283 - modified without the mutual written agreement of the Licensor and You.
8.284 - f. The rights granted under, and the subject matter referenced, in this
8.285 - License were drafted utilizing the terminology of the Berne Convention
8.286 - for the Protection of Literary and Artistic Works (as amended on
8.287 - September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
8.288 - Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
8.289 - and the Universal Copyright Convention (as revised on July 24, 1971).
8.290 - These rights and subject matter take effect in the relevant
8.291 - jurisdiction in which the License terms are sought to be enforced
8.292 - according to the corresponding provisions of the implementation of
8.293 - those treaty provisions in the applicable national law. If the
8.294 - standard suite of rights granted under applicable copyright law
8.295 - includes additional rights not granted under this License, such
8.296 - additional rights are deemed to be included in the License; this
8.297 - License is not intended to restrict the license of any rights under
8.298 - applicable law.
8.299 -
8.300 -
8.301 -Creative Commons Notice
8.302 -
8.303 - Creative Commons is not a party to this License, and makes no warranty
8.304 - whatsoever in connection with the Work. Creative Commons will not be
8.305 - liable to You or any party on any legal theory for any damages
8.306 - whatsoever, including without limitation any general, special,
8.307 - incidental or consequential damages arising in connection to this
8.308 - license. Notwithstanding the foregoing two (2) sentences, if Creative
8.309 - Commons has expressly identified itself as the Licensor hereunder, it
8.310 - shall have all rights and obligations of Licensor.
8.311 -
8.312 - Except for the limited purpose of indicating to the public that the
8.313 - Work is licensed under the CCPL, Creative Commons does not authorize
8.314 - the use by either party of the trademark "Creative Commons" or any
8.315 - related trademark or logo of Creative Commons without the prior
8.316 - written consent of Creative Commons. Any permitted use will be in
8.317 - compliance with Creative Commons' then-current trademark usage
8.318 - guidelines, as may be published on its website or otherwise made
8.319 - available upon request from time to time. For the avoidance of doubt,
8.320 - this trademark restriction does not form part of this License.
8.321 -
8.322 - Creative Commons may be contacted at http://creativecommons.org/.
9.1 --- a/bootstrap-source/bootstrap-3.0.3/Gruntfile.js Sat Jan 18 12:34:36 2014 +0100
9.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
9.3 @@ -1,337 +0,0 @@
9.4 -/* jshint node: true */
9.5 -
9.6 -module.exports = function(grunt) {
9.7 - "use strict";
9.8 -
9.9 - // Force use of Unix newlines
9.10 - grunt.util.linefeed = '\n';
9.11 -
9.12 - RegExp.quote = require('regexp-quote')
9.13 - var btoa = require('btoa')
9.14 - // Project configuration.
9.15 - grunt.initConfig({
9.16 -
9.17 - // Metadata.
9.18 - pkg: grunt.file.readJSON('package.json'),
9.19 - banner: '/*!\n' +
9.20 - ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
9.21 - ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
9.22 - ' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
9.23 - ' */\n\n',
9.24 - jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n',
9.25 -
9.26 - // Task configuration.
9.27 - clean: {
9.28 - dist: ['dist']
9.29 - },
9.30 -
9.31 - jshint: {
9.32 - options: {
9.33 - jshintrc: 'js/.jshintrc'
9.34 - },
9.35 - gruntfile: {
9.36 - src: 'Gruntfile.js'
9.37 - },
9.38 - src: {
9.39 - src: ['js/*.js']
9.40 - },
9.41 - test: {
9.42 - src: ['js/tests/unit/*.js']
9.43 - }
9.44 - },
9.45 -
9.46 - concat: {
9.47 - options: {
9.48 - banner: '<%= banner %><%= jqueryCheck %>',
9.49 - stripBanners: false
9.50 - },
9.51 - bootstrap: {
9.52 - src: [
9.53 - 'js/transition.js',
9.54 - 'js/alert.js',
9.55 - 'js/button.js',
9.56 - 'js/carousel.js',
9.57 - 'js/collapse.js',
9.58 - 'js/dropdown.js',
9.59 - 'js/modal.js',
9.60 - 'js/tooltip.js',
9.61 - 'js/popover.js',
9.62 - 'js/scrollspy.js',
9.63 - 'js/tab.js',
9.64 - 'js/affix.js'
9.65 - ],
9.66 - dest: 'dist/js/<%= pkg.name %>.js'
9.67 - }
9.68 - },
9.69 -
9.70 - uglify: {
9.71 - options: {
9.72 - banner: '<%= banner %>',
9.73 - report: 'min'
9.74 - },
9.75 - bootstrap: {
9.76 - src: ['<%= concat.bootstrap.dest %>'],
9.77 - dest: 'dist/js/<%= pkg.name %>.min.js'
9.78 - }
9.79 - },
9.80 -
9.81 - recess: {
9.82 - options: {
9.83 - compile: true,
9.84 - banner: '<%= banner %>'
9.85 - },
9.86 - bootstrap: {
9.87 - src: ['less/bootstrap.less'],
9.88 - dest: 'dist/css/<%= pkg.name %>.css'
9.89 - },
9.90 - min: {
9.91 - options: {
9.92 - compress: true
9.93 - },
9.94 - src: ['less/bootstrap.less'],
9.95 - dest: 'dist/css/<%= pkg.name %>.min.css'
9.96 - },
9.97 - theme: {
9.98 - src: ['less/theme.less'],
9.99 - dest: 'dist/css/<%= pkg.name %>-theme.css'
9.100 - },
9.101 - theme_min: {
9.102 - options: {
9.103 - compress: true
9.104 - },
9.105 - src: ['less/theme.less'],
9.106 - dest: 'dist/css/<%= pkg.name %>-theme.min.css'
9.107 - }
9.108 - },
9.109 -
9.110 - copy: {
9.111 - fonts: {
9.112 - expand: true,
9.113 - src: ["fonts/*"],
9.114 - dest: 'dist/'
9.115 - }
9.116 - },
9.117 -
9.118 - qunit: {
9.119 - options: {
9.120 - inject: 'js/tests/unit/phantom.js'
9.121 - },
9.122 - files: ['js/tests/*.html']
9.123 - },
9.124 -
9.125 - connect: {
9.126 - server: {
9.127 - options: {
9.128 - port: 3000,
9.129 - base: '.'
9.130 - }
9.131 - }
9.132 - },
9.133 -
9.134 - jekyll: {
9.135 - docs: {}
9.136 - },
9.137 -
9.138 - validation: {
9.139 - options: {
9.140 - reset: true,
9.141 - relaxerror: [
9.142 - "Bad value X-UA-Compatible for attribute http-equiv on element meta.",
9.143 - "Element img is missing required attribute src."
9.144 - ]
9.145 - },
9.146 - files: {
9.147 - src: ["_gh_pages/**/*.html"]
9.148 - }
9.149 - },
9.150 -
9.151 - watch: {
9.152 - src: {
9.153 - files: '<%= jshint.src.src %>',
9.154 - tasks: ['jshint:src', 'qunit']
9.155 - },
9.156 - test: {
9.157 - files: '<%= jshint.test.src %>',
9.158 - tasks: ['jshint:test', 'qunit']
9.159 - },
9.160 - recess: {
9.161 - files: 'less/*.less',
9.162 - tasks: ['recess']
9.163 - }
9.164 - },
9.165 -
9.166 - sed: {
9.167 - versionNumber: {
9.168 - pattern: (function () {
9.169 - var old = grunt.option('oldver')
9.170 - return old ? RegExp.quote(old) : old
9.171 - })(),
9.172 - replacement: grunt.option('newver'),
9.173 - recursive: true
9.174 - }
9.175 - },
9.176 -
9.177 - 'saucelabs-qunit': {
9.178 - all: {
9.179 - options: {
9.180 - build: process.env.TRAVIS_JOB_ID,
9.181 - concurrency: 3,
9.182 - urls: ['http://127.0.0.1:3000/js/tests/index.html'],
9.183 - browsers: [
9.184 - // See https://saucelabs.com/docs/platforms/webdriver
9.185 - {
9.186 - browserName: 'safari',
9.187 - version: '6',
9.188 - platform: 'OS X 10.8'
9.189 - },
9.190 - {
9.191 - browserName: 'chrome',
9.192 - version: '28',
9.193 - platform: 'OS X 10.6'
9.194 - },
9.195 - /* FIXME: currently fails 1 tooltip test
9.196 - {
9.197 - browserName: 'firefox',
9.198 - version: '25',
9.199 - platform: 'OS X 10.6'
9.200 - },*/
9.201 - // Mac Opera not currently supported by Sauce Labs
9.202 - /* FIXME: currently fails 1 tooltip test
9.203 - {
9.204 - browserName: 'internet explorer',
9.205 - version: '11',
9.206 - platform: 'Windows 8.1'
9.207 - },*/
9.208 - /*
9.209 - {
9.210 - browserName: 'internet explorer',
9.211 - version: '10',
9.212 - platform: 'Windows 8'
9.213 - },
9.214 - {
9.215 - browserName: 'internet explorer',
9.216 - version: '9',
9.217 - platform: 'Windows 7'
9.218 - },
9.219 - {
9.220 - browserName: 'internet explorer',
9.221 - version: '8',
9.222 - platform: 'Windows 7'
9.223 - },
9.224 - {// unofficial
9.225 - browserName: 'internet explorer',
9.226 - version: '7',
9.227 - platform: 'Windows XP'
9.228 - },
9.229 - */
9.230 - {
9.231 - browserName: 'chrome',
9.232 - version: '31',
9.233 - platform: 'Windows 8.1'
9.234 - },
9.235 - {
9.236 - browserName: 'firefox',
9.237 - version: '25',
9.238 - platform: 'Windows 8.1'
9.239 - },
9.240 - // Win Opera 15+ not currently supported by Sauce Labs
9.241 - {
9.242 - browserName: 'iphone',
9.243 - version: '6.1',
9.244 - platform: 'OS X 10.8'
9.245 - },
9.246 - // iOS Chrome not currently supported by Sauce Labs
9.247 - // Linux (unofficial)
9.248 - {
9.249 - browserName: 'chrome',
9.250 - version: '30',
9.251 - platform: 'Linux'
9.252 - },
9.253 - {
9.254 - browserName: 'firefox',
9.255 - version: '25',
9.256 - platform: 'Linux'
9.257 - }
9.258 - // Android Chrome not currently supported by Sauce Labs
9.259 - /* Android Browser (super-unofficial)
9.260 - {
9.261 - browserName: 'android',
9.262 - version: '4.0',
9.263 - platform: 'Linux'
9.264 - }
9.265 - */
9.266 - ],
9.267 - }
9.268 - }
9.269 - }
9.270 - });
9.271 -
9.272 -
9.273 - // These plugins provide necessary tasks.
9.274 - grunt.loadNpmTasks('grunt-contrib-clean');
9.275 - grunt.loadNpmTasks('grunt-contrib-concat');
9.276 - grunt.loadNpmTasks('grunt-contrib-connect');
9.277 - grunt.loadNpmTasks('grunt-contrib-copy');
9.278 - grunt.loadNpmTasks('grunt-contrib-jshint');
9.279 - grunt.loadNpmTasks('grunt-contrib-qunit');
9.280 - grunt.loadNpmTasks('grunt-contrib-uglify');
9.281 - grunt.loadNpmTasks('grunt-contrib-watch');
9.282 - grunt.loadNpmTasks('grunt-html-validation');
9.283 - grunt.loadNpmTasks('grunt-jekyll');
9.284 - grunt.loadNpmTasks('grunt-recess');
9.285 - grunt.loadNpmTasks('grunt-saucelabs');
9.286 - grunt.loadNpmTasks('grunt-sed');
9.287 -
9.288 - // Docs HTML validation task
9.289 - grunt.registerTask('validate-html', ['jekyll', 'validation']);
9.290 -
9.291 - // Test task.
9.292 - var testSubtasks = ['dist-css', 'jshint', 'qunit', 'validate-html'];
9.293 - // Only run Sauce Labs tests if there's a Sauce access key
9.294 - if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
9.295 - testSubtasks.push('connect');
9.296 - testSubtasks.push('saucelabs-qunit');
9.297 - }
9.298 - grunt.registerTask('test', testSubtasks);
9.299 -
9.300 - // JS distribution task.
9.301 - grunt.registerTask('dist-js', ['concat', 'uglify']);
9.302 -
9.303 - // CSS distribution task.
9.304 - grunt.registerTask('dist-css', ['recess']);
9.305 -
9.306 - // Fonts distribution task.
9.307 - grunt.registerTask('dist-fonts', ['copy']);
9.308 -
9.309 - // Full distribution task.
9.310 - grunt.registerTask('dist', ['clean', 'dist-css', 'dist-fonts', 'dist-js']);
9.311 -
9.312 - // Default task.
9.313 - grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
9.314 -
9.315 - // Version numbering task.
9.316 - // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
9.317 - // This can be overzealous, so its changes should always be manually reviewed!
9.318 - grunt.registerTask('change-version-number', ['sed']);
9.319 -
9.320 - // task for building customizer
9.321 - grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
9.322 - var fs = require('fs')
9.323 -
9.324 - function getFiles(type) {
9.325 - var files = {}
9.326 - fs.readdirSync(type)
9.327 - .filter(function (path) {
9.328 - return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
9.329 - })
9.330 - .forEach(function (path) {
9.331 - var fullPath = type + '/' + path
9.332 - return files[path] = (type == 'fonts' ? btoa(fs.readFileSync(fullPath)) : fs.readFileSync(fullPath, 'utf8'))
9.333 - })
9.334 - return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
9.335 - }
9.336 -
9.337 - var files = getFiles('js') + getFiles('less') + getFiles('fonts')
9.338 - fs.writeFileSync('docs-assets/js/raw-files.js', files)
9.339 - });
9.340 -};
10.1 --- a/bootstrap-source/bootstrap-3.0.3/LICENSE Sat Jan 18 12:34:36 2014 +0100
10.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
10.3 @@ -1,176 +0,0 @@
10.4 - Apache License
10.5 - Version 2.0, January 2004
10.6 - http://www.apache.org/licenses/
10.7 -
10.8 - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
10.9 -
10.10 - 1. Definitions.
10.11 -
10.12 - "License" shall mean the terms and conditions for use, reproduction,
10.13 - and distribution as defined by Sections 1 through 9 of this document.
10.14 -
10.15 - "Licensor" shall mean the copyright owner or entity authorized by
10.16 - the copyright owner that is granting the License.
10.17 -
10.18 - "Legal Entity" shall mean the union of the acting entity and all
10.19 - other entities that control, are controlled by, or are under common
10.20 - control with that entity. For the purposes of this definition,
10.21 - "control" means (i) the power, direct or indirect, to cause the
10.22 - direction or management of such entity, whether by contract or
10.23 - otherwise, or (ii) ownership of fifty percent (50%) or more of the
10.24 - outstanding shares, or (iii) beneficial ownership of such entity.
10.25 -
10.26 - "You" (or "Your") shall mean an individual or Legal Entity
10.27 - exercising permissions granted by this License.
10.28 -
10.29 - "Source" form shall mean the preferred form for making modifications,
10.30 - including but not limited to software source code, documentation
10.31 - source, and configuration files.
10.32 -
10.33 - "Object" form shall mean any form resulting from mechanical
10.34 - transformation or translation of a Source form, including but
10.35 - not limited to compiled object code, generated documentation,
10.36 - and conversions to other media types.
10.37 -
10.38 - "Work" shall mean the work of authorship, whether in Source or
10.39 - Object form, made available under the License, as indicated by a
10.40 - copyright notice that is included in or attached to the work
10.41 - (an example is provided in the Appendix below).
10.42 -
10.43 - "Derivative Works" shall mean any work, whether in Source or Object
10.44 - form, that is based on (or derived from) the Work and for which the
10.45 - editorial revisions, annotations, elaborations, or other modifications
10.46 - represent, as a whole, an original work of authorship. For the purposes
10.47 - of this License, Derivative Works shall not include works that remain
10.48 - separable from, or merely link (or bind by name) to the interfaces of,
10.49 - the Work and Derivative Works thereof.
10.50 -
10.51 - "Contribution" shall mean any work of authorship, including
10.52 - the original version of the Work and any modifications or additions
10.53 - to that Work or Derivative Works thereof, that is intentionally
10.54 - submitted to Licensor for inclusion in the Work by the copyright owner
10.55 - or by an individual or Legal Entity authorized to submit on behalf of
10.56 - the copyright owner. For the purposes of this definition, "submitted"
10.57 - means any form of electronic, verbal, or written communication sent
10.58 - to the Licensor or its representatives, including but not limited to
10.59 - communication on electronic mailing lists, source code control systems,
10.60 - and issue tracking systems that are managed by, or on behalf of, the
10.61 - Licensor for the purpose of discussing and improving the Work, but
10.62 - excluding communication that is conspicuously marked or otherwise
10.63 - designated in writing by the copyright owner as "Not a Contribution."
10.64 -
10.65 - "Contributor" shall mean Licensor and any individual or Legal Entity
10.66 - on behalf of whom a Contribution has been received by Licensor and
10.67 - subsequently incorporated within the Work.
10.68 -
10.69 - 2. Grant of Copyright License. Subject to the terms and conditions of
10.70 - this License, each Contributor hereby grants to You a perpetual,
10.71 - worldwide, non-exclusive, no-charge, royalty-free, irrevocable
10.72 - copyright license to reproduce, prepare Derivative Works of,
10.73 - publicly display, publicly perform, sublicense, and distribute the
10.74 - Work and such Derivative Works in Source or Object form.
10.75 -
10.76 - 3. Grant of Patent License. Subject to the terms and conditions of
10.77 - this License, each Contributor hereby grants to You a perpetual,
10.78 - worldwide, non-exclusive, no-charge, royalty-free, irrevocable
10.79 - (except as stated in this section) patent license to make, have made,
10.80 - use, offer to sell, sell, import, and otherwise transfer the Work,
10.81 - where such license applies only to those patent claims licensable
10.82 - by such Contributor that are necessarily infringed by their
10.83 - Contribution(s) alone or by combination of their Contribution(s)
10.84 - with the Work to which such Contribution(s) was submitted. If You
10.85 - institute patent litigation against any entity (including a
10.86 - cross-claim or counterclaim in a lawsuit) alleging that the Work
10.87 - or a Contribution incorporated within the Work constitutes direct
10.88 - or contributory patent infringement, then any patent licenses
10.89 - granted to You under this License for that Work shall terminate
10.90 - as of the date such litigation is filed.
10.91 -
10.92 - 4. Redistribution. You may reproduce and distribute copies of the
10.93 - Work or Derivative Works thereof in any medium, with or without
10.94 - modifications, and in Source or Object form, provided that You
10.95 - meet the following conditions:
10.96 -
10.97 - (a) You must give any other recipients of the Work or
10.98 - Derivative Works a copy of this License; and
10.99 -
10.100 - (b) You must cause any modified files to carry prominent notices
10.101 - stating that You changed the files; and
10.102 -
10.103 - (c) You must retain, in the Source form of any Derivative Works
10.104 - that You distribute, all copyright, patent, trademark, and
10.105 - attribution notices from the Source form of the Work,
10.106 - excluding those notices that do not pertain to any part of
10.107 - the Derivative Works; and
10.108 -
10.109 - (d) If the Work includes a "NOTICE" text file as part of its
10.110 - distribution, then any Derivative Works that You distribute must
10.111 - include a readable copy of the attribution notices contained
10.112 - within such NOTICE file, excluding those notices that do not
10.113 - pertain to any part of the Derivative Works, in at least one
10.114 - of the following places: within a NOTICE text file distributed
10.115 - as part of the Derivative Works; within the Source form or
10.116 - documentation, if provided along with the Derivative Works; or,
10.117 - within a display generated by the Derivative Works, if and
10.118 - wherever such third-party notices normally appear. The contents
10.119 - of the NOTICE file are for informational purposes only and
10.120 - do not modify the License. You may add Your own attribution
10.121 - notices within Derivative Works that You distribute, alongside
10.122 - or as an addendum to the NOTICE text from the Work, provided
10.123 - that such additional attribution notices cannot be construed
10.124 - as modifying the License.
10.125 -
10.126 - You may add Your own copyright statement to Your modifications and
10.127 - may provide additional or different license terms and conditions
10.128 - for use, reproduction, or distribution of Your modifications, or
10.129 - for any such Derivative Works as a whole, provided Your use,
10.130 - reproduction, and distribution of the Work otherwise complies with
10.131 - the conditions stated in this License.
10.132 -
10.133 - 5. Submission of Contributions. Unless You explicitly state otherwise,
10.134 - any Contribution intentionally submitted for inclusion in the Work
10.135 - by You to the Licensor shall be under the terms and conditions of
10.136 - this License, without any additional terms or conditions.
10.137 - Notwithstanding the above, nothing herein shall supersede or modify
10.138 - the terms of any separate license agreement you may have executed
10.139 - with Licensor regarding such Contributions.
10.140 -
10.141 - 6. Trademarks. This License does not grant permission to use the trade
10.142 - names, trademarks, service marks, or product names of the Licensor,
10.143 - except as required for reasonable and customary use in describing the
10.144 - origin of the Work and reproducing the content of the NOTICE file.
10.145 -
10.146 - 7. Disclaimer of Warranty. Unless required by applicable law or
10.147 - agreed to in writing, Licensor provides the Work (and each
10.148 - Contributor provides its Contributions) on an "AS IS" BASIS,
10.149 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10.150 - implied, including, without limitation, any warranties or conditions
10.151 - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
10.152 - PARTICULAR PURPOSE. You are solely responsible for determining the
10.153 - appropriateness of using or redistributing the Work and assume any
10.154 - risks associated with Your exercise of permissions under this License.
10.155 -
10.156 - 8. Limitation of Liability. In no event and under no legal theory,
10.157 - whether in tort (including negligence), contract, or otherwise,
10.158 - unless required by applicable law (such as deliberate and grossly
10.159 - negligent acts) or agreed to in writing, shall any Contributor be
10.160 - liable to You for damages, including any direct, indirect, special,
10.161 - incidental, or consequential damages of any character arising as a
10.162 - result of this License or out of the use or inability to use the
10.163 - Work (including but not limited to damages for loss of goodwill,
10.164 - work stoppage, computer failure or malfunction, or any and all
10.165 - other commercial damages or losses), even if such Contributor
10.166 - has been advised of the possibility of such damages.
10.167 -
10.168 - 9. Accepting Warranty or Additional Liability. While redistributing
10.169 - the Work or Derivative Works thereof, You may choose to offer,
10.170 - and charge a fee for, acceptance of support, warranty, indemnity,
10.171 - or other liability obligations and/or rights consistent with this
10.172 - License. However, in accepting such obligations, You may act only
10.173 - on Your own behalf and on Your sole responsibility, not on behalf
10.174 - of any other Contributor, and only if You agree to indemnify,
10.175 - defend, and hold each Contributor harmless for any liability
10.176 - incurred by, or claims asserted against, such Contributor by reason
10.177 - of your accepting any such warranty or additional liability.
10.178 -
10.179 - END OF TERMS AND CONDITIONS
11.1 --- a/bootstrap-source/bootstrap-3.0.3/LICENSE-MIT Sat Jan 18 12:34:36 2014 +0100
11.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
11.3 @@ -1,21 +0,0 @@
11.4 -The MIT License (MIT)
11.5 -
11.6 -Copyright (c) 2013 Twitter, Inc
11.7 -
11.8 -Permission is hereby granted, free of charge, to any person obtaining a copy
11.9 -of this software and associated documentation files (the "Software"), to deal
11.10 -in the Software without restriction, including without limitation the rights
11.11 -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11.12 -copies of the Software, and to permit persons to whom the Software is
11.13 -furnished to do so, subject to the following conditions:
11.14 -
11.15 -The above copyright notice and this permission notice shall be included in
11.16 -all copies or substantial portions of the Software.
11.17 -
11.18 -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11.19 -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
11.20 -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
11.21 -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
11.22 -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
11.23 -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
11.24 -THE SOFTWARE.
12.1 --- a/bootstrap-source/bootstrap-3.0.3/README.md Sat Jan 18 12:34:36 2014 +0100
12.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
12.3 @@ -1,166 +0,0 @@
12.4 -# [Bootstrap](http://getbootstrap.com) [](http://travis-ci.org/twbs/bootstrap) [](https://david-dm.org/twbs/bootstrap#info=devDependencies)
12.5 -[](https://saucelabs.com/u/bootstrap)
12.6 -
12.7 -Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
12.8 -
12.9 -To get started, check out <http://getbootstrap.com>!
12.10 -
12.11 -
12.12 -
12.13 -## Quick start
12.14 -
12.15 -Three quick start options are available:
12.16 -
12.17 -* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.0.3.zip).
12.18 -* Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
12.19 -* Install with [Bower](http://bower.io): `bower install bootstrap`.
12.20 -
12.21 -Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
12.22 -
12.23 -### What's included
12.24 -
12.25 -Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
12.26 -
12.27 -```
12.28 -bootstrap/
12.29 -├── css/
12.30 -│ ├── bootstrap.css
12.31 -│ ├── bootstrap.min.css
12.32 -│ ├── bootstrap-theme.css
12.33 -│ └── bootstrap-theme.min.css
12.34 -├── js/
12.35 -│ ├── bootstrap.js
12.36 -│ └── bootstrap.min.js
12.37 -└── fonts/
12.38 - ├── glyphicons-halflings-regular.eot
12.39 - ├── glyphicons-halflings-regular.svg
12.40 - ├── glyphicons-halflings-regular.ttf
12.41 - └── glyphicons-halflings-regular.woff
12.42 -```
12.43 -
12.44 -We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). Fonts from Glyphicons are included, as is the optional Bootstrap theme.
12.45 -
12.46 -
12.47 -
12.48 -## Bugs and feature requests
12.49 -
12.50 -Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
12.51 -
12.52 -You may use [this JS Bin](http://jsbin.com/aKiCIDO/1/edit) as a template for your bug reports.
12.53 -
12.54 -
12.55 -
12.56 -## Documentation
12.57 -
12.58 -Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
12.59 -
12.60 -### Running documentation locally
12.61 -
12.62 -1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
12.63 -2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
12.64 - - **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
12.65 -3. Open <http://localhost:9001> in your browser, and voilà.
12.66 -
12.67 -Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
12.68 -
12.69 -### Documentation for previous releases
12.70 -
12.71 -Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
12.72 -
12.73 -[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
12.74 -
12.75 -
12.76 -
12.77 -## Compiling CSS and JavaScript
12.78 -
12.79 -Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
12.80 -
12.81 -### Install Grunt
12.82 -
12.83 -From the command line:
12.84 -
12.85 -1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
12.86 -2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](package.json) and automatically install the necessary local dependencies listed there.
12.87 -
12.88 -When completed, you'll be able to run the various Grunt commands provided from the command line.
12.89 -
12.90 -**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
12.91 -
12.92 -### Available Grunt commands
12.93 -
12.94 -#### Build - `grunt`
12.95 -Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
12.96 -
12.97 -#### Only compile CSS and JavaScript - `grunt dist`
12.98 -`grunt dist` creates the `/dist` directory with compiled files. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
12.99 -
12.100 -#### Tests - `grunt test`
12.101 -Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
12.102 -
12.103 -#### Watch - `grunt watch`
12.104 -This is a convenience method for watching just Less files and automatically building them whenever you save.
12.105 -
12.106 -### Troubleshooting dependencies
12.107 -
12.108 -Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
12.109 -
12.110 -
12.111 -
12.112 -## Contributing
12.113 -
12.114 -Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
12.115 -
12.116 -More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
12.117 -
12.118 -Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
12.119 -
12.120 -With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). Please see the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for more information.
12.121 -
12.122 -
12.123 -## Community
12.124 -
12.125 -Keep track of development and community news.
12.126 -
12.127 -* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
12.128 -* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
12.129 -* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
12.130 -* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
12.131 -
12.132 -
12.133 -
12.134 -
12.135 -## Versioning
12.136 -
12.137 -For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
12.138 -
12.139 -Releases will be numbered with the following format:
12.140 -
12.141 -`<major>.<minor>.<patch>`
12.142 -
12.143 -And constructed with the following guidelines:
12.144 -
12.145 -* Breaking backward compatibility bumps the major (and resets the minor and patch)
12.146 -* New additions without breaking backward compatibility bumps the minor (and resets the patch)
12.147 -* Bug fixes and misc changes bumps the patch
12.148 -
12.149 -For more information on SemVer, please visit <http://semver.org/>.
12.150 -
12.151 -
12.152 -
12.153 -## Authors
12.154 -
12.155 -**Mark Otto**
12.156 -
12.157 -+ <http://twitter.com/mdo>
12.158 -+ <http://github.com/mdo>
12.159 -
12.160 -**Jacob Thornton**
12.161 -
12.162 -+ <http://twitter.com/fat>
12.163 -+ <http://github.com/fat>
12.164 -
12.165 -
12.166 -
12.167 -## Copyright and license
12.168 -
12.169 -Copyright 2013 Twitter, Inc under [the Apache 2.0 license](LICENSE).
13.1 --- a/bootstrap-source/bootstrap-3.0.3/_config.yml Sat Jan 18 12:34:36 2014 +0100
13.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
13.3 @@ -1,25 +0,0 @@
13.4 -# Dependencies
13.5 -markdown: rdiscount
13.6 -pygments: true
13.7 -
13.8 -# Permalinks
13.9 -permalink: pretty
13.10 -
13.11 -# Server
13.12 -destination: ./_gh_pages
13.13 -exclude: [".editorconfig", ".gitignore", "bower.json", "composer.json", "CONTRIBUTING.md", "CNAME", "LICENSE", "Gruntfile.js", "package.json", "node_modules", "README.md", "less"]
13.14 -port: 9001
13.15 -
13.16 -# Custom vars
13.17 -current_version: 3.0.3
13.18 -repo: https://github.com/twbs/bootstrap
13.19 -
13.20 -download_source: https://github.com/twbs/bootstrap/archive/v3.0.3.zip
13.21 -download_dist: https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
13.22 -
13.23 -blog: http://blog.getbootstrap.com
13.24 -expo: http://expo.getbootstrap.com
13.25 -
13.26 -cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
13.27 -cdn_theme_css: //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css
13.28 -cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
14.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/ads.html Sat Jan 18 12:34:36 2014 +0100
14.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
14.3 @@ -1,1 +0,0 @@
14.4 -<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
15.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/footer.html Sat Jan 18 12:34:36 2014 +0100
15.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
15.3 @@ -1,48 +0,0 @@
15.4 -<!-- Bootstrap core JavaScript
15.5 -================================================== -->
15.6 -<!-- Placed at the end of the document so the pages load faster -->
15.7 -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
15.8 -<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
15.9 -
15.10 -<script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
15.11 -
15.12 -<script src="{{ page.base_url }}docs-assets/js/application.js"></script>
15.13 -
15.14 -{% if page.slug == "customize" %}
15.15 -<script src="{{ page.base_url }}docs-assets/js/less.js"></script>
15.16 -<script src="{{ page.base_url }}docs-assets/js/jszip.js"></script>
15.17 -<script src="{{ page.base_url }}docs-assets/js/uglify.js"></script>
15.18 -<script src="{{ page.base_url }}docs-assets/js/filesaver.js"></script>
15.19 -<script src="{{ page.base_url }}docs-assets/js/raw-files.js"></script>
15.20 -<script src="{{ page.base_url }}docs-assets/js/customizer.js"></script>
15.21 -{% endif %}
15.22 -
15.23 -{% comment %}
15.24 - Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
15.25 - JS interface site: https://dev.twitter.com/docs/tfw-javascript
15.26 -
15.27 - * "js.async=1;" added to add async attribute to the generated script tag.
15.28 -{% endcomment %}
15.29 -<script>
15.30 - window.twttr = (function (d,s,id) {
15.31 - var t, js, fjs = d.getElementsByTagName(s)[0];
15.32 - if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
15.33 - js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
15.34 - return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
15.35 - }(document, "script", "twitter-wjs"));
15.36 -</script>
15.37 -
15.38 -<!-- Analytics
15.39 -================================================== -->
15.40 -<script>
15.41 - var _gauges = _gauges || [];
15.42 - (function() {
15.43 - var t = document.createElement('script');
15.44 - t.async = true;
15.45 - t.id = 'gauges-tracker';
15.46 - t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
15.47 - t.src = '//secure.gaug.es/track.js';
15.48 - var s = document.getElementsByTagName('script')[0];
15.49 - s.parentNode.insertBefore(t, s);
15.50 - })();
15.51 -</script>
16.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/header.html Sat Jan 18 12:34:36 2014 +0100
16.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
16.3 @@ -1,42 +0,0 @@
16.4 -<meta charset="utf-8">
16.5 -<meta http-equiv="X-UA-Compatible" content="IE=edge">
16.6 -<meta name="viewport" content="width=device-width, initial-scale=1.0">
16.7 -<meta name="description" content="">
16.8 -<meta name="author" content="">
16.9 -
16.10 -<title>
16.11 - {% if page.title == "Bootstrap" %}
16.12 - {{ page.title }}
16.13 - {% else %}
16.14 - {{ page.title }} · Bootstrap
16.15 - {% endif %}
16.16 -</title>
16.17 -
16.18 -<!-- Bootstrap core CSS -->
16.19 -<link href="{{ page.base_url }}dist/css/bootstrap.min.css" rel="stylesheet">
16.20 -
16.21 -<!-- Documentation extras -->
16.22 -<link href="{{ page.base_url }}docs-assets/css/docs.css" rel="stylesheet">
16.23 -<link href="{{ page.base_url }}docs-assets/css/pygments-manni.css" rel="stylesheet">
16.24 -<!--[if lt IE 9]><script src="{{ page.base_url }}docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
16.25 -
16.26 -<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
16.27 -<!--[if lt IE 9]>
16.28 - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
16.29 - <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
16.30 -<![endif]-->
16.31 -
16.32 -<!-- Favicons -->
16.33 -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ page.base_url }}docs-assets/ico/apple-touch-icon-144-precomposed.png">
16.34 - <link rel="shortcut icon" href="{{ page.base_url }}docs-assets/ico/favicon.png">
16.35 -
16.36 -<script>
16.37 - var _gaq = _gaq || [];
16.38 - _gaq.push(['_setAccount', 'UA-146052-10']);
16.39 - _gaq.push(['_trackPageview']);
16.40 - (function() {
16.41 - var ga = document.createElement('script'); ga.async = true;
16.42 - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
16.43 - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
16.44 - })();
16.45 -</script>
17.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-about.html Sat Jan 18 12:34:36 2014 +0100
17.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
17.3 @@ -1,12 +0,0 @@
17.4 -<li>
17.5 - <a href="#history">History</a>
17.6 -</li>
17.7 -<li>
17.8 - <a href="#team">Core team</a>
17.9 -</li>
17.10 -<li>
17.11 - <a href="#community">Community</a>
17.12 -</li>
17.13 -<li>
17.14 - <a href="#translations">Translations</a>
17.15 -</li>
18.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-components.html Sat Jan 18 12:34:36 2014 +0100
18.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
18.3 @@ -1,137 +0,0 @@
18.4 -<li>
18.5 - <a href="#glyphicons">Glyphicons</a>
18.6 - <ul class="nav">
18.7 - <li><a href="#glyphicons-glyphs">Available glyphs</a></li>
18.8 - <li><a href="#glyphicons-how-to-use">How to use</a></li>
18.9 - <li><a href="#glyphicons-examples">Examples</a></li>
18.10 - </ul>
18.11 -</li>
18.12 -<li>
18.13 - <a href="#dropdowns">Dropdowns</a>
18.14 - <ul class="nav">
18.15 - <li><a href="#dropdowns-example">Example</a></li>
18.16 - <li><a href="#dropdowns-alignment">Alignment options</a></li>
18.17 - <li><a href="#dropdowns-headers">Headers</a></li>
18.18 - <li><a href="#dropdowns-disabled">Disabled menu items</a></li>
18.19 - </ul>
18.20 -</li>
18.21 -<li>
18.22 - <a href="#btn-groups">Button groups</a>
18.23 - <ul class="nav">
18.24 - <li><a href="#btn-groups-single">Basic example</a></li>
18.25 - <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
18.26 - <li><a href="#btn-groups-sizing">Sizing</a></li>
18.27 - <li><a href="#btn-groups-nested">Nesting</a></li>
18.28 - <li><a href="#btn-groups-vertical">Vertical variation</a></li>
18.29 - <li><a href="#btn-groups-justified">Justified link variation</a></li>
18.30 - </ul>
18.31 -</li>
18.32 -<li>
18.33 - <a href="#btn-dropdowns">Button dropdowns</a>
18.34 - <ul class="nav">
18.35 - <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
18.36 - <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
18.37 - <li><a href="#btn-dropdowns-sizing">Sizing</a></li>
18.38 - <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
18.39 - </ul>
18.40 -</li>
18.41 -<li>
18.42 - <a href="#input-groups">Input groups</a>
18.43 - <ul class="nav">
18.44 - <li><a href="#input-groups-basic">Basic example</a></li>
18.45 - <li><a href="#input-groups-sizing">Sizing</a></li>
18.46 - <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
18.47 - <li><a href="#input-groups-buttons">Button addons</a></li>
18.48 - <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
18.49 - <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li>
18.50 - </ul>
18.51 -</li>
18.52 -<li>
18.53 - <a href="#nav">Navs</a>
18.54 - <ul class="nav">
18.55 - <li><a href="#nav-tabs">Tabs</a></li>
18.56 - <li><a href="#nav-pills">Pills</a></li>
18.57 - <li><a href="#nav-justified">Justified nav</a></li>
18.58 - <li><a href="#nav-disabled-links">Disabled links</a></li>
18.59 - <li><a href="#nav-dropdowns">Using dropdowns</a></li>
18.60 - </ul>
18.61 -</li>
18.62 -<li>
18.63 - <a href="#navbar">Navbar</a>
18.64 - <ul class="nav">
18.65 - <li><a href="#navbar-default">Default navbar</a></li>
18.66 - <li><a href="#navbar-forms">Forms</a></li>
18.67 - <li><a href="#navbar-buttons">Buttons</a></li>
18.68 - <li><a href="#navbar-text">Text</a></li>
18.69 - <li><a href="#navbar-links">Non-nav links</a></li>
18.70 - <li><a href="#navbar-component-alignment">Component alignment</a></li>
18.71 - <li><a href="#navbar-fixed-top">Fixed to top</a></li>
18.72 - <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
18.73 - <li><a href="#navbar-static-top">Static top</a></li>
18.74 - <li><a href="#navbar-inverted">Inverted navbar</a></li>
18.75 - </ul>
18.76 -</li>
18.77 -<li><a href="#breadcrumbs">Breadcrumbs</a></li>
18.78 -<li>
18.79 - <a href="#pagination">Pagination</a>
18.80 - <ul class="nav">
18.81 - <li><a href="#pagination-default">Default pagination</a></li>
18.82 - <li><a href="#pagination-pager">Pager</a></li>
18.83 - </ul>
18.84 -</li>
18.85 -<li><a href="#labels">Labels</a></li>
18.86 -<li><a href="#badges">Badges</a></li>
18.87 -<li><a href="#jumbotron">Jumbotron</a></li>
18.88 -<li><a href="#page-header">Page header</a></li>
18.89 -<li>
18.90 - <a href="#thumbnails">Thumbnails</a>
18.91 - <ul class="nav">
18.92 - <li><a href="#thumbnails-default">Default example</a></li>
18.93 - <li><a href="#thumbnails-custom-content">Custom content</a></li>
18.94 - </ul>
18.95 -</li>
18.96 -<li>
18.97 - <a href="#alerts">Alerts</a>
18.98 - <ul class="nav">
18.99 - <li><a href="#alerts-examples">Examples</a></li>
18.100 - <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
18.101 - <li><a href="#alerts-links">Links in alerts</a></li>
18.102 - </ul>
18.103 -</li>
18.104 -<li>
18.105 - <a href="#progress">Progress bars</a>
18.106 - <ul class="nav">
18.107 - <li><a href="#progress-basic">Basic example</a></li>
18.108 - <li><a href="#progress-alternatives">Contextual alternatives</a></li>
18.109 - <li><a href="#progress-striped">Striped</a></li>
18.110 - <li><a href="#progress-animated">Animated</a></li>
18.111 - <li><a href="#progress-stacked">Stacked</a></li>
18.112 - </ul>
18.113 -</li>
18.114 -<li>
18.115 - <a href="#media">Media object</a>
18.116 - <ul class="nav">
18.117 - <li><a href="#media-default">Default media</a></li>
18.118 - <li><a href="#media-list">Media list</a></li>
18.119 - </ul>
18.120 -</li>
18.121 -<li>
18.122 - <a href="#list-group">List group</a>
18.123 - <ul class="nav">
18.124 - <li><a href="#list-group-basic">Basic example</a></li>
18.125 - <li><a href="#list-group-badges">Badges</a></li>
18.126 - <li><a href="#list-group-linked">Linked items</a></li>
18.127 - <li><a href="#list-group-custom-content">Custom content</a></li>
18.128 - </ul>
18.129 -</li>
18.130 -<li>
18.131 - <a href="#panels">Panels</a>
18.132 - <ul class="nav">
18.133 - <li><a href="#panels-basic">Basic example</a></li>
18.134 - <li><a href="#panels-heading">Panel with heading</a></li>
18.135 - <li><a href="#panels-alternatives">Contextual alternatives</a></li>
18.136 - <li><a href="#panels-tables">With tables</a>
18.137 - <li><a href="#panels-list-group">With list groups</a>
18.138 - </ul>
18.139 -</li>
18.140 -<li><a href="#wells">Wells</a></li>
19.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-css.html Sat Jan 18 12:34:36 2014 +0100
19.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
19.3 @@ -1,99 +0,0 @@
19.4 -<li>
19.5 - <a href="#overview">Overview</a>
19.6 - <ul class="nav">
19.7 - <li><a href="#overview-doctype">HTML5 doctype</a></li>
19.8 - <li><a href="#overview-mobile">Mobile first</a></li>
19.9 - <li><a href="#overview-responsive-images">Responsive images</a></li>
19.10 - <li><a href="#overview-type-links">Typography and links</a></li>
19.11 - <li><a href="#overview-normalize">Normalize</a></li>
19.12 - <li><a href="#overview-container">Containers</a></li>
19.13 - </ul>
19.14 -</li>
19.15 -<li>
19.16 - <a href="#grid">Grid system</a>
19.17 - <ul class="nav">
19.18 - <li><a href="#grid-intro">Introduction</a></li>
19.19 - <li><a href="#grid-media-queries">Media queries</a></li>
19.20 - <li><a href="#grid-options">Grid options</a></li>
19.21 - <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
19.22 - <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
19.23 - <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
19.24 - <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
19.25 - <li><a href="#grid-offsetting">Offsetting columns</a></li>
19.26 - <li><a href="#grid-nesting">Nesting columns</a></li>
19.27 - <li><a href="#grid-column-ordering">Column ordering</a></li>
19.28 - <li><a href="#grid-less">LESS mixins and variables</a></li>
19.29 - </ul>
19.30 -</li>
19.31 -<li>
19.32 - <a href="#type">Typography</a>
19.33 - <ul class="nav">
19.34 - <li><a href="#type-headings">Headings</a></li>
19.35 - <li><a href="#type-body-copy">Body copy</a></li>
19.36 - <li><a href="#type-emphasis">Emphasis</a></li>
19.37 - <li><a href="#type-abbreviations">Abbreviations</a></li>
19.38 - <li><a href="#type-addresses">Addresses</a></li>
19.39 - <li><a href="#type-blockquotes">Blockquotes</a></li>
19.40 - <li><a href="#type-lists">Lists</a></li>
19.41 - </ul>
19.42 -</li>
19.43 -<li><a href="#code">Code</a></li>
19.44 -<li>
19.45 - <a href="#tables">Tables</a>
19.46 - <ul class="nav">
19.47 - <li><a href="#tables-example">Basic example</a></li>
19.48 - <li><a href="#tables-striped">Striped rows</a></li>
19.49 - <li><a href="#tables-bordered">Bordered table</a></li>
19.50 - <li><a href="#tables-hover-rows">Hover rows</a></li>
19.51 - <li><a href="#tables-condensed">Condensed table</a></li>
19.52 - <li><a href="#tables-contextual-classes">Contextual classes</a></li>
19.53 - <li><a href="#tables-responsive">Responsive tables</a></li>
19.54 - </ul>
19.55 -</li>
19.56 -<li>
19.57 - <a href="#forms">Forms</a>
19.58 - <ul class="nav">
19.59 - <li><a href="#forms-example">Basic example</a></li>
19.60 - <li><a href="#forms-inline">Inline form</a></li>
19.61 - <li><a href="#forms-horizontal">Horizontal form</a></li>
19.62 - <li><a href="#forms-controls">Supported controls</a></li>
19.63 - <li><a href="#forms-controls-static">Static control</a></li>
19.64 - <li><a href="#forms-control-states">Control states</a></li>
19.65 - <li><a href="#forms-control-sizes">Control sizing</a></li>
19.66 - <li><a href="#forms-help-text">Help text</a></li>
19.67 - </ul>
19.68 -</li>
19.69 -<li>
19.70 - <a href="#buttons">Buttons</a>
19.71 - <ul class="nav">
19.72 - <li><a href="#buttons-options">Options</a></li>
19.73 - <li><a href="#buttons-sizes">Sizes</a></li>
19.74 - <li><a href="#buttons-active">Active state</a></li>
19.75 - <li><a href="#buttons-disabled">Disabled state</a></li>
19.76 - <li><a href="#buttons-tags">Button tags</a></li>
19.77 - </ul>
19.78 -</li>
19.79 -<li>
19.80 - <a href="#images">Images</a>
19.81 -</li>
19.82 -<li>
19.83 - <a href="#helper-classes">Helper classes</a>
19.84 - <ul class="nav">
19.85 - <li><a href="#helper-classes-close">Close icon</a></li>
19.86 - <li><a href="#helper-classes-carets">Carets</a></li>
19.87 - <li><a href="#helper-classes-floats">Quick floats</a></li>
19.88 - <li><a href="#helper-classes-center">Center content blocks</a></li>
19.89 - <li><a href="#helper-classes-clearfix">Clearfix</a></li>
19.90 - <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
19.91 - <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
19.92 - <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
19.93 - </ul>
19.94 -</li>
19.95 -<li>
19.96 - <a href="#responsive-utilities">Responsive utilities</a>
19.97 - <ul class="nav">
19.98 - <li><a href="#responsive-utilities-classes">Available classes</a></li>
19.99 - <li><a href="#responsive-utilities-print">Print classes</a></li>
19.100 - <li><a href="#responsive-utilities-tests">Test cases</a></li>
19.101 - </ul>
19.102 -</li>
20.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-customize.html Sat Jan 18 12:34:36 2014 +0100
20.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
20.3 @@ -1,40 +0,0 @@
20.4 -<li>
20.5 - <a href="#less">LESS components</a>
20.6 -</li>
20.7 -<li>
20.8 - <a href="#plugins">jQuery plugins</a>
20.9 -</li>
20.10 -<li>
20.11 - <a href="#less-variables">LESS variables</a>
20.12 - <ul class="nav">
20.13 - <li><a href="#variables-basics">Basics</a></li>
20.14 - <li><a href="#variables-buttons">Buttons</a></li>
20.15 - <li><a href="#variables-form-states">Form states</a></li>
20.16 - <li><a href="#variables-alerts">Alerts</a></li>
20.17 - <li><a href="#variables-navbar">Navbar</a></li>
20.18 - <li><a href="#variables-nav">Nav</a></li>
20.19 - <li><a href="#variables-tables">Tables</a></li>
20.20 - <li><a href="#variables-forms">Forms</a></li>
20.21 - <li><a href="#variables-dropdowns">Dropdowns</a></li>
20.22 - <li><a href="#variables-panels-wells">Panels and wells</a></li>
20.23 - <li><a href="#variables-accordion">Accordion</a></li>
20.24 - <li><a href="#variables-badges">Badges</a></li>
20.25 - <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
20.26 - <li><a href="#variables-jumbotron">Jumbotron</a></li>
20.27 - <li><a href="#variables-modals">Modals</a></li>
20.28 - <li><a href="#variables-carousel">Carousel</a></li>
20.29 - <li><a href="#variables-list-group">List group</a></li>
20.30 - <li><a href="#variables-thumbnails">Thumbnails</a></li>
20.31 - <li><a href="#variables-progress">Progress bars</a></li>
20.32 - <li><a href="#variables-pagination">Pagination</a></li>
20.33 - <li><a href="#variables-pager">Pager</a></li>
20.34 - <li><a href="#variables-labels">Labels</a></li>
20.35 - <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
20.36 - <li><a href="#variables-close">Close button</a></li>
20.37 - <li><a href="#variables-type">Type</a></li>
20.38 - <li><a href="#variables-other">Other</a></li>
20.39 - </ul>
20.40 -</li>
20.41 -<li>
20.42 - <a href="#download">Download</a>
20.43 -</li>
21.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-getting-started.html Sat Jan 18 12:34:36 2014 +0100
21.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
21.3 @@ -1,48 +0,0 @@
21.4 -<li>
21.5 - <a href="#download">Download Bootstrap</a>
21.6 - <ul class="nav">
21.7 - <li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
21.8 - <li><a href="#download-additional">Additional downloads</a></li>
21.9 - <li><a href="#download-cdn">Bootstrap CDN</a></li>
21.10 - </ul>
21.11 -</li>
21.12 -<li>
21.13 - <a href="#whats-included">What's included</a>
21.14 - <ul class="nav">
21.15 - <li><a href="#whats-included-precompiled">Precompiled</a></li>
21.16 - <li><a href="#whats-included-source">Source code</a></li>
21.17 - </ul>
21.18 -</li>
21.19 -<li>
21.20 - <a href="#template">Basic template</a>
21.21 -</li>
21.22 -<li>
21.23 - <a href="#examples">Examples</a>
21.24 -</li>
21.25 -<li>
21.26 - <a href="#disable-responsive">Disabling responsiveness</a>
21.27 -</li>
21.28 -<li>
21.29 - <a href="#migration">Migrating from 2.x to 3.0</a>
21.30 - <ul class="nav">
21.31 - <li><a href="#migration-classes">Major class changes</a></li>
21.32 - <li><a href="#migration-new">What's new</a></li>
21.33 - <li><a href="#migration-dropped">What's removed</a></li>
21.34 - <li><a href="#migration-notes">Additional notes</a></li>
21.35 - </ul>
21.36 -</li>
21.37 -<li>
21.38 - <a href="#browsers">Browser support</a>
21.39 -</li>
21.40 -<li>
21.41 - <a href="#third-parties">Third party support</a>
21.42 -</li>
21.43 -<li>
21.44 - <a href="#accessibility">Accessibility</a>
21.45 -</li>
21.46 -<li>
21.47 - <a href="#license-faqs">License FAQs</a>
21.48 -</li>
21.49 -<li>
21.50 - <a href="#customizing">Customizing Bootstrap</a>
21.51 -</li>
22.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-javascript.html Sat Jan 18 12:34:36 2014 +0100
22.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
22.3 @@ -1,88 +0,0 @@
22.4 -<li>
22.5 - <a href="#js-overview">Overview</a>
22.6 - <ul class="nav">
22.7 - <li><a href="#js-individual-compiled">Individual or compiled</a></li>
22.8 - <li><a href="#js-data-attrs">Data attributes</a></li>
22.9 - <li><a href="#js-programmatic-api">Programmatic API</a></li>
22.10 - <li><a href="#js-noconflict">No conflict</a></li>
22.11 - <li><a href="#js-events">Events</a></li>
22.12 - </ul>
22.13 -</li>
22.14 -<li><a href="#transitions">Transitions</a></li>
22.15 -<li>
22.16 - <a href="#modals">Modal</a>
22.17 - <ul class="nav">
22.18 - <li><a href="#modals-examples">Examples</a></li>
22.19 - <li><a href="#modals-usage">Usage</a></li>
22.20 - </ul>
22.21 -</li>
22.22 -<li>
22.23 - <a href="#dropdowns">Dropdown</a>
22.24 - <ul class="nav">
22.25 - <li><a href="#dropdowns-examples">Examples</a></li>
22.26 - <li><a href="#dropdowns-usage">Usage</a></li>
22.27 - </ul>
22.28 -</li>
22.29 -<li>
22.30 - <a href="#scrollspy">Scrollspy</a>
22.31 - <ul class="nav">
22.32 - <li><a href="#scrollspy-examples">Examples</a></li>
22.33 - <li><a href="#scrollspy-usage">Usage</a></li>
22.34 - </ul>
22.35 -</li>
22.36 -<li>
22.37 - <a href="#tabs">Tab</a>
22.38 - <ul class="nav">
22.39 - <li><a href="#tabs-examples">Examples</a></li>
22.40 - <li><a href="#tabs-usage">Usage</a></li>
22.41 - </ul>
22.42 -</li>
22.43 -<li>
22.44 - <a href="#tooltips">Tooltip</a>
22.45 - <ul class="nav">
22.46 - <li><a href="#tooltips-examples">Examples</a></li>
22.47 - <li><a href="#tooltips-usage">Usage</a></li>
22.48 - </ul>
22.49 -</li>
22.50 -<li>
22.51 - <a href="#popovers">Popover</a>
22.52 - <ul class="nav">
22.53 - <li><a href="#popovers-examples">Examples</a></li>
22.54 - <li><a href="#popovers-usage">Usage</a></li>
22.55 - </ul>
22.56 -</li>
22.57 -<li>
22.58 - <a href="#alerts">Alert</a>
22.59 - <ul class="nav">
22.60 - <li><a href="#alerts-examples">Examples</a></li>
22.61 - <li><a href="#alerts-usage">Usage</a></li>
22.62 - </ul>
22.63 -</li>
22.64 -<li>
22.65 - <a href="#buttons">Button</a>
22.66 - <ul class="nav">
22.67 - <li><a href="#buttons-examples">Examples</a></li>
22.68 - <li><a href="#buttons-usage">Usage</a></li>
22.69 - </ul>
22.70 -</li>
22.71 -<li>
22.72 - <a href="#collapse">Collapse</a>
22.73 - <ul class="nav">
22.74 - <li><a href="#collapse-examples">Examples</a></li>
22.75 - <li><a href="#collapse-usage">Usage</a></li>
22.76 - </ul>
22.77 -</li>
22.78 -<li>
22.79 - <a href="#carousel">Carousel</a>
22.80 - <ul class="nav">
22.81 - <li><a href="#carousel-examples">Examples</a></li>
22.82 - <li><a href="#carousel-usage">Usage</a></li>
22.83 - </ul>
22.84 -</li>
22.85 -<li>
22.86 - <a href="#affix">Affix</a>
22.87 - <ul class="nav">
22.88 - <li><a href="#affix-examples">Examples</a></li>
22.89 - <li><a href="#affix-usage">Usage</a></li>
22.90 - </ul>
22.91 -</li>
23.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/nav-main.html Sat Jan 18 12:34:36 2014 +0100
23.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
23.3 @@ -1,37 +0,0 @@
23.4 -<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
23.5 - <div class="container">
23.6 - <div class="navbar-header">
23.7 - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
23.8 - <span class="sr-only">Toggle navigation</span>
23.9 - <span class="icon-bar"></span>
23.10 - <span class="icon-bar"></span>
23.11 - <span class="icon-bar"></span>
23.12 - </button>
23.13 - <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap</a>
23.14 - </div>
23.15 - <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
23.16 - <ul class="nav navbar-nav">
23.17 - <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
23.18 - <a href="{{ page.base_url }}getting-started">Getting started</a>
23.19 - </li>
23.20 - <li{% if page.slug == "css" %} class="active"{% endif %}>
23.21 - <a href="{{ page.base_url }}css">CSS</a>
23.22 - </li>
23.23 - <li{% if page.slug == "components" %} class="active"{% endif %}>
23.24 - <a href="{{ page.base_url }}components">Components</a>
23.25 - </li>
23.26 - <li{% if page.slug == "js" %} class="active"{% endif %}>
23.27 - <a href="{{ page.base_url }}javascript">JavaScript</a>
23.28 - </li>
23.29 - <li{% if page.slug == "customize" %} class="active"{% endif %}>
23.30 - <a href="{{ page.base_url }}customize">Customize</a>
23.31 - </li>
23.32 - </ul>
23.33 - <ul class="nav navbar-nav navbar-right">
23.34 - <li{% if page.slug == "about" %} class="active"{% endif %}>
23.35 - <a href="{{ page.base_url }}about">About</a>
23.36 - </li>
23.37 - </ul>
23.38 - </nav>
23.39 - </div>
23.40 -</header>
24.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/old-bs-docs.html Sat Jan 18 12:34:36 2014 +0100
24.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
24.3 @@ -1,8 +0,0 @@
24.4 -<div class="bs-old-docs">
24.5 - <div class="container">
24.6 - <strong>
24.7 - <a href="{{ page.base_url }}2.3.2/">Looking for Bootstrap 2.3.2 docs?</a>
24.8 - </strong>
24.9 - We've moved it to a new home while we push forward with Bootstrap 3. <a href="http://blog.getbootstrap.com/">Read the blog</a> for details.
24.10 - </div>
24.11 -</div>
25.1 --- a/bootstrap-source/bootstrap-3.0.3/_includes/social-buttons.html Sat Jan 18 12:34:36 2014 +0100
25.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
25.3 @@ -1,16 +0,0 @@
25.4 -<div class="bs-social">
25.5 - <ul class="bs-social-buttons">
25.6 - <li>
25.7 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
25.8 - </li>
25.9 - <li>
25.10 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
25.11 - </li>
25.12 - <li class="follow-btn">
25.13 - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
25.14 - </li>
25.15 - <li class="tweet-btn">
25.16 - <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
25.17 - </li>
25.18 - </ul>
25.19 -</div>
26.1 --- a/bootstrap-source/bootstrap-3.0.3/_layouts/default.html Sat Jan 18 12:34:36 2014 +0100
26.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
26.3 @@ -1,79 +0,0 @@
26.4 -<!DOCTYPE html>
26.5 -<html lang="en">
26.6 - <head>
26.7 - <!-- Meta, title, CSS, favicons, etc. -->
26.8 - {% include header.html %}
26.9 - </head>
26.10 - <body>
26.11 - <a class="sr-only" href="#content">Skip to main content</a>
26.12 -
26.13 - <!-- Docs master nav -->
26.14 - {% include nav-main.html %}
26.15 -
26.16 - <!-- Docs page layout -->
26.17 - <div class="bs-header" id="content">
26.18 - <div class="container">
26.19 - <h1>{{ page.title }}</h1>
26.20 - <p>{{ page.lead }}</p>
26.21 - {% include ads.html %}
26.22 - </div>
26.23 - </div>
26.24 -
26.25 - <!-- Callout for the old docs link -->
26.26 - {% include old-bs-docs.html %}
26.27 -
26.28 - <div class="container bs-docs-container">
26.29 - <div class="row">
26.30 - <div class="col-md-3">
26.31 - <div class="bs-sidebar hidden-print" role="complementary">
26.32 - <ul class="nav bs-sidenav">
26.33 - {% if page.slug == "getting-started" %}
26.34 - {% include nav-getting-started.html %}
26.35 - {% elsif page.slug == "css" %}
26.36 - {% include nav-css.html %}
26.37 - {% elsif page.slug == "components" %}
26.38 - {% include nav-components.html %}
26.39 - {% elsif page.slug == "js" %}
26.40 - {% include nav-javascript.html %}
26.41 - {% elsif page.slug == "customize" %}
26.42 - {% include nav-customize.html %}
26.43 - {% elsif page.slug == "about" %}
26.44 - {% include nav-about.html %}
26.45 - {% endif %}
26.46 - </ul>
26.47 - </div>
26.48 - </div>
26.49 - <div class="col-md-9" role="main">
26.50 - {{ content }}
26.51 - </div>
26.52 - </div>
26.53 -
26.54 - </div>
26.55 -
26.56 - <!-- Footer
26.57 - ================================================== -->
26.58 - <footer class="bs-footer" role="contentinfo">
26.59 - <div class="container">
26.60 - {% include social-buttons.html %}
26.61 -
26.62 - <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
26.63 - <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
26.64 - <ul class="footer-links">
26.65 - <li>Currently v{{ site.current_version }}</li>
26.66 - <li class="muted">·</li>
26.67 - <li><a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
26.68 - <li class="muted">·</li>
26.69 - <li><a href="{{ site.blog }}">Blog</a></li>
26.70 - <li class="muted">·</li>
26.71 - <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
26.72 - <li class="muted">·</li>
26.73 - <li><a href="{{ site.repo }}/releases">Releases</a></li>
26.74 - </ul>
26.75 - </div>
26.76 - </footer>
26.77 -
26.78 - <!-- JS and analytics only. -->
26.79 - {% include footer.html %}
26.80 -
26.81 - </body>
26.82 -</html>
27.1 --- a/bootstrap-source/bootstrap-3.0.3/_layouts/home.html Sat Jan 18 12:34:36 2014 +0100
27.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
27.3 @@ -1,47 +0,0 @@
27.4 -<!DOCTYPE html>
27.5 -<html lang="en">
27.6 - <head>
27.7 - <!-- Meta, title, CSS, favicons, etc. -->
27.8 - {% include header.html %}
27.9 - </head>
27.10 - <body class="bs-docs-home">
27.11 - <a class="sr-only" href="#content">Skip to main content</a>
27.12 -
27.13 - <!-- Docs master nav -->
27.14 - {% include nav-main.html %}
27.15 -
27.16 - <!-- Page content of course! -->
27.17 - {{ content }}
27.18 -
27.19 - <footer class="container" role="contentinfo">
27.20 - {% include ads.html %}
27.21 -
27.22 - {% include social-buttons.html %}
27.23 -
27.24 - <ul class="bs-masthead-links">
27.25 - <li class="current-version">
27.26 - Currently v{{ site.current_version }}
27.27 - </li>
27.28 - <li>
27.29 - <a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a>
27.30 - </li>
27.31 - <li>
27.32 - <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
27.33 - </li>
27.34 - <li>
27.35 - <a href="{{ page.base_url }}getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
27.36 - </li>
27.37 - <li>
27.38 - <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
27.39 - </li>
27.40 - <li>
27.41 - <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
27.42 - </li>
27.43 - </ul>
27.44 - </footer>
27.45 -
27.46 - <!-- JS and analytics only. -->
27.47 - {% include footer.html %}
27.48 -
27.49 - </body>
27.50 -</html>
28.1 --- a/bootstrap-source/bootstrap-3.0.3/about.html Sat Jan 18 12:34:36 2014 +0100
28.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
28.3 @@ -1,94 +0,0 @@
28.4 ----
28.5 -layout: default
28.6 -title: About
28.7 -slug: about
28.8 -lead: "Learn about the history of Bootstrap, meet the core team, and check out the ever-growing community resources."
28.9 -base_url: "../"
28.10 ----
28.11 -
28.12 -
28.13 -<!-- History
28.14 -================================================== -->
28.15 -<div class="bs-docs-section">
28.16 - <div class="page-header">
28.17 - <h1 id="history">History</h1>
28.18 - </div>
28.19 - <p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
28.20 - <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
28.21 - <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
28.22 -</div>
28.23 -
28.24 -
28.25 -<!-- Team
28.26 -================================================== -->
28.27 -<div class="bs-docs-section">
28.28 - <div class="page-header">
28.29 - <h1 id="team">Core team</h1>
28.30 - </div>
28.31 - <p class="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
28.32 - <div class="list-group bs-team">
28.33 - <div class="list-group-item">
28.34 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe>
28.35 - <a class="team-member" href="https://github.com/mdo">
28.36 - <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
28.37 - <strong>Mark Otto</strong> <small>@mdo</small>
28.38 - </a>
28.39 - </div>
28.40 - <div class="list-group-item">
28.41 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=fat&type=follow"></iframe>
28.42 - <a class="team-member" href="https://github.com/fat">
28.43 - <img src="http://www.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8" alt="@fat">
28.44 - <strong>Jacob Thornton</strong> <small>@fat</small>
28.45 - </a>
28.46 - </div>
28.47 - <div class="list-group-item">
28.48 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=cvrebert&type=follow"></iframe>
28.49 - <a class="team-member" href="https://github.com/cvrebert">
28.50 - <img src="http://www.gravatar.com/avatar/edec428c425453955f770095a7d26c50" alt="@cvrebert">
28.51 - <strong>Chris Rebert</strong> <small>@cvrebert</small>
28.52 - </a>
28.53 - </div>
28.54 - <div class="list-group-item">
28.55 - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=juthilo&type=follow"></iframe>
28.56 - <a class="team-member" href="https://github.com/juthilo">
28.57 - <img src="http://www.gravatar.com/avatar/0f7dd3ce58a416be5685ea6194f82b11" alt="@juthilo">
28.58 - <strong>Julian Thilo</strong> <small>@juthilo</small>
28.59 - </a>
28.60 - </div>
28.61 - </div>
28.62 - <p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
28.63 -</div>
28.64 -
28.65 -
28.66 -<!-- Community
28.67 -================================================== -->
28.68 -<div class="bs-docs-section">
28.69 - <div class="page-header">
28.70 - <h1 id="community">Community</h1>
28.71 - </div>
28.72 - <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
28.73 - <ul>
28.74 - <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
28.75 - <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
28.76 - <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
28.77 - <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
28.78 - </ul>
28.79 - <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
28.80 -</div>
28.81 -
28.82 -
28.83 -<!-- Translations
28.84 -================================================== -->
28.85 -<div class="bs-docs-section">
28.86 - <div class="page-header">
28.87 - <h1 id="translations">Translations</h1>
28.88 - </div>
28.89 - <p class="lead">Community members have translated Bootstrap's documentation into various langauges. None are officially supported and may not always be up to date.</p>
28.90 - <ul>
28.91 - <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
28.92 - <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
28.93 - <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
28.94 - <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
28.95 - </ul>
28.96 - <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
28.97 -</div>
29.1 --- a/bootstrap-source/bootstrap-3.0.3/bower.json Sat Jan 18 12:34:36 2014 +0100
29.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
29.3 @@ -1,30 +0,0 @@
29.4 -{
29.5 - "name": "bootstrap",
29.6 - "version": "3.0.3",
29.7 - "main": [
29.8 - "./dist/js/bootstrap.js",
29.9 - "./dist/css/bootstrap.css",
29.10 - "./dist/fonts/glyphicons-halflings-regular.eot",
29.11 - "./dist/fonts/glyphicons-halflings-regular.svg",
29.12 - "./dist/fonts/glyphicons-halflings-regular.ttf",
29.13 - "./dist/fonts/glyphicons-halflings-regular.woff"
29.14 - ],
29.15 - "ignore": [
29.16 - "**/.*",
29.17 - "_*",
29.18 - "docs-assets",
29.19 - "examples",
29.20 - "/fonts",
29.21 - "js/tests",
29.22 - "CNAME",
29.23 - "CONTRIBUTING.md",
29.24 - "Gruntfile.js",
29.25 - "browserstack.json",
29.26 - "composer.json",
29.27 - "package.json",
29.28 - "*.html"
29.29 - ],
29.30 - "dependencies": {
29.31 - "jquery": ">= 1.9.0"
29.32 - }
29.33 -}
30.1 --- a/bootstrap-source/bootstrap-3.0.3/components.html Sat Jan 18 12:34:36 2014 +0100
30.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
30.3 @@ -1,3714 +0,0 @@
30.4 ----
30.5 -layout: default
30.6 -title: Components
30.7 -slug: components
30.8 -lead: "Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more."
30.9 -base_url: "../"
30.10 ----
30.11 -
30.12 -
30.13 - <!-- Glyphicons
30.14 - ================================================== -->
30.15 - <div class="bs-docs-section">
30.16 - <div class="page-header">
30.17 - <h1 id="glyphicons">Glyphicons</h1>
30.18 - </div>
30.19 -
30.20 - <h2 id="glyphicons-glyphs">Available glyphs</h2>
30.21 - <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
30.22 - <ul class="bs-glyphicons">
30.23 - <li>
30.24 - <span class="glyphicon glyphicon-adjust"></span>
30.25 - <span class="glyphicon-class">glyphicon glyphicon-adjust</span>
30.26 - </li>
30.27 - <li>
30.28 - <span class="glyphicon glyphicon-align-center"></span>
30.29 - <span class="glyphicon-class">glyphicon glyphicon-align-center</span>
30.30 - </li>
30.31 - <li>
30.32 - <span class="glyphicon glyphicon-align-justify"></span>
30.33 - <span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
30.34 - </li>
30.35 - <li>
30.36 - <span class="glyphicon glyphicon-align-left"></span>
30.37 - <span class="glyphicon-class">glyphicon glyphicon-align-left</span>
30.38 - </li>
30.39 - <li>
30.40 - <span class="glyphicon glyphicon-align-right"></span>
30.41 - <span class="glyphicon-class">glyphicon glyphicon-align-right</span>
30.42 - </li>
30.43 - <li>
30.44 - <span class="glyphicon glyphicon-arrow-down"></span>
30.45 - <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
30.46 - </li>
30.47 - <li>
30.48 - <span class="glyphicon glyphicon-arrow-left"></span>
30.49 - <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
30.50 - </li>
30.51 - <li>
30.52 - <span class="glyphicon glyphicon-arrow-right"></span>
30.53 - <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
30.54 - </li>
30.55 - <li>
30.56 - <span class="glyphicon glyphicon-arrow-up"></span>
30.57 - <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
30.58 - </li>
30.59 - <li>
30.60 - <span class="glyphicon glyphicon-asterisk"></span>
30.61 - <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
30.62 - </li>
30.63 - <li>
30.64 - <span class="glyphicon glyphicon-backward"></span>
30.65 - <span class="glyphicon-class">glyphicon glyphicon-backward</span>
30.66 - </li>
30.67 - <li>
30.68 - <span class="glyphicon glyphicon-ban-circle"></span>
30.69 - <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
30.70 - </li>
30.71 - <li>
30.72 - <span class="glyphicon glyphicon-barcode"></span>
30.73 - <span class="glyphicon-class">glyphicon glyphicon-barcode</span>
30.74 - </li>
30.75 - <li>
30.76 - <span class="glyphicon glyphicon-bell"></span>
30.77 - <span class="glyphicon-class">glyphicon glyphicon-bell</span>
30.78 - </li>
30.79 - <li>
30.80 - <span class="glyphicon glyphicon-bold"></span>
30.81 - <span class="glyphicon-class">glyphicon glyphicon-bold</span>
30.82 - </li>
30.83 - <li>
30.84 - <span class="glyphicon glyphicon-book"></span>
30.85 - <span class="glyphicon-class">glyphicon glyphicon-book</span>
30.86 - </li>
30.87 - <li>
30.88 - <span class="glyphicon glyphicon-bookmark"></span>
30.89 - <span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
30.90 - </li>
30.91 - <li>
30.92 - <span class="glyphicon glyphicon-briefcase"></span>
30.93 - <span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
30.94 - </li>
30.95 - <li>
30.96 - <span class="glyphicon glyphicon-bullhorn"></span>
30.97 - <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
30.98 - </li>
30.99 - <li>
30.100 - <span class="glyphicon glyphicon-calendar"></span>
30.101 - <span class="glyphicon-class">glyphicon glyphicon-calendar</span>
30.102 - </li>
30.103 - <li>
30.104 - <span class="glyphicon glyphicon-camera"></span>
30.105 - <span class="glyphicon-class">glyphicon glyphicon-camera</span>
30.106 - </li>
30.107 - <li>
30.108 - <span class="glyphicon glyphicon-certificate"></span>
30.109 - <span class="glyphicon-class">glyphicon glyphicon-certificate</span>
30.110 - </li>
30.111 - <li>
30.112 - <span class="glyphicon glyphicon-check"></span>
30.113 - <span class="glyphicon-class">glyphicon glyphicon-check</span>
30.114 - </li>
30.115 - <li>
30.116 - <span class="glyphicon glyphicon-chevron-down"></span>
30.117 - <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
30.118 - </li>
30.119 - <li>
30.120 - <span class="glyphicon glyphicon-chevron-left"></span>
30.121 - <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
30.122 - </li>
30.123 - <li>
30.124 - <span class="glyphicon glyphicon-chevron-right"></span>
30.125 - <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
30.126 - </li>
30.127 - <li>
30.128 - <span class="glyphicon glyphicon-chevron-up"></span>
30.129 - <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
30.130 - </li>
30.131 - <li>
30.132 - <span class="glyphicon glyphicon-circle-arrow-down"></span>
30.133 - <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
30.134 - </li>
30.135 - <li>
30.136 - <span class="glyphicon glyphicon-circle-arrow-left"></span>
30.137 - <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
30.138 - </li>
30.139 - <li>
30.140 - <span class="glyphicon glyphicon-circle-arrow-right"></span>
30.141 - <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
30.142 - </li>
30.143 - <li>
30.144 - <span class="glyphicon glyphicon-circle-arrow-up"></span>
30.145 - <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
30.146 - </li>
30.147 - <li>
30.148 - <span class="glyphicon glyphicon-cloud"></span>
30.149 - <span class="glyphicon-class">glyphicon glyphicon-cloud</span>
30.150 - </li>
30.151 - <li>
30.152 - <span class="glyphicon glyphicon-cloud-download"></span>
30.153 - <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
30.154 - </li>
30.155 - <li>
30.156 - <span class="glyphicon glyphicon-cloud-upload"></span>
30.157 - <span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
30.158 - </li>
30.159 - <li>
30.160 - <span class="glyphicon glyphicon-cog"></span>
30.161 - <span class="glyphicon-class">glyphicon glyphicon-cog</span>
30.162 - </li>
30.163 - <li>
30.164 - <span class="glyphicon glyphicon-collapse-down"></span>
30.165 - <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
30.166 - </li>
30.167 - <li>
30.168 - <span class="glyphicon glyphicon-collapse-up"></span>
30.169 - <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
30.170 - </li>
30.171 - <li>
30.172 - <span class="glyphicon glyphicon-comment"></span>
30.173 - <span class="glyphicon-class">glyphicon glyphicon-comment</span>
30.174 - </li>
30.175 - <li>
30.176 - <span class="glyphicon glyphicon-compressed"></span>
30.177 - <span class="glyphicon-class">glyphicon glyphicon-compressed</span>
30.178 - </li>
30.179 - <li>
30.180 - <span class="glyphicon glyphicon-copyright-mark"></span>
30.181 - <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
30.182 - </li>
30.183 - <li>
30.184 - <span class="glyphicon glyphicon-credit-card"></span>
30.185 - <span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
30.186 - </li>
30.187 - <li>
30.188 - <span class="glyphicon glyphicon-cutlery"></span>
30.189 - <span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
30.190 - </li>
30.191 - <li>
30.192 - <span class="glyphicon glyphicon-dashboard"></span>
30.193 - <span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
30.194 - </li>
30.195 - <li>
30.196 - <span class="glyphicon glyphicon-download"></span>
30.197 - <span class="glyphicon-class">glyphicon glyphicon-download</span>
30.198 - </li>
30.199 - <li>
30.200 - <span class="glyphicon glyphicon-download-alt"></span>
30.201 - <span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
30.202 - </li>
30.203 - <li>
30.204 - <span class="glyphicon glyphicon-earphone"></span>
30.205 - <span class="glyphicon-class">glyphicon glyphicon-earphone</span>
30.206 - </li>
30.207 - <li>
30.208 - <span class="glyphicon glyphicon-edit"></span>
30.209 - <span class="glyphicon-class">glyphicon glyphicon-edit</span>
30.210 - </li>
30.211 - <li>
30.212 - <span class="glyphicon glyphicon-eject"></span>
30.213 - <span class="glyphicon-class">glyphicon glyphicon-eject</span>
30.214 - </li>
30.215 - <li>
30.216 - <span class="glyphicon glyphicon-envelope"></span>
30.217 - <span class="glyphicon-class">glyphicon glyphicon-envelope</span>
30.218 - </li>
30.219 - <li>
30.220 - <span class="glyphicon glyphicon-euro"></span>
30.221 - <span class="glyphicon-class">glyphicon glyphicon-euro</span>
30.222 - </li>
30.223 - <li>
30.224 - <span class="glyphicon glyphicon-exclamation-sign"></span>
30.225 - <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
30.226 - </li>
30.227 - <li>
30.228 - <span class="glyphicon glyphicon-expand"></span>
30.229 - <span class="glyphicon-class">glyphicon glyphicon-expand</span>
30.230 - </li>
30.231 - <li>
30.232 - <span class="glyphicon glyphicon-export"></span>
30.233 - <span class="glyphicon-class">glyphicon glyphicon-export</span>
30.234 - </li>
30.235 - <li>
30.236 - <span class="glyphicon glyphicon-eye-close"></span>
30.237 - <span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
30.238 - </li>
30.239 - <li>
30.240 - <span class="glyphicon glyphicon-eye-open"></span>
30.241 - <span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
30.242 - </li>
30.243 - <li>
30.244 - <span class="glyphicon glyphicon-facetime-video"></span>
30.245 - <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
30.246 - </li>
30.247 - <li>
30.248 - <span class="glyphicon glyphicon-fast-backward"></span>
30.249 - <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
30.250 - </li>
30.251 - <li>
30.252 - <span class="glyphicon glyphicon-fast-forward"></span>
30.253 - <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
30.254 - </li>
30.255 - <li>
30.256 - <span class="glyphicon glyphicon-file"></span>
30.257 - <span class="glyphicon-class">glyphicon glyphicon-file</span>
30.258 - </li>
30.259 - <li>
30.260 - <span class="glyphicon glyphicon-film"></span>
30.261 - <span class="glyphicon-class">glyphicon glyphicon-film</span>
30.262 - </li>
30.263 - <li>
30.264 - <span class="glyphicon glyphicon-filter"></span>
30.265 - <span class="glyphicon-class">glyphicon glyphicon-filter</span>
30.266 - </li>
30.267 - <li>
30.268 - <span class="glyphicon glyphicon-fire"></span>
30.269 - <span class="glyphicon-class">glyphicon glyphicon-fire</span>
30.270 - </li>
30.271 - <li>
30.272 - <span class="glyphicon glyphicon-flag"></span>
30.273 - <span class="glyphicon-class">glyphicon glyphicon-flag</span>
30.274 - </li>
30.275 - <li>
30.276 - <span class="glyphicon glyphicon-flash"></span>
30.277 - <span class="glyphicon-class">glyphicon glyphicon-flash</span>
30.278 - </li>
30.279 - <li>
30.280 - <span class="glyphicon glyphicon-floppy-disk"></span>
30.281 - <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
30.282 - </li>
30.283 - <li>
30.284 - <span class="glyphicon glyphicon-floppy-open"></span>
30.285 - <span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
30.286 - </li>
30.287 - <li>
30.288 - <span class="glyphicon glyphicon-floppy-remove"></span>
30.289 - <span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
30.290 - </li>
30.291 - <li>
30.292 - <span class="glyphicon glyphicon-floppy-save"></span>
30.293 - <span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
30.294 - </li>
30.295 - <li>
30.296 - <span class="glyphicon glyphicon-floppy-saved"></span>
30.297 - <span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
30.298 - </li>
30.299 - <li>
30.300 - <span class="glyphicon glyphicon-folder-close"></span>
30.301 - <span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
30.302 - </li>
30.303 - <li>
30.304 - <span class="glyphicon glyphicon-folder-open"></span>
30.305 - <span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
30.306 - </li>
30.307 - <li>
30.308 - <span class="glyphicon glyphicon-font"></span>
30.309 - <span class="glyphicon-class">glyphicon glyphicon-font</span>
30.310 - </li>
30.311 - <li>
30.312 - <span class="glyphicon glyphicon-forward"></span>
30.313 - <span class="glyphicon-class">glyphicon glyphicon-forward</span>
30.314 - </li>
30.315 - <li>
30.316 - <span class="glyphicon glyphicon-fullscreen"></span>
30.317 - <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
30.318 - </li>
30.319 - <li>
30.320 - <span class="glyphicon glyphicon-gbp"></span>
30.321 - <span class="glyphicon-class">glyphicon glyphicon-gbp</span>
30.322 - </li>
30.323 - <li>
30.324 - <span class="glyphicon glyphicon-gift"></span>
30.325 - <span class="glyphicon-class">glyphicon glyphicon-gift</span>
30.326 - </li>
30.327 - <li>
30.328 - <span class="glyphicon glyphicon-glass"></span>
30.329 - <span class="glyphicon-class">glyphicon glyphicon-glass</span>
30.330 - </li>
30.331 - <li>
30.332 - <span class="glyphicon glyphicon-globe"></span>
30.333 - <span class="glyphicon-class">glyphicon glyphicon-globe</span>
30.334 - </li>
30.335 - <li>
30.336 - <span class="glyphicon glyphicon-hand-down"></span>
30.337 - <span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
30.338 - </li>
30.339 - <li>
30.340 - <span class="glyphicon glyphicon-hand-left"></span>
30.341 - <span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
30.342 - </li>
30.343 - <li>
30.344 - <span class="glyphicon glyphicon-hand-right"></span>
30.345 - <span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
30.346 - </li>
30.347 - <li>
30.348 - <span class="glyphicon glyphicon-hand-up"></span>
30.349 - <span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
30.350 - </li>
30.351 - <li>
30.352 - <span class="glyphicon glyphicon-hd-video"></span>
30.353 - <span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
30.354 - </li>
30.355 - <li>
30.356 - <span class="glyphicon glyphicon-hdd"></span>
30.357 - <span class="glyphicon-class">glyphicon glyphicon-hdd</span>
30.358 - </li>
30.359 - <li>
30.360 - <span class="glyphicon glyphicon-header"></span>
30.361 - <span class="glyphicon-class">glyphicon glyphicon-header</span>
30.362 - </li>
30.363 - <li>
30.364 - <span class="glyphicon glyphicon-headphones"></span>
30.365 - <span class="glyphicon-class">glyphicon glyphicon-headphones</span>
30.366 - </li>
30.367 - <li>
30.368 - <span class="glyphicon glyphicon-heart"></span>
30.369 - <span class="glyphicon-class">glyphicon glyphicon-heart</span>
30.370 - </li>
30.371 - <li>
30.372 - <span class="glyphicon glyphicon-heart-empty"></span>
30.373 - <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
30.374 - </li>
30.375 - <li>
30.376 - <span class="glyphicon glyphicon-home"></span>
30.377 - <span class="glyphicon-class">glyphicon glyphicon-home</span>
30.378 - </li>
30.379 - <li>
30.380 - <span class="glyphicon glyphicon-import"></span>
30.381 - <span class="glyphicon-class">glyphicon glyphicon-import</span>
30.382 - </li>
30.383 - <li>
30.384 - <span class="glyphicon glyphicon-inbox"></span>
30.385 - <span class="glyphicon-class">glyphicon glyphicon-inbox</span>
30.386 - </li>
30.387 - <li>
30.388 - <span class="glyphicon glyphicon-indent-left"></span>
30.389 - <span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
30.390 - </li>
30.391 - <li>
30.392 - <span class="glyphicon glyphicon-indent-right"></span>
30.393 - <span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
30.394 - </li>
30.395 - <li>
30.396 - <span class="glyphicon glyphicon-info-sign"></span>
30.397 - <span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
30.398 - </li>
30.399 - <li>
30.400 - <span class="glyphicon glyphicon-italic"></span>
30.401 - <span class="glyphicon-class">glyphicon glyphicon-italic</span>
30.402 - </li>
30.403 - <li>
30.404 - <span class="glyphicon glyphicon-leaf"></span>
30.405 - <span class="glyphicon-class">glyphicon glyphicon-leaf</span>
30.406 - </li>
30.407 - <li>
30.408 - <span class="glyphicon glyphicon-link"></span>
30.409 - <span class="glyphicon-class">glyphicon glyphicon-link</span>
30.410 - </li>
30.411 - <li>
30.412 - <span class="glyphicon glyphicon-list"></span>
30.413 - <span class="glyphicon-class">glyphicon glyphicon-list</span>
30.414 - </li>
30.415 - <li>
30.416 - <span class="glyphicon glyphicon-list-alt"></span>
30.417 - <span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
30.418 - </li>
30.419 - <li>
30.420 - <span class="glyphicon glyphicon-lock"></span>
30.421 - <span class="glyphicon-class">glyphicon glyphicon-lock</span>
30.422 - </li>
30.423 - <li>
30.424 - <span class="glyphicon glyphicon-log-in"></span>
30.425 - <span class="glyphicon-class">glyphicon glyphicon-log-in</span>
30.426 - </li>
30.427 - <li>
30.428 - <span class="glyphicon glyphicon-log-out"></span>
30.429 - <span class="glyphicon-class">glyphicon glyphicon-log-out</span>
30.430 - </li>
30.431 - <li>
30.432 - <span class="glyphicon glyphicon-magnet"></span>
30.433 - <span class="glyphicon-class">glyphicon glyphicon-magnet</span>
30.434 - </li>
30.435 - <li>
30.436 - <span class="glyphicon glyphicon-map-marker"></span>
30.437 - <span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
30.438 - </li>
30.439 - <li>
30.440 - <span class="glyphicon glyphicon-minus"></span>
30.441 - <span class="glyphicon-class">glyphicon glyphicon-minus</span>
30.442 - </li>
30.443 - <li>
30.444 - <span class="glyphicon glyphicon-minus-sign"></span>
30.445 - <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
30.446 - </li>
30.447 - <li>
30.448 - <span class="glyphicon glyphicon-move"></span>
30.449 - <span class="glyphicon-class">glyphicon glyphicon-move</span>
30.450 - </li>
30.451 - <li>
30.452 - <span class="glyphicon glyphicon-music"></span>
30.453 - <span class="glyphicon-class">glyphicon glyphicon-music</span>
30.454 - </li>
30.455 - <li>
30.456 - <span class="glyphicon glyphicon-new-window"></span>
30.457 - <span class="glyphicon-class">glyphicon glyphicon-new-window</span>
30.458 - </li>
30.459 - <li>
30.460 - <span class="glyphicon glyphicon-off"></span>
30.461 - <span class="glyphicon-class">glyphicon glyphicon-off</span>
30.462 - </li>
30.463 - <li>
30.464 - <span class="glyphicon glyphicon-ok"></span>
30.465 - <span class="glyphicon-class">glyphicon glyphicon-ok</span>
30.466 - </li>
30.467 - <li>
30.468 - <span class="glyphicon glyphicon-ok-circle"></span>
30.469 - <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
30.470 - </li>
30.471 - <li>
30.472 - <span class="glyphicon glyphicon-ok-sign"></span>
30.473 - <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
30.474 - </li>
30.475 - <li>
30.476 - <span class="glyphicon glyphicon-open"></span>
30.477 - <span class="glyphicon-class">glyphicon glyphicon-open</span>
30.478 - </li>
30.479 - <li>
30.480 - <span class="glyphicon glyphicon-paperclip"></span>
30.481 - <span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
30.482 - </li>
30.483 - <li>
30.484 - <span class="glyphicon glyphicon-pause"></span>
30.485 - <span class="glyphicon-class">glyphicon glyphicon-pause</span>
30.486 - </li>
30.487 - <li>
30.488 - <span class="glyphicon glyphicon-pencil"></span>
30.489 - <span class="glyphicon-class">glyphicon glyphicon-pencil</span>
30.490 - </li>
30.491 - <li>
30.492 - <span class="glyphicon glyphicon-phone"></span>
30.493 - <span class="glyphicon-class">glyphicon glyphicon-phone</span>
30.494 - </li>
30.495 - <li>
30.496 - <span class="glyphicon glyphicon-phone-alt"></span>
30.497 - <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
30.498 - </li>
30.499 - <li>
30.500 - <span class="glyphicon glyphicon-picture"></span>
30.501 - <span class="glyphicon-class">glyphicon glyphicon-picture</span>
30.502 - </li>
30.503 - <li>
30.504 - <span class="glyphicon glyphicon-plane"></span>
30.505 - <span class="glyphicon-class">glyphicon glyphicon-plane</span>
30.506 - </li>
30.507 - <li>
30.508 - <span class="glyphicon glyphicon-play"></span>
30.509 - <span class="glyphicon-class">glyphicon glyphicon-play</span>
30.510 - </li>
30.511 - <li>
30.512 - <span class="glyphicon glyphicon-play-circle"></span>
30.513 - <span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
30.514 - </li>
30.515 - <li>
30.516 - <span class="glyphicon glyphicon-plus"></span>
30.517 - <span class="glyphicon-class">glyphicon glyphicon-plus</span>
30.518 - </li>
30.519 - <li>
30.520 - <span class="glyphicon glyphicon-plus-sign"></span>
30.521 - <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
30.522 - </li>
30.523 - <li>
30.524 - <span class="glyphicon glyphicon-print"></span>
30.525 - <span class="glyphicon-class">glyphicon glyphicon-print</span>
30.526 - </li>
30.527 - <li>
30.528 - <span class="glyphicon glyphicon-pushpin"></span>
30.529 - <span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
30.530 - </li>
30.531 - <li>
30.532 - <span class="glyphicon glyphicon-qrcode"></span>
30.533 - <span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
30.534 - </li>
30.535 - <li>
30.536 - <span class="glyphicon glyphicon-question-sign"></span>
30.537 - <span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
30.538 - </li>
30.539 - <li>
30.540 - <span class="glyphicon glyphicon-random"></span>
30.541 - <span class="glyphicon-class">glyphicon glyphicon-random</span>
30.542 - </li>
30.543 - <li>
30.544 - <span class="glyphicon glyphicon-record"></span>
30.545 - <span class="glyphicon-class">glyphicon glyphicon-record</span>
30.546 - </li>
30.547 - <li>
30.548 - <span class="glyphicon glyphicon-refresh"></span>
30.549 - <span class="glyphicon-class">glyphicon glyphicon-refresh</span>
30.550 - </li>
30.551 - <li>
30.552 - <span class="glyphicon glyphicon-registration-mark"></span>
30.553 - <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
30.554 - </li>
30.555 - <li>
30.556 - <span class="glyphicon glyphicon-remove"></span>
30.557 - <span class="glyphicon-class">glyphicon glyphicon-remove</span>
30.558 - </li>
30.559 - <li>
30.560 - <span class="glyphicon glyphicon-remove-circle"></span>
30.561 - <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
30.562 - </li>
30.563 - <li>
30.564 - <span class="glyphicon glyphicon-remove-sign"></span>
30.565 - <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
30.566 - </li>
30.567 - <li>
30.568 - <span class="glyphicon glyphicon-repeat"></span>
30.569 - <span class="glyphicon-class">glyphicon glyphicon-repeat</span>
30.570 - </li>
30.571 - <li>
30.572 - <span class="glyphicon glyphicon-resize-full"></span>
30.573 - <span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
30.574 - </li>
30.575 - <li>
30.576 - <span class="glyphicon glyphicon-resize-horizontal"></span>
30.577 - <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
30.578 - </li>
30.579 - <li>
30.580 - <span class="glyphicon glyphicon-resize-small"></span>
30.581 - <span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
30.582 - </li>
30.583 - <li>
30.584 - <span class="glyphicon glyphicon-resize-vertical"></span>
30.585 - <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
30.586 - </li>
30.587 - <li>
30.588 - <span class="glyphicon glyphicon-retweet"></span>
30.589 - <span class="glyphicon-class">glyphicon glyphicon-retweet</span>
30.590 - </li>
30.591 - <li>
30.592 - <span class="glyphicon glyphicon-road"></span>
30.593 - <span class="glyphicon-class">glyphicon glyphicon-road</span>
30.594 - </li>
30.595 - <li>
30.596 - <span class="glyphicon glyphicon-save"></span>
30.597 - <span class="glyphicon-class">glyphicon glyphicon-save</span>
30.598 - </li>
30.599 - <li>
30.600 - <span class="glyphicon glyphicon-saved"></span>
30.601 - <span class="glyphicon-class">glyphicon glyphicon-saved</span>
30.602 - </li>
30.603 - <li>
30.604 - <span class="glyphicon glyphicon-screenshot"></span>
30.605 - <span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
30.606 - </li>
30.607 - <li>
30.608 - <span class="glyphicon glyphicon-sd-video"></span>
30.609 - <span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
30.610 - </li>
30.611 - <li>
30.612 - <span class="glyphicon glyphicon-search"></span>
30.613 - <span class="glyphicon-class">glyphicon glyphicon-search</span>
30.614 - </li>
30.615 - <li>
30.616 - <span class="glyphicon glyphicon-send"></span>
30.617 - <span class="glyphicon-class">glyphicon glyphicon-send</span>
30.618 - </li>
30.619 - <li>
30.620 - <span class="glyphicon glyphicon-share"></span>
30.621 - <span class="glyphicon-class">glyphicon glyphicon-share</span>
30.622 - </li>
30.623 - <li>
30.624 - <span class="glyphicon glyphicon-share-alt"></span>
30.625 - <span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
30.626 - </li>
30.627 - <li>
30.628 - <span class="glyphicon glyphicon-shopping-cart"></span>
30.629 - <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
30.630 - </li>
30.631 - <li>
30.632 - <span class="glyphicon glyphicon-signal"></span>
30.633 - <span class="glyphicon-class">glyphicon glyphicon-signal</span>
30.634 - </li>
30.635 - <li>
30.636 - <span class="glyphicon glyphicon-sort"></span>
30.637 - <span class="glyphicon-class">glyphicon glyphicon-sort</span>
30.638 - </li>
30.639 - <li>
30.640 - <span class="glyphicon glyphicon-sort-by-alphabet"></span>
30.641 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
30.642 - </li>
30.643 - <li>
30.644 - <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
30.645 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
30.646 - </li>
30.647 - <li>
30.648 - <span class="glyphicon glyphicon-sort-by-attributes"></span>
30.649 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
30.650 - </li>
30.651 - <li>
30.652 - <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
30.653 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
30.654 - </li>
30.655 - <li>
30.656 - <span class="glyphicon glyphicon-sort-by-order"></span>
30.657 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
30.658 - </li>
30.659 - <li>
30.660 - <span class="glyphicon glyphicon-sort-by-order-alt"></span>
30.661 - <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
30.662 - </li>
30.663 - <li>
30.664 - <span class="glyphicon glyphicon-sound-5-1"></span>
30.665 - <span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
30.666 - </li>
30.667 - <li>
30.668 - <span class="glyphicon glyphicon-sound-6-1"></span>
30.669 - <span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
30.670 - </li>
30.671 - <li>
30.672 - <span class="glyphicon glyphicon-sound-7-1"></span>
30.673 - <span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
30.674 - </li>
30.675 - <li>
30.676 - <span class="glyphicon glyphicon-sound-dolby"></span>
30.677 - <span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
30.678 - </li>
30.679 - <li>
30.680 - <span class="glyphicon glyphicon-sound-stereo"></span>
30.681 - <span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
30.682 - </li>
30.683 - <li>
30.684 - <span class="glyphicon glyphicon-star"></span>
30.685 - <span class="glyphicon-class">glyphicon glyphicon-star</span>
30.686 - </li>
30.687 - <li>
30.688 - <span class="glyphicon glyphicon-star-empty"></span>
30.689 - <span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
30.690 - </li>
30.691 - <li>
30.692 - <span class="glyphicon glyphicon-stats"></span>
30.693 - <span class="glyphicon-class">glyphicon glyphicon-stats</span>
30.694 - </li>
30.695 - <li>
30.696 - <span class="glyphicon glyphicon-step-backward"></span>
30.697 - <span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
30.698 - </li>
30.699 - <li>
30.700 - <span class="glyphicon glyphicon-step-forward"></span>
30.701 - <span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
30.702 - </li>
30.703 - <li>
30.704 - <span class="glyphicon glyphicon-stop"></span>
30.705 - <span class="glyphicon-class">glyphicon glyphicon-stop</span>
30.706 - </li>
30.707 - <li>
30.708 - <span class="glyphicon glyphicon-subtitles"></span>
30.709 - <span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
30.710 - </li>
30.711 - <li>
30.712 - <span class="glyphicon glyphicon-tag"></span>
30.713 - <span class="glyphicon-class">glyphicon glyphicon-tag</span>
30.714 - </li>
30.715 - <li>
30.716 - <span class="glyphicon glyphicon-tags"></span>
30.717 - <span class="glyphicon-class">glyphicon glyphicon-tags</span>
30.718 - </li>
30.719 - <li>
30.720 - <span class="glyphicon glyphicon-tasks"></span>
30.721 - <span class="glyphicon-class">glyphicon glyphicon-tasks</span>
30.722 - </li>
30.723 - <li>
30.724 - <span class="glyphicon glyphicon-text-height"></span>
30.725 - <span class="glyphicon-class">glyphicon glyphicon-text-height</span>
30.726 - </li>
30.727 - <li>
30.728 - <span class="glyphicon glyphicon-text-width"></span>
30.729 - <span class="glyphicon-class">glyphicon glyphicon-text-width</span>
30.730 - </li>
30.731 - <li>
30.732 - <span class="glyphicon glyphicon-th"></span>
30.733 - <span class="glyphicon-class">glyphicon glyphicon-th</span>
30.734 - </li>
30.735 - <li>
30.736 - <span class="glyphicon glyphicon-th-large"></span>
30.737 - <span class="glyphicon-class">glyphicon glyphicon-th-large</span>
30.738 - </li>
30.739 - <li>
30.740 - <span class="glyphicon glyphicon-th-list"></span>
30.741 - <span class="glyphicon-class">glyphicon glyphicon-th-list</span>
30.742 - </li>
30.743 - <li>
30.744 - <span class="glyphicon glyphicon-thumbs-down"></span>
30.745 - <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
30.746 - </li>
30.747 - <li>
30.748 - <span class="glyphicon glyphicon-thumbs-up"></span>
30.749 - <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
30.750 - </li>
30.751 - <li>
30.752 - <span class="glyphicon glyphicon-time"></span>
30.753 - <span class="glyphicon-class">glyphicon glyphicon-time</span>
30.754 - </li>
30.755 - <li>
30.756 - <span class="glyphicon glyphicon-tint"></span>
30.757 - <span class="glyphicon-class">glyphicon glyphicon-tint</span>
30.758 - </li>
30.759 - <li>
30.760 - <span class="glyphicon glyphicon-tower"></span>
30.761 - <span class="glyphicon-class">glyphicon glyphicon-tower</span>
30.762 - </li>
30.763 - <li>
30.764 - <span class="glyphicon glyphicon-transfer"></span>
30.765 - <span class="glyphicon-class">glyphicon glyphicon-transfer</span>
30.766 - </li>
30.767 - <li>
30.768 - <span class="glyphicon glyphicon-trash"></span>
30.769 - <span class="glyphicon-class">glyphicon glyphicon-trash</span>
30.770 - </li>
30.771 - <li>
30.772 - <span class="glyphicon glyphicon-tree-conifer"></span>
30.773 - <span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
30.774 - </li>
30.775 - <li>
30.776 - <span class="glyphicon glyphicon-tree-deciduous"></span>
30.777 - <span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
30.778 - </li>
30.779 - <li>
30.780 - <span class="glyphicon glyphicon-unchecked"></span>
30.781 - <span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
30.782 - </li>
30.783 - <li>
30.784 - <span class="glyphicon glyphicon-upload"></span>
30.785 - <span class="glyphicon-class">glyphicon glyphicon-upload</span>
30.786 - </li>
30.787 - <li>
30.788 - <span class="glyphicon glyphicon-usd"></span>
30.789 - <span class="glyphicon-class">glyphicon glyphicon-usd</span>
30.790 - </li>
30.791 - <li>
30.792 - <span class="glyphicon glyphicon-user"></span>
30.793 - <span class="glyphicon-class">glyphicon glyphicon-user</span>
30.794 - </li>
30.795 - <li>
30.796 - <span class="glyphicon glyphicon-volume-down"></span>
30.797 - <span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
30.798 - </li>
30.799 - <li>
30.800 - <span class="glyphicon glyphicon-volume-off"></span>
30.801 - <span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
30.802 - </li>
30.803 - <li>
30.804 - <span class="glyphicon glyphicon-volume-up"></span>
30.805 - <span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
30.806 - </li>
30.807 - <li>
30.808 - <span class="glyphicon glyphicon-warning-sign"></span>
30.809 - <span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
30.810 - </li>
30.811 - <li>
30.812 - <span class="glyphicon glyphicon-wrench"></span>
30.813 - <span class="glyphicon-class">glyphicon glyphicon-wrench</span>
30.814 - </li>
30.815 - <li>
30.816 - <span class="glyphicon glyphicon-zoom-in"></span>
30.817 - <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
30.818 - </li>
30.819 - <li>
30.820 - <span class="glyphicon glyphicon-zoom-out"></span>
30.821 - <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
30.822 - </li>
30.823 - </ul>
30.824 -
30.825 -
30.826 - <h2 id="glyphicons-how-to-use">How to use</h2>
30.827 - <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
30.828 - <div class="bs-callout bs-callout-danger">
30.829 - <h4>Don't mix with other components</h4>
30.830 - <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
30.831 - </div>
30.832 -{% highlight html %}
30.833 -<span class="glyphicon glyphicon-search"></span>
30.834 -{% endhighlight %}
30.835 -
30.836 -
30.837 - <h2 id="glyphicons-examples">Examples</h2>
30.838 - <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
30.839 - <div class="bs-example">
30.840 - <div class="btn-toolbar" role="toolbar">
30.841 - <div class="btn-group">
30.842 - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
30.843 - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
30.844 - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
30.845 - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
30.846 - </div>
30.847 - </div>
30.848 - <div class="btn-toolbar" role="toolbar">
30.849 - <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
30.850 - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
30.851 - <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
30.852 - <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
30.853 - </div>
30.854 - </div>
30.855 -{% highlight html %}
30.856 -<button type="button" class="btn btn-default btn-lg">
30.857 - <span class="glyphicon glyphicon-star"></span> Star
30.858 -</button>
30.859 -{% endhighlight %}
30.860 -
30.861 - </div>
30.862 -
30.863 -
30.864 - <!-- Dropdowns
30.865 - ================================================== -->
30.866 - <div class="bs-docs-section">
30.867 - <div class="page-header">
30.868 - <h1 id="dropdowns">Dropdowns</h1>
30.869 - </div>
30.870 - <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
30.871 -
30.872 - <h3 id="dropdowns-example">Example</h3>
30.873 - <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
30.874 - <div class="bs-example">
30.875 - <div class="dropdown clearfix">
30.876 - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
30.877 - Dropdown
30.878 - <span class="caret"></span>
30.879 - </button>
30.880 - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
30.881 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
30.882 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
30.883 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
30.884 - <li role="presentation" class="divider"></li>
30.885 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
30.886 - </ul>
30.887 - </div>
30.888 - </div><!-- /example -->
30.889 -{% highlight html %}
30.890 -<div class="dropdown">
30.891 - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
30.892 - Dropdown
30.893 - <span class="caret"></span>
30.894 - </button>
30.895 - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
30.896 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
30.897 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
30.898 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
30.899 - <li role="presentation" class="divider"></li>
30.900 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
30.901 - </ul>
30.902 -</div>
30.903 -{% endhighlight %}
30.904 -
30.905 - <h3 id="dropdowns-alignment">Alignment options</h3>
30.906 - <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
30.907 -{% highlight html %}
30.908 -<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
30.909 - ...
30.910 -</ul>
30.911 -{% endhighlight %}
30.912 -
30.913 - <h3 id="dropdowns-headers">Headers</h3>
30.914 - <p>Add a header to label sections of actions in any dropdown menu.</p>
30.915 - <div class="bs-example">
30.916 - <div class="dropdown clearfix">
30.917 - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
30.918 - Dropdown
30.919 - <span class="caret"></span>
30.920 - </button>
30.921 - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
30.922 - <li role="presentation" class="dropdown-header">Dropdown header</li>
30.923 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
30.924 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
30.925 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
30.926 - <li role="presentation" class="divider"></li>
30.927 - <li role="presentation" class="dropdown-header">Dropdown header</li>
30.928 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
30.929 - </ul>
30.930 - </div>
30.931 - </div><!-- /example -->
30.932 -{% highlight html %}
30.933 -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
30.934 - <li role="presentation" class="dropdown-header">Dropdown header</li>
30.935 - ...
30.936 - <li role="presentation" class="divider"></li>
30.937 - <li role="presentation" class="dropdown-header">Dropdown header</li>
30.938 - ...
30.939 -</ul>
30.940 -{% endhighlight %}
30.941 -
30.942 - <h3 id="dropdowns-disabled">Disabled menu items</h3>
30.943 - <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
30.944 - <div class="bs-example">
30.945 - <div class="dropdown clearfix">
30.946 - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown">
30.947 - Dropdown
30.948 - <span class="caret"></span>
30.949 - </button>
30.950 - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
30.951 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
30.952 - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
30.953 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
30.954 - </ul>
30.955 - </div>
30.956 - </div><!-- /example -->
30.957 -{% highlight html %}
30.958 -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
30.959 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
30.960 - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
30.961 - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
30.962 -</ul>
30.963 -{% endhighlight %}
30.964 - </div>
30.965 -
30.966 -
30.967 -
30.968 - <!-- Button Groups
30.969 - ================================================== -->
30.970 - <div class="bs-docs-section">
30.971 - <div class="page-header">
30.972 - <h1 id="btn-groups">Button groups</h1>
30.973 - </div>
30.974 - <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
30.975 -
30.976 - <div class="bs-callout bs-callout-info">
30.977 - <h4>Tooltips & popovers in button groups require special setting</h4>
30.978 - <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
30.979 - </div>
30.980 -
30.981 - <h3 id="btn-groups-single">Basic example</h3>
30.982 - <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
30.983 - <div class="bs-example">
30.984 - <div class="btn-group" style="margin: 9px 0 5px;">
30.985 - <button type="button" class="btn btn-default">Left</button>
30.986 - <button type="button" class="btn btn-default">Middle</button>
30.987 - <button type="button" class="btn btn-default">Right</button>
30.988 - </div>
30.989 - </div>
30.990 -{% highlight html %}
30.991 -<div class="btn-group">
30.992 - <button type="button" class="btn btn-default">Left</button>
30.993 - <button type="button" class="btn btn-default">Middle</button>
30.994 - <button type="button" class="btn btn-default">Right</button>
30.995 -</div>
30.996 -{% endhighlight %}
30.997 -
30.998 - <h3 id="btn-groups-toolbar">Button toolbar</h3>
30.999 - <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
30.1000 - <div class="bs-example">
30.1001 - <div class="btn-toolbar" role="toolbar" style="margin: 0;">
30.1002 - <div class="btn-group">
30.1003 - <button type="button" class="btn btn-default">1</button>
30.1004 - <button type="button" class="btn btn-default">2</button>
30.1005 - <button type="button" class="btn btn-default">3</button>
30.1006 - <button type="button" class="btn btn-default">4</button>
30.1007 - </div>
30.1008 - <div class="btn-group">
30.1009 - <button type="button" class="btn btn-default">5</button>
30.1010 - <button type="button" class="btn btn-default">6</button>
30.1011 - <button type="button" class="btn btn-default">7</button>
30.1012 - </div>
30.1013 - <div class="btn-group">
30.1014 - <button type="button" class="btn btn-default">8</button>
30.1015 - </div>
30.1016 - </div>
30.1017 - </div>
30.1018 -{% highlight html %}
30.1019 -<div class="btn-toolbar" role="toolbar">
30.1020 - <div class="btn-group">...</div>
30.1021 - <div class="btn-group">...</div>
30.1022 - <div class="btn-group">...</div>
30.1023 -</div>
30.1024 -{% endhighlight %}
30.1025 -
30.1026 - <h3 id="btn-groups-sizing">Sizing</h3>
30.1027 - <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
30.1028 - <div class="bs-example">
30.1029 - <div class="btn-toolbar" role="toolbar">
30.1030 - <div class="btn-group btn-group-lg">
30.1031 - <button type="button" class="btn btn-default">Left</button>
30.1032 - <button type="button" class="btn btn-default">Middle</button>
30.1033 - <button type="button" class="btn btn-default">Right</button>
30.1034 - </div>
30.1035 - </div>
30.1036 - <div class="btn-toolbar" role="toolbar">
30.1037 - <div class="btn-group">
30.1038 - <button type="button" class="btn btn-default">Left</button>
30.1039 - <button type="button" class="btn btn-default">Middle</button>
30.1040 - <button type="button" class="btn btn-default">Right</button>
30.1041 - </div>
30.1042 - </div>
30.1043 - <div class="btn-toolbar" role="toolbar">
30.1044 - <div class="btn-group btn-group-sm">
30.1045 - <button type="button" class="btn btn-default">Left</button>
30.1046 - <button type="button" class="btn btn-default">Middle</button>
30.1047 - <button type="button" class="btn btn-default">Right</button>
30.1048 - </div>
30.1049 - </div>
30.1050 - <div class="btn-toolbar" role="toolbar">
30.1051 - <div class="btn-group btn-group-xs">
30.1052 - <button type="button" class="btn btn-default">Left</button>
30.1053 - <button type="button" class="btn btn-default">Middle</button>
30.1054 - <button type="button" class="btn btn-default">Right</button>
30.1055 - </div>
30.1056 - </div>
30.1057 - </div>
30.1058 -{% highlight html %}
30.1059 -<div class="btn-group btn-group-lg">...</div>
30.1060 -<div class="btn-group">...</div>
30.1061 -<div class="btn-group btn-group-sm">...</div>
30.1062 -<div class="btn-group btn-group-xs">...</div>
30.1063 -{% endhighlight %}
30.1064 -
30.1065 - <h3 id="btn-groups-nested">Nesting</h3>
30.1066 - <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
30.1067 - <div class="bs-example">
30.1068 - <div class="btn-group">
30.1069 - <button type="button" class="btn btn-default">1</button>
30.1070 - <button type="button" class="btn btn-default">2</button>
30.1071 -
30.1072 - <div class="btn-group">
30.1073 - <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1074 - Dropdown
30.1075 - <span class="caret"></span>
30.1076 - </button>
30.1077 - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
30.1078 - <li><a href="#">Dropdown link</a></li>
30.1079 - <li><a href="#">Dropdown link</a></li>
30.1080 - </ul>
30.1081 - </div>
30.1082 - </div>
30.1083 - </div>
30.1084 -{% highlight html %}
30.1085 -<div class="btn-group">
30.1086 - <button type="button" class="btn btn-default">1</button>
30.1087 - <button type="button" class="btn btn-default">2</button>
30.1088 -
30.1089 - <div class="btn-group">
30.1090 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1091 - Dropdown
30.1092 - <span class="caret"></span>
30.1093 - </button>
30.1094 - <ul class="dropdown-menu">
30.1095 - <li><a href="#">Dropdown link</a></li>
30.1096 - <li><a href="#">Dropdown link</a></li>
30.1097 - </ul>
30.1098 - </div>
30.1099 -</div>
30.1100 -{% endhighlight %}
30.1101 -
30.1102 - <h3 id="btn-groups-vertical">Vertical variation</h3>
30.1103 - <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
30.1104 - <div class="bs-example">
30.1105 - <div class="btn-group-vertical">
30.1106 - <button type="button" class="btn btn-default">Button</button>
30.1107 - <button type="button" class="btn btn-default">Button</button>
30.1108 - <div class="btn-group">
30.1109 - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1110 - Dropdown
30.1111 - <span class="caret"></span>
30.1112 - </button>
30.1113 - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
30.1114 - <li><a href="#">Dropdown link</a></li>
30.1115 - <li><a href="#">Dropdown link</a></li>
30.1116 - </ul>
30.1117 - </div>
30.1118 - <button type="button" class="btn btn-default">Button</button>
30.1119 - <button type="button" class="btn btn-default">Button</button>
30.1120 - <div class="btn-group">
30.1121 - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1122 - Dropdown
30.1123 - <span class="caret"></span>
30.1124 - </button>
30.1125 - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
30.1126 - <li><a href="#">Dropdown link</a></li>
30.1127 - <li><a href="#">Dropdown link</a></li>
30.1128 - </ul>
30.1129 - </div>
30.1130 - <div class="btn-group">
30.1131 - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1132 - Dropdown
30.1133 - <span class="caret"></span>
30.1134 - </button>
30.1135 - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
30.1136 - <li><a href="#">Dropdown link</a></li>
30.1137 - <li><a href="#">Dropdown link</a></li>
30.1138 - </ul>
30.1139 - </div>
30.1140 - <div class="btn-group">
30.1141 - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1142 - Dropdown
30.1143 - <span class="caret"></span>
30.1144 - </button>
30.1145 - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
30.1146 - <li><a href="#">Dropdown link</a></li>
30.1147 - <li><a href="#">Dropdown link</a></li>
30.1148 - </ul>
30.1149 - </div>
30.1150 - </div>
30.1151 - </div>
30.1152 -{% highlight html %}
30.1153 -<div class="btn-group-vertical">
30.1154 - ...
30.1155 -</div>
30.1156 -{% endhighlight %}
30.1157 -
30.1158 - <h3 id="btn-groups-justified">Justified link variation</h3>
30.1159 - <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
30.1160 -
30.1161 - <div class="bs-callout bs-callout-warning">
30.1162 - <h4>Element-specific usage</h4>
30.1163 - <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>
30.1164 - </div>
30.1165 -
30.1166 - <div class="bs-example">
30.1167 - <div class="btn-group btn-group-justified">
30.1168 - <a class="btn btn-default" role="button">Left</a>
30.1169 - <a class="btn btn-default" role="button">Middle</a>
30.1170 - <a class="btn btn-default" role="button">Right</a>
30.1171 - </div>
30.1172 - <br>
30.1173 - <div class="btn-group btn-group-justified">
30.1174 - <a class="btn btn-default" role="button">Left</a>
30.1175 - <a class="btn btn-default" role="button">Middle</a>
30.1176 - <div class="btn-group">
30.1177 - <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1178 - Right dropdown <span class="caret"></span>
30.1179 - </a>
30.1180 - <ul class="dropdown-menu" role="menu">
30.1181 - <li><a href="#">Action</a></li>
30.1182 - <li><a href="#">Another action</a></li>
30.1183 - <li><a href="#">Something else here</a></li>
30.1184 - <li class="divider"></li>
30.1185 - <li><a href="#">Separated link</a></li>
30.1186 - </ul>
30.1187 - </div>
30.1188 - </div>
30.1189 - </div>
30.1190 -{% highlight html %}
30.1191 -<div class="btn-group btn-group-justified">
30.1192 - ...
30.1193 -</div>
30.1194 -{% endhighlight %}
30.1195 -
30.1196 - </div>
30.1197 -
30.1198 -
30.1199 -
30.1200 - <!-- Split button dropdowns
30.1201 - ================================================== -->
30.1202 - <div class="bs-docs-section">
30.1203 - <div class="page-header">
30.1204 - <h1 id="btn-dropdowns">Button dropdowns</h1>
30.1205 - </div>
30.1206 - <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
30.1207 -
30.1208 - <div class="bs-callout bs-callout-danger">
30.1209 - <h4>Plugin dependency</h4>
30.1210 - <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
30.1211 - </div>
30.1212 -
30.1213 - <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
30.1214 - <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
30.1215 - <div class="bs-example">
30.1216 - <div class="btn-group">
30.1217 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
30.1218 - <ul class="dropdown-menu" role="menu">
30.1219 - <li><a href="#">Action</a></li>
30.1220 - <li><a href="#">Another action</a></li>
30.1221 - <li><a href="#">Something else here</a></li>
30.1222 - <li class="divider"></li>
30.1223 - <li><a href="#">Separated link</a></li>
30.1224 - </ul>
30.1225 - </div><!-- /btn-group -->
30.1226 - <div class="btn-group">
30.1227 - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
30.1228 - <ul class="dropdown-menu" role="menu">
30.1229 - <li><a href="#">Action</a></li>
30.1230 - <li><a href="#">Another action</a></li>
30.1231 - <li><a href="#">Something else here</a></li>
30.1232 - <li class="divider"></li>
30.1233 - <li><a href="#">Separated link</a></li>
30.1234 - </ul>
30.1235 - </div><!-- /btn-group -->
30.1236 - <div class="btn-group">
30.1237 - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
30.1238 - <ul class="dropdown-menu" role="menu">
30.1239 - <li><a href="#">Action</a></li>
30.1240 - <li><a href="#">Another action</a></li>
30.1241 - <li><a href="#">Something else here</a></li>
30.1242 - <li class="divider"></li>
30.1243 - <li><a href="#">Separated link</a></li>
30.1244 - </ul>
30.1245 - </div><!-- /btn-group -->
30.1246 - <div class="btn-group">
30.1247 - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
30.1248 - <ul class="dropdown-menu" role="menu">
30.1249 - <li><a href="#">Action</a></li>
30.1250 - <li><a href="#">Another action</a></li>
30.1251 - <li><a href="#">Something else here</a></li>
30.1252 - <li class="divider"></li>
30.1253 - <li><a href="#">Separated link</a></li>
30.1254 - </ul>
30.1255 - </div><!-- /btn-group -->
30.1256 - <div class="btn-group">
30.1257 - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
30.1258 - <ul class="dropdown-menu" role="menu">
30.1259 - <li><a href="#">Action</a></li>
30.1260 - <li><a href="#">Another action</a></li>
30.1261 - <li><a href="#">Something else here</a></li>
30.1262 - <li class="divider"></li>
30.1263 - <li><a href="#">Separated link</a></li>
30.1264 - </ul>
30.1265 - </div><!-- /btn-group -->
30.1266 - <div class="btn-group">
30.1267 - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
30.1268 - <ul class="dropdown-menu" role="menu">
30.1269 - <li><a href="#">Action</a></li>
30.1270 - <li><a href="#">Another action</a></li>
30.1271 - <li><a href="#">Something else here</a></li>
30.1272 - <li class="divider"></li>
30.1273 - <li><a href="#">Separated link</a></li>
30.1274 - </ul>
30.1275 - </div><!-- /btn-group -->
30.1276 - </div>
30.1277 -{% highlight html %}
30.1278 -<!-- Single button -->
30.1279 -<div class="btn-group">
30.1280 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1281 - Action <span class="caret"></span>
30.1282 - </button>
30.1283 - <ul class="dropdown-menu" role="menu">
30.1284 - <li><a href="#">Action</a></li>
30.1285 - <li><a href="#">Another action</a></li>
30.1286 - <li><a href="#">Something else here</a></li>
30.1287 - <li class="divider"></li>
30.1288 - <li><a href="#">Separated link</a></li>
30.1289 - </ul>
30.1290 -</div>
30.1291 -{% endhighlight %}
30.1292 -
30.1293 - <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
30.1294 - <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
30.1295 - <div class="bs-example">
30.1296 - <div class="btn-group">
30.1297 - <button type="button" class="btn btn-default">Default</button>
30.1298 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1299 - <span class="caret"></span>
30.1300 - <span class="sr-only">Toggle Dropdown</span>
30.1301 - </button>
30.1302 - <ul class="dropdown-menu" role="menu">
30.1303 - <li><a href="#">Action</a></li>
30.1304 - <li><a href="#">Another action</a></li>
30.1305 - <li><a href="#">Something else here</a></li>
30.1306 - <li class="divider"></li>
30.1307 - <li><a href="#">Separated link</a></li>
30.1308 - </ul>
30.1309 - </div><!-- /btn-group -->
30.1310 - <div class="btn-group">
30.1311 - <button type="button" class="btn btn-primary">Primary</button>
30.1312 - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
30.1313 - <span class="caret"></span>
30.1314 - <span class="sr-only">Toggle Dropdown</span>
30.1315 - </button>
30.1316 - <ul class="dropdown-menu" role="menu">
30.1317 - <li><a href="#">Action</a></li>
30.1318 - <li><a href="#">Another action</a></li>
30.1319 - <li><a href="#">Something else here</a></li>
30.1320 - <li class="divider"></li>
30.1321 - <li><a href="#">Separated link</a></li>
30.1322 - </ul>
30.1323 - </div><!-- /btn-group -->
30.1324 - <div class="btn-group">
30.1325 - <button type="button" class="btn btn-success">Success</button>
30.1326 - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
30.1327 - <span class="caret"></span>
30.1328 - <span class="sr-only">Toggle Dropdown</span>
30.1329 - </button>
30.1330 - <ul class="dropdown-menu" role="menu">
30.1331 - <li><a href="#">Action</a></li>
30.1332 - <li><a href="#">Another action</a></li>
30.1333 - <li><a href="#">Something else here</a></li>
30.1334 - <li class="divider"></li>
30.1335 - <li><a href="#">Separated link</a></li>
30.1336 - </ul>
30.1337 - </div><!-- /btn-group -->
30.1338 - <div class="btn-group">
30.1339 - <button type="button" class="btn btn-info">Info</button>
30.1340 - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
30.1341 - <span class="caret"></span>
30.1342 - <span class="sr-only">Toggle Dropdown</span>
30.1343 - </button>
30.1344 - <ul class="dropdown-menu" role="menu">
30.1345 - <li><a href="#">Action</a></li>
30.1346 - <li><a href="#">Another action</a></li>
30.1347 - <li><a href="#">Something else here</a></li>
30.1348 - <li class="divider"></li>
30.1349 - <li><a href="#">Separated link</a></li>
30.1350 - </ul>
30.1351 - </div><!-- /btn-group -->
30.1352 - <div class="btn-group">
30.1353 - <button type="button" class="btn btn-warning">Warning</button>
30.1354 - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
30.1355 - <span class="caret"></span>
30.1356 - <span class="sr-only">Toggle Dropdown</span>
30.1357 - </button>
30.1358 - <ul class="dropdown-menu" role="menu">
30.1359 - <li><a href="#">Action</a></li>
30.1360 - <li><a href="#">Another action</a></li>
30.1361 - <li><a href="#">Something else here</a></li>
30.1362 - <li class="divider"></li>
30.1363 - <li><a href="#">Separated link</a></li>
30.1364 - </ul>
30.1365 - </div><!-- /btn-group -->
30.1366 - <div class="btn-group">
30.1367 - <button type="button" class="btn btn-danger">Danger</button>
30.1368 - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
30.1369 - <span class="caret"></span>
30.1370 - <span class="sr-only">Toggle Dropdown</span>
30.1371 - </button>
30.1372 - <ul class="dropdown-menu" role="menu">
30.1373 - <li><a href="#">Action</a></li>
30.1374 - <li><a href="#">Another action</a></li>
30.1375 - <li><a href="#">Something else here</a></li>
30.1376 - <li class="divider"></li>
30.1377 - <li><a href="#">Separated link</a></li>
30.1378 - </ul>
30.1379 - </div><!-- /btn-group -->
30.1380 - </div>
30.1381 -{% highlight html %}
30.1382 -<!-- Split button -->
30.1383 -<div class="btn-group">
30.1384 - <button type="button" class="btn btn-danger">Action</button>
30.1385 - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
30.1386 - <span class="caret"></span>
30.1387 - <span class="sr-only">Toggle Dropdown</span>
30.1388 - </button>
30.1389 - <ul class="dropdown-menu" role="menu">
30.1390 - <li><a href="#">Action</a></li>
30.1391 - <li><a href="#">Another action</a></li>
30.1392 - <li><a href="#">Something else here</a></li>
30.1393 - <li class="divider"></li>
30.1394 - <li><a href="#">Separated link</a></li>
30.1395 - </ul>
30.1396 -</div>
30.1397 -{% endhighlight %}
30.1398 -
30.1399 - <h3 id="btn-dropdowns-sizing">Sizing</h3>
30.1400 - <p>Button dropdowns work with buttons of all sizes.</p>
30.1401 - <div class="bs-example">
30.1402 - <div class="btn-toolbar" role="toolbar">
30.1403 - <div class="btn-group">
30.1404 - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
30.1405 - Large button <span class="caret"></span>
30.1406 - </button>
30.1407 - <ul class="dropdown-menu" role="menu">
30.1408 - <li><a href="#">Action</a></li>
30.1409 - <li><a href="#">Another action</a></li>
30.1410 - <li><a href="#">Something else here</a></li>
30.1411 - <li class="divider"></li>
30.1412 - <li><a href="#">Separated link</a></li>
30.1413 - </ul>
30.1414 - </div><!-- /btn-group -->
30.1415 - </div><!-- /btn-toolbar -->
30.1416 - <div class="btn-toolbar" role="toolbar">
30.1417 - <div class="btn-group">
30.1418 - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
30.1419 - Small button <span class="caret"></span>
30.1420 - </button>
30.1421 - <ul class="dropdown-menu" role="menu">
30.1422 - <li><a href="#">Action</a></li>
30.1423 - <li><a href="#">Another action</a></li>
30.1424 - <li><a href="#">Something else here</a></li>
30.1425 - <li class="divider"></li>
30.1426 - <li><a href="#">Separated link</a></li>
30.1427 - </ul>
30.1428 - </div><!-- /btn-group -->
30.1429 - </div><!-- /btn-toolbar -->
30.1430 - <div class="btn-toolbar" role="toolbar">
30.1431 - <div class="btn-group">
30.1432 - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
30.1433 - Extra small button <span class="caret"></span>
30.1434 - </button>
30.1435 - <ul class="dropdown-menu" role="menu">
30.1436 - <li><a href="#">Action</a></li>
30.1437 - <li><a href="#">Another action</a></li>
30.1438 - <li><a href="#">Something else here</a></li>
30.1439 - <li class="divider"></li>
30.1440 - <li><a href="#">Separated link</a></li>
30.1441 - </ul>
30.1442 - </div><!-- /btn-group -->
30.1443 - </div><!-- /btn-toolbar -->
30.1444 - </div><!-- /example -->
30.1445 -{% highlight html %}
30.1446 -<!-- Large button group -->
30.1447 -<div class="btn-group">
30.1448 - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
30.1449 - Large button <span class="caret"></span>
30.1450 - </button>
30.1451 - <ul class="dropdown-menu">
30.1452 - ...
30.1453 - </ul>
30.1454 -</div>
30.1455 -
30.1456 -<!-- Small button group -->
30.1457 -<div class="btn-group">
30.1458 - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
30.1459 - Small button <span class="caret"></span>
30.1460 - </button>
30.1461 - <ul class="dropdown-menu">
30.1462 - ...
30.1463 - </ul>
30.1464 -</div>
30.1465 -
30.1466 -<!-- Extra small button group -->
30.1467 -<div class="btn-group">
30.1468 - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
30.1469 - Extra small button <span class="caret"></span>
30.1470 - </button>
30.1471 - <ul class="dropdown-menu">
30.1472 - ...
30.1473 - </ul>
30.1474 -</div>
30.1475 -{% endhighlight %}
30.1476 -
30.1477 - <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
30.1478 - <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
30.1479 - <div class="bs-example">
30.1480 - <div class="btn-toolbar" role="toolbar">
30.1481 - <div class="btn-group dropup">
30.1482 - <button type="button" class="btn btn-default">Dropup</button>
30.1483 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1484 - <span class="caret"></span>
30.1485 - <span class="sr-only">Toggle Dropdown</span>
30.1486 - </button>
30.1487 - <ul class="dropdown-menu" role="menu">
30.1488 - <li><a href="#">Action</a></li>
30.1489 - <li><a href="#">Another action</a></li>
30.1490 - <li><a href="#">Something else here</a></li>
30.1491 - <li class="divider"></li>
30.1492 - <li><a href="#">Separated link</a></li>
30.1493 - </ul>
30.1494 - </div><!-- /btn-group -->
30.1495 - <div class="btn-group dropup">
30.1496 - <button type="button" class="btn btn-primary">Right dropup</button>
30.1497 - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
30.1498 - <span class="caret"></span>
30.1499 - <span class="sr-only">Toggle Dropdown</span>
30.1500 - </button>
30.1501 - <ul class="dropdown-menu pull-right" role="menu">
30.1502 - <li><a href="#">Action</a></li>
30.1503 - <li><a href="#">Another action</a></li>
30.1504 - <li><a href="#">Something else here</a></li>
30.1505 - <li class="divider"></li>
30.1506 - <li><a href="#">Separated link</a></li>
30.1507 - </ul>
30.1508 - </div><!-- /btn-group -->
30.1509 - </div>
30.1510 - </div><!-- /example -->
30.1511 -{% highlight html %}
30.1512 -<div class="btn-group dropup">
30.1513 - <button type="button" class="btn btn-default">Dropup</button>
30.1514 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
30.1515 - <span class="caret"></span>
30.1516 - <span class="sr-only">Toggle Dropdown</span>
30.1517 - </button>
30.1518 - <ul class="dropdown-menu">
30.1519 - <!-- Dropdown menu links -->
30.1520 - </ul>
30.1521 -</div>
30.1522 -{% endhighlight %}
30.1523 -
30.1524 - </div>
30.1525 -
30.1526 -
30.1527 -
30.1528 -
30.1529 - <!-- Input groups
30.1530 - ================================================== -->
30.1531 - <div class="bs-docs-section">
30.1532 - <div class="page-header">
30.1533 - <h1 id="input-groups">Input groups</h1>
30.1534 - </div>
30.1535 - <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a <code>.form-control</code>.</p>
30.1536 -
30.1537 - <div class="bs-callout bs-callout-danger">
30.1538 - <h4>Cross-browser compatibility</h4>
30.1539 - <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
30.1540 - </div>
30.1541 - <div class="bs-callout bs-callout-info">
30.1542 - <h4>Tooltips & popovers in input groups require special setting</h4>
30.1543 - <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
30.1544 - </div>
30.1545 - <div class="bs-callout bs-callout-info">
30.1546 - <h4>Don't mix with form groups</h4>
30.1547 - <p>Do not apply input group classes directly to form groups. An input group is an isolated component.</p>
30.1548 - </div>
30.1549 -
30.1550 -
30.1551 - <h2 id="input-groups-basic">Basic example</h2>
30.1552 - <form class="bs-example bs-example-form" role="form">
30.1553 - <div class="input-group">
30.1554 - <span class="input-group-addon">@</span>
30.1555 - <input type="text" class="form-control" placeholder="Username">
30.1556 - </div>
30.1557 - <br>
30.1558 - <div class="input-group">
30.1559 - <input type="text" class="form-control">
30.1560 - <span class="input-group-addon">.00</span>
30.1561 - </div>
30.1562 - <br>
30.1563 - <div class="input-group">
30.1564 - <span class="input-group-addon">$</span>
30.1565 - <input type="text" class="form-control">
30.1566 - <span class="input-group-addon">.00</span>
30.1567 - </div>
30.1568 - </form>
30.1569 -{% highlight html %}
30.1570 -<div class="input-group">
30.1571 - <span class="input-group-addon">@</span>
30.1572 - <input type="text" class="form-control" placeholder="Username">
30.1573 -</div>
30.1574 -
30.1575 -<div class="input-group">
30.1576 - <input type="text" class="form-control">
30.1577 - <span class="input-group-addon">.00</span>
30.1578 -</div>
30.1579 -
30.1580 -<div class="input-group">
30.1581 - <span class="input-group-addon">$</span>
30.1582 - <input type="text" class="form-control">
30.1583 - <span class="input-group-addon">.00</span>
30.1584 -</div>
30.1585 -{% endhighlight %}
30.1586 -
30.1587 -
30.1588 - <h2 id="input-groups-sizing">Sizing</h2>
30.1589 - <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
30.1590 - <form class="bs-example bs-example-form" role="form">
30.1591 - <div class="input-group input-group-lg">
30.1592 - <span class="input-group-addon">@</span>
30.1593 - <input type="text" class="form-control" placeholder="Username">
30.1594 - </div>
30.1595 - <br>
30.1596 - <div class="input-group">
30.1597 - <span class="input-group-addon">@</span>
30.1598 - <input type="text" class="form-control" placeholder="Username">
30.1599 - </div>
30.1600 - <br>
30.1601 - <div class="input-group input-group-sm">
30.1602 - <span class="input-group-addon">@</span>
30.1603 - <input type="text" class="form-control" placeholder="Username">
30.1604 - </div>
30.1605 - </form>
30.1606 -{% highlight html %}
30.1607 -<div class="input-group input-group-lg">
30.1608 - <span class="input-group-addon">@</span>
30.1609 - <input type="text" class="form-control" placeholder="Username">
30.1610 -</div>
30.1611 -
30.1612 -<div class="input-group">
30.1613 - <span class="input-group-addon">@</span>
30.1614 - <input type="text" class="form-control" placeholder="Username">
30.1615 -</div>
30.1616 -
30.1617 -<div class="input-group input-group-sm">
30.1618 - <span class="input-group-addon">@</span>
30.1619 - <input type="text" class="form-control" placeholder="Username">
30.1620 -</div>
30.1621 -{% endhighlight %}
30.1622 -
30.1623 -
30.1624 - <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
30.1625 - <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
30.1626 - <form class="bs-example bs-example-form">
30.1627 - <div class="row">
30.1628 - <div class="col-lg-6">
30.1629 - <div class="input-group">
30.1630 - <span class="input-group-addon">
30.1631 - <input type="checkbox">
30.1632 - </span>
30.1633 - <input type="text" class="form-control">
30.1634 - </div><!-- /input-group -->
30.1635 - </div><!-- /.col-lg-6 -->
30.1636 - <div class="col-lg-6">
30.1637 - <div class="input-group">
30.1638 - <span class="input-group-addon">
30.1639 - <input type="radio">
30.1640 - </span>
30.1641 - <input type="text" class="form-control">
30.1642 - </div><!-- /input-group -->
30.1643 - </div><!-- /.col-lg-6 -->
30.1644 - </div><!-- /.row -->
30.1645 - </form>
30.1646 -{% highlight html %}
30.1647 -<div class="row">
30.1648 - <div class="col-lg-6">
30.1649 - <div class="input-group">
30.1650 - <span class="input-group-addon">
30.1651 - <input type="checkbox">
30.1652 - </span>
30.1653 - <input type="text" class="form-control">
30.1654 - </div><!-- /input-group -->
30.1655 - </div><!-- /.col-lg-6 -->
30.1656 - <div class="col-lg-6">
30.1657 - <div class="input-group">
30.1658 - <span class="input-group-addon">
30.1659 - <input type="radio">
30.1660 - </span>
30.1661 - <input type="text" class="form-control">
30.1662 - </div><!-- /input-group -->
30.1663 - </div><!-- /.col-lg-6 -->
30.1664 -</div><!-- /.row -->
30.1665 -{% endhighlight %}
30.1666 -
30.1667 -
30.1668 - <h2 id="input-groups-buttons">Button addons</h2>
30.1669 - <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
30.1670 - <form class="bs-example bs-example-form">
30.1671 - <div class="row">
30.1672 - <div class="col-lg-6">
30.1673 - <div class="input-group">
30.1674 - <span class="input-group-btn">
30.1675 - <button class="btn btn-default" type="button">Go!</button>
30.1676 - </span>
30.1677 - <input type="text" class="form-control">
30.1678 - </div><!-- /input-group -->
30.1679 - </div><!-- /.col-lg-6 -->
30.1680 - <div class="col-lg-6">
30.1681 - <div class="input-group">
30.1682 - <input type="text" class="form-control">
30.1683 - <span class="input-group-btn">
30.1684 - <button class="btn btn-default" type="button">Go!</button>
30.1685 - </span>
30.1686 - </div><!-- /input-group -->
30.1687 - </div><!-- /.col-lg-6 -->
30.1688 - </div><!-- /.row -->
30.1689 - </form>
30.1690 -{% highlight html %}
30.1691 -<div class="row">
30.1692 - <div class="col-lg-6">
30.1693 - <div class="input-group">
30.1694 - <span class="input-group-btn">
30.1695 - <button class="btn btn-default" type="button">Go!</button>
30.1696 - </span>
30.1697 - <input type="text" class="form-control">
30.1698 - </div><!-- /input-group -->
30.1699 - </div><!-- /.col-lg-6 -->
30.1700 - <div class="col-lg-6">
30.1701 - <div class="input-group">
30.1702 - <input type="text" class="form-control">
30.1703 - <span class="input-group-btn">
30.1704 - <button class="btn btn-default" type="button">Go!</button>
30.1705 - </span>
30.1706 - </div><!-- /input-group -->
30.1707 - </div><!-- /.col-lg-6 -->
30.1708 -</div><!-- /.row -->
30.1709 -{% endhighlight %}
30.1710 -
30.1711 - <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
30.1712 - <p></p>
30.1713 - <form class="bs-example bs-example-form" role="form">
30.1714 - <div class="row">
30.1715 - <div class="col-lg-6">
30.1716 - <div class="input-group">
30.1717 - <div class="input-group-btn">
30.1718 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
30.1719 - <ul class="dropdown-menu" role="menu">
30.1720 - <li><a href="#">Action</a></li>
30.1721 - <li><a href="#">Another action</a></li>
30.1722 - <li><a href="#">Something else here</a></li>
30.1723 - <li class="divider"></li>
30.1724 - <li><a href="#">Separated link</a></li>
30.1725 - </ul>
30.1726 - </div><!-- /btn-group -->
30.1727 - <input type="text" class="form-control">
30.1728 - </div><!-- /input-group -->
30.1729 - </div><!-- /.col-lg-6 -->
30.1730 - <div class="col-lg-6">
30.1731 - <div class="input-group">
30.1732 - <input type="text" class="form-control">
30.1733 - <div class="input-group-btn">
30.1734 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
30.1735 - <ul class="dropdown-menu pull-right" role="menu">
30.1736 - <li><a href="#">Action</a></li>
30.1737 - <li><a href="#">Another action</a></li>
30.1738 - <li><a href="#">Something else here</a></li>
30.1739 - <li class="divider"></li>
30.1740 - <li><a href="#">Separated link</a></li>
30.1741 - </ul>
30.1742 - </div><!-- /btn-group -->
30.1743 - </div><!-- /input-group -->
30.1744 - </div><!-- /.col-lg-6 -->
30.1745 - </div><!-- /.row -->
30.1746 - </form>
30.1747 -{% highlight html %}
30.1748 -<div class="row">
30.1749 - <div class="col-lg-6">
30.1750 - <div class="input-group">
30.1751 - <div class="input-group-btn">
30.1752 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
30.1753 - <ul class="dropdown-menu">
30.1754 - <li><a href="#">Action</a></li>
30.1755 - <li><a href="#">Another action</a></li>
30.1756 - <li><a href="#">Something else here</a></li>
30.1757 - <li class="divider"></li>
30.1758 - <li><a href="#">Separated link</a></li>
30.1759 - </ul>
30.1760 - </div><!-- /btn-group -->
30.1761 - <input type="text" class="form-control">
30.1762 - </div><!-- /input-group -->
30.1763 - </div><!-- /.col-lg-6 -->
30.1764 - <div class="col-lg-6">
30.1765 - <div class="input-group">
30.1766 - <input type="text" class="form-control">
30.1767 - <div class="input-group-btn">
30.1768 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
30.1769 - <ul class="dropdown-menu pull-right">
30.1770 - <li><a href="#">Action</a></li>
30.1771 - <li><a href="#">Another action</a></li>
30.1772 - <li><a href="#">Something else here</a></li>
30.1773 - <li class="divider"></li>
30.1774 - <li><a href="#">Separated link</a></li>
30.1775 - </ul>
30.1776 - </div><!-- /btn-group -->
30.1777 - </div><!-- /input-group -->
30.1778 - </div><!-- /.col-lg-6 -->
30.1779 -</div><!-- /.row -->
30.1780 -{% endhighlight %}
30.1781 -
30.1782 - <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
30.1783 - <form class="bs-example bs-example-form" role="form">
30.1784 - <div class="row">
30.1785 - <div class="col-lg-6">
30.1786 - <div class="input-group">
30.1787 - <div class="input-group-btn">
30.1788 - <button type="button" class="btn btn-default" tabindex="-1">Action</button>
30.1789 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
30.1790 - <span class="caret"></span>
30.1791 - <span class="sr-only">Toggle Dropdown</span>
30.1792 - </button>
30.1793 - <ul class="dropdown-menu" role="menu">
30.1794 - <li><a href="#">Action</a></li>
30.1795 - <li><a href="#">Another action</a></li>
30.1796 - <li><a href="#">Something else here</a></li>
30.1797 - <li class="divider"></li>
30.1798 - <li><a href="#">Separated link</a></li>
30.1799 - </ul>
30.1800 - </div>
30.1801 - <input type="text" class="form-control">
30.1802 - </div><!-- /.input-group -->
30.1803 - </div><!-- /.col-lg-6 -->
30.1804 - <div class="col-lg-6">
30.1805 - <div class="input-group">
30.1806 - <input type="text" class="form-control">
30.1807 - <div class="input-group-btn">
30.1808 - <button type="button" class="btn btn-default" tabindex="-1">Action</button>
30.1809 - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
30.1810 - <span class="caret"></span>
30.1811 - <span class="sr-only">Toggle Dropdown</span>
30.1812 - </button>
30.1813 - <ul class="dropdown-menu pull-right" role="menu">
30.1814 - <li><a href="#">Action</a></li>
30.1815 - <li><a href="#">Another action</a></li>
30.1816 - <li><a href="#">Something else here</a></li>
30.1817 - <li class="divider"></li>
30.1818 - <li><a href="#">Separated link</a></li>
30.1819 - </ul>
30.1820 - </div>
30.1821 - </div><!-- /.input-group -->
30.1822 - </div><!-- /.col-lg-6 -->
30.1823 - </div><!-- /.row -->
30.1824 - </form>
30.1825 -{% highlight html %}
30.1826 -<div class="input-group">
30.1827 - <div class="input-group-btn">
30.1828 - <!-- Button and dropdown menu -->
30.1829 - </div>
30.1830 - <input type="text" class="form-control">
30.1831 -</div>
30.1832 -
30.1833 -<div class="input-group">
30.1834 - <input type="text" class="form-control">
30.1835 - <div class="input-group-btn">
30.1836 - <!-- Button and dropdown menu -->
30.1837 - </div>
30.1838 -</div>
30.1839 -{% endhighlight %}
30.1840 -
30.1841 -</div>
30.1842 -
30.1843 -
30.1844 -
30.1845 - <!-- Navs
30.1846 - ================================================== -->
30.1847 - <div class="bs-docs-section">
30.1848 - <div class="page-header">
30.1849 - <h1 id="nav">Navs</h1>
30.1850 - </div>
30.1851 -
30.1852 - <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
30.1853 -
30.1854 - <h2 id="nav-tabs">Tabs</h2>
30.1855 - <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
30.1856 - <div class="bs-example">
30.1857 - <ul class="nav nav-tabs">
30.1858 - <li class="active"><a href="#">Home</a></li>
30.1859 - <li><a href="#">Profile</a></li>
30.1860 - <li><a href="#">Messages</a></li>
30.1861 - </ul>
30.1862 - </div>
30.1863 -{% highlight html %}
30.1864 -<ul class="nav nav-tabs">
30.1865 - <li class="active"><a href="#">Home</a></li>
30.1866 - <li><a href="#">Profile</a></li>
30.1867 - <li><a href="#">Messages</a></li>
30.1868 -</ul>
30.1869 -{% endhighlight %}
30.1870 - <div class="bs-callout bs-callout-info">
30.1871 - <h4>Requires JavaScript tabs plugin</h4>
30.1872 - <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
30.1873 - </div>
30.1874 -
30.1875 - <h2 id="nav-pills">Pills</h2>
30.1876 - <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
30.1877 - <div class="bs-example">
30.1878 - <ul class="nav nav-pills">
30.1879 - <li class="active"><a href="#">Home</a></li>
30.1880 - <li><a href="#">Profile</a></li>
30.1881 - <li><a href="#">Messages</a></li>
30.1882 - </ul>
30.1883 - </div>
30.1884 -{% highlight html %}
30.1885 -<ul class="nav nav-pills">
30.1886 - <li class="active"><a href="#">Home</a></li>
30.1887 - <li><a href="#">Profile</a></li>
30.1888 - <li><a href="#">Messages</a></li>
30.1889 -</ul>
30.1890 -{% endhighlight %}
30.1891 - <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
30.1892 - <div class="bs-example">
30.1893 - <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
30.1894 - <li class="active"><a href="#">Home</a></li>
30.1895 - <li><a href="#">Profile</a></li>
30.1896 - <li><a href="#">Messages</a></li>
30.1897 - </ul>
30.1898 - </div>
30.1899 -{% highlight html %}
30.1900 -<ul class="nav nav-pills nav-stacked">
30.1901 - ...
30.1902 -</ul>
30.1903 -{% endhighlight %}
30.1904 -
30.1905 -
30.1906 - <h2 id="nav-justified">Justified</h2>
30.1907 - <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
30.1908 - <div class="bs-callout bs-callout-warning">
30.1909 - <h4>Safari and responsive justified navs</h4>
30.1910 - <p>Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
30.1911 - </div>
30.1912 - <div class="bs-example">
30.1913 - <ul class="nav nav-tabs nav-justified">
30.1914 - <li class="active"><a href="#">Home</a></li>
30.1915 - <li><a href="#">Profile</a></li>
30.1916 - <li><a href="#">Messages</a></li>
30.1917 - </ul>
30.1918 - <br>
30.1919 - <ul class="nav nav-pills nav-justified">
30.1920 - <li class="active"><a href="#">Home</a></li>
30.1921 - <li><a href="#">Profile</a></li>
30.1922 - <li><a href="#">Messages</a></li>
30.1923 - </ul>
30.1924 - </div>
30.1925 -{% highlight html %}
30.1926 -<ul class="nav nav-tabs nav-justified">
30.1927 - ...
30.1928 -</ul>
30.1929 -<ul class="nav nav-pills nav-justified">
30.1930 - ...
30.1931 -</ul>
30.1932 -{% endhighlight %}
30.1933 -
30.1934 -
30.1935 - <h2 id="nav-disabled-links">Disabled links</h2>
30.1936 - <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
30.1937 -
30.1938 - <div class="bs-callout bs-callout-warning">
30.1939 - <h4>Link functionality not impacted</h4>
30.1940 - <p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
30.1941 - </div>
30.1942 -
30.1943 - <div class="bs-example">
30.1944 - <ul class="nav nav-pills">
30.1945 - <li><a href="#">Clickable link</a></li>
30.1946 - <li><a href="#">Clickable link</a></li>
30.1947 - <li class="disabled"><a href="#">Disabled link</a></li>
30.1948 - </ul>
30.1949 - </div>
30.1950 -{% highlight html %}
30.1951 -<ul class="nav nav-pills">
30.1952 - ...
30.1953 - <li class="disabled"><a href="#">Disabled link</a></li>
30.1954 - ...
30.1955 -</ul>
30.1956 -{% endhighlight %}
30.1957 -
30.1958 -
30.1959 - <h2 id="nav-dropdowns">Using dropdowns</h2>
30.1960 - <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
30.1961 -
30.1962 - <h3>Tabs with dropdowns</h3>
30.1963 - <div class="bs-example">
30.1964 - <ul class="nav nav-tabs">
30.1965 - <li class="active"><a href="#">Home</a></li>
30.1966 - <li><a href="#">Help</a></li>
30.1967 - <li class="dropdown">
30.1968 - <a class="dropdown-toggle" data-toggle="dropdown" href="#">
30.1969 - Dropdown <span class="caret"></span>
30.1970 - </a>
30.1971 - <ul class="dropdown-menu" role="menu">
30.1972 - <li><a href="#">Action</a></li>
30.1973 - <li><a href="#">Another action</a></li>
30.1974 - <li><a href="#">Something else here</a></li>
30.1975 - <li class="divider"></li>
30.1976 - <li><a href="#">Separated link</a></li>
30.1977 - </ul>
30.1978 - </li>
30.1979 - </ul>
30.1980 - </div>
30.1981 -{% highlight html %}
30.1982 -<ul class="nav nav-tabs">
30.1983 - ...
30.1984 - <li class="dropdown">
30.1985 - <a class="dropdown-toggle" data-toggle="dropdown" href="#">
30.1986 - Dropdown <span class="caret"></span>
30.1987 - </a>
30.1988 - <ul class="dropdown-menu">
30.1989 - ...
30.1990 - </ul>
30.1991 - </li>
30.1992 - ...
30.1993 -</ul>
30.1994 -{% endhighlight %}
30.1995 -
30.1996 - <h3>Pills with dropdowns</h3>
30.1997 - <div class="bs-example">
30.1998 - <ul class="nav nav-pills">
30.1999 - <li class="active"><a href="#">Home</a></li>
30.2000 - <li><a href="#">Help</a></li>
30.2001 - <li class="dropdown">
30.2002 - <a class="dropdown-toggle" data-toggle="dropdown" href="#">
30.2003 - Dropdown <span class="caret"></span>
30.2004 - </a>
30.2005 - <ul class="dropdown-menu" role="menu">
30.2006 - <li><a href="#">Action</a></li>
30.2007 - <li><a href="#">Another action</a></li>
30.2008 - <li><a href="#">Something else here</a></li>
30.2009 - <li class="divider"></li>
30.2010 - <li><a href="#">Separated link</a></li>
30.2011 - </ul>
30.2012 - </li>
30.2013 - </ul>
30.2014 - </div><!-- /example -->
30.2015 -{% highlight html %}
30.2016 -<ul class="nav nav-pills">
30.2017 - ...
30.2018 - <li class="dropdown">
30.2019 - <a class="dropdown-toggle" data-toggle="dropdown" href="#">
30.2020 - Dropdown <span class="caret"></span>
30.2021 - </a>
30.2022 - <ul class="dropdown-menu">
30.2023 - ...
30.2024 - </ul>
30.2025 - </li>
30.2026 - ...
30.2027 -</ul>
30.2028 -{% endhighlight %}
30.2029 -
30.2030 - </div>
30.2031 -
30.2032 -
30.2033 -
30.2034 - <!-- Navbar
30.2035 - ================================================== -->
30.2036 - <div class="bs-docs-section">
30.2037 - <div class="page-header">
30.2038 - <h1 id="navbar">Navbar</h1>
30.2039 - </div>
30.2040 -
30.2041 - <h2 id="navbar-default">Default navbar</h2>
30.2042 - <p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
30.2043 -
30.2044 - <div class="bs-callout bs-callout-info">
30.2045 - <h4>Customize the collapsing point</h4>
30.2046 - <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>
30.2047 - </div>
30.2048 - <div class="bs-callout bs-callout-danger">
30.2049 - <h4>Requires JavaScript</h4>
30.2050 - <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
30.2051 - </div>
30.2052 -
30.2053 - <div class="bs-example">
30.2054 - <nav class="navbar navbar-default" role="navigation">
30.2055 - <!-- Brand and toggle get grouped for better mobile display -->
30.2056 - <div class="navbar-header">
30.2057 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
30.2058 - <span class="sr-only">Toggle navigation</span>
30.2059 - <span class="icon-bar"></span>
30.2060 - <span class="icon-bar"></span>
30.2061 - <span class="icon-bar"></span>
30.2062 - </button>
30.2063 - <a class="navbar-brand" href="#">Brand</a>
30.2064 - </div>
30.2065 -
30.2066 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2067 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
30.2068 - <ul class="nav navbar-nav">
30.2069 - <li class="active"><a href="#">Link</a></li>
30.2070 - <li><a href="#">Link</a></li>
30.2071 - <li class="dropdown">
30.2072 - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
30.2073 - <ul class="dropdown-menu" role="menu">
30.2074 - <li><a href="#">Action</a></li>
30.2075 - <li><a href="#">Another action</a></li>
30.2076 - <li><a href="#">Something else here</a></li>
30.2077 - <li class="divider"></li>
30.2078 - <li><a href="#">Separated link</a></li>
30.2079 - <li class="divider"></li>
30.2080 - <li><a href="#">One more separated link</a></li>
30.2081 - </ul>
30.2082 - </li>
30.2083 - </ul>
30.2084 - <form class="navbar-form navbar-left" role="search">
30.2085 - <div class="form-group">
30.2086 - <input type="text" class="form-control" placeholder="Search">
30.2087 - </div>
30.2088 - <button type="submit" class="btn btn-default">Submit</button>
30.2089 - </form>
30.2090 - <ul class="nav navbar-nav navbar-right">
30.2091 - <li><a href="#">Link</a></li>
30.2092 - <li class="dropdown">
30.2093 - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
30.2094 - <ul class="dropdown-menu" role="menu">
30.2095 - <li><a href="#">Action</a></li>
30.2096 - <li><a href="#">Another action</a></li>
30.2097 - <li><a href="#">Something else here</a></li>
30.2098 - <li class="divider"></li>
30.2099 - <li><a href="#">Separated link</a></li>
30.2100 - </ul>
30.2101 - </li>
30.2102 - </ul>
30.2103 - </div><!-- /.navbar-collapse -->
30.2104 - </nav>
30.2105 - </div>
30.2106 -{% highlight html %}
30.2107 -<nav class="navbar navbar-default" role="navigation">
30.2108 - <!-- Brand and toggle get grouped for better mobile display -->
30.2109 - <div class="navbar-header">
30.2110 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
30.2111 - <span class="sr-only">Toggle navigation</span>
30.2112 - <span class="icon-bar"></span>
30.2113 - <span class="icon-bar"></span>
30.2114 - <span class="icon-bar"></span>
30.2115 - </button>
30.2116 - <a class="navbar-brand" href="#">Brand</a>
30.2117 - </div>
30.2118 -
30.2119 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2120 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
30.2121 - <ul class="nav navbar-nav">
30.2122 - <li class="active"><a href="#">Link</a></li>
30.2123 - <li><a href="#">Link</a></li>
30.2124 - <li class="dropdown">
30.2125 - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
30.2126 - <ul class="dropdown-menu">
30.2127 - <li><a href="#">Action</a></li>
30.2128 - <li><a href="#">Another action</a></li>
30.2129 - <li><a href="#">Something else here</a></li>
30.2130 - <li class="divider"></li>
30.2131 - <li><a href="#">Separated link</a></li>
30.2132 - <li class="divider"></li>
30.2133 - <li><a href="#">One more separated link</a></li>
30.2134 - </ul>
30.2135 - </li>
30.2136 - </ul>
30.2137 - <form class="navbar-form navbar-left" role="search">
30.2138 - <div class="form-group">
30.2139 - <input type="text" class="form-control" placeholder="Search">
30.2140 - </div>
30.2141 - <button type="submit" class="btn btn-default">Submit</button>
30.2142 - </form>
30.2143 - <ul class="nav navbar-nav navbar-right">
30.2144 - <li><a href="#">Link</a></li>
30.2145 - <li class="dropdown">
30.2146 - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
30.2147 - <ul class="dropdown-menu">
30.2148 - <li><a href="#">Action</a></li>
30.2149 - <li><a href="#">Another action</a></li>
30.2150 - <li><a href="#">Something else here</a></li>
30.2151 - <li class="divider"></li>
30.2152 - <li><a href="#">Separated link</a></li>
30.2153 - </ul>
30.2154 - </li>
30.2155 - </ul>
30.2156 - </div><!-- /.navbar-collapse -->
30.2157 -</nav>
30.2158 -{% endhighlight %}
30.2159 -
30.2160 - <div class="bs-callout bs-callout-danger">
30.2161 - <h4>Plugin dependency</h4>
30.2162 - <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
30.2163 - </div>
30.2164 -
30.2165 - <div class="bs-callout bs-callout-warning">
30.2166 - <h4>Make navbars accessible</h4>
30.2167 - <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
30.2168 - </div>
30.2169 -
30.2170 -
30.2171 - <h2 id="navbar-forms">Forms</h2>
30.2172 - <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
30.2173 - <p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin.</p>
30.2174 - <div class="bs-example">
30.2175 - <nav class="navbar navbar-default" role="navigation">
30.2176 - <div class="navbar-header">
30.2177 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
30.2178 - <span class="sr-only">Toggle navigation</span>
30.2179 - <span class="icon-bar"></span>
30.2180 - <span class="icon-bar"></span>
30.2181 - <span class="icon-bar"></span>
30.2182 - </button>
30.2183 - <a class="navbar-brand" href="#">Brand</a>
30.2184 - </div>
30.2185 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
30.2186 - <form class="navbar-form navbar-left" role="search">
30.2187 - <div class="form-group">
30.2188 - <input type="text" class="form-control" placeholder="Search">
30.2189 - </div>
30.2190 - <button type="submit" class="btn btn-default">Submit</button>
30.2191 - </form>
30.2192 - </div>
30.2193 - </nav>
30.2194 - </div>
30.2195 -{% highlight html %}
30.2196 -<form class="navbar-form navbar-left" role="search">
30.2197 - <div class="form-group">
30.2198 - <input type="text" class="form-control" placeholder="Search">
30.2199 - </div>
30.2200 - <button type="submit" class="btn btn-default">Submit</button>
30.2201 -</form>
30.2202 -{% endhighlight %}
30.2203 -
30.2204 - <div class="bs-callout bs-callout-danger">
30.2205 - <h4>Always add labels</h4>
30.2206 - <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
30.2207 - </div>
30.2208 -
30.2209 -
30.2210 - <h2 id="navbar-buttons">Buttons</h2>
30.2211 - <p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
30.2212 - <div class="bs-example">
30.2213 - <nav class="navbar navbar-default" role="navigation">
30.2214 - <div class="navbar-header">
30.2215 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
30.2216 - <span class="sr-only">Toggle navigation</span>
30.2217 - <span class="icon-bar"></span>
30.2218 - <span class="icon-bar"></span>
30.2219 - <span class="icon-bar"></span>
30.2220 - </button>
30.2221 - <a class="navbar-brand" href="#">Brand</a>
30.2222 - </div>
30.2223 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
30.2224 - <button type="button" class="btn btn-default navbar-btn">Sign in</button>
30.2225 - </div>
30.2226 - </nav>
30.2227 - </div>
30.2228 -{% highlight html %}
30.2229 -<button type="button" class="btn btn-default navbar-btn">Sign in</button>
30.2230 -{% endhighlight %}
30.2231 -
30.2232 - <div class="bs-callout bs-callout-warning">
30.2233 - <h4>Context-specific usage</h4>
30.2234 - <p>Like the standard <a href="{{ page.base_url }}css#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
30.2235 - </div>
30.2236 -
30.2237 - <h2 id="navbar-text">Text</h2>
30.2238 - <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
30.2239 - <div class="bs-example">
30.2240 - <nav class="navbar navbar-default" role="navigation">
30.2241 - <div class="navbar-header">
30.2242 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
30.2243 - <span class="sr-only">Toggle navigation</span>
30.2244 - <span class="icon-bar"></span>
30.2245 - <span class="icon-bar"></span>
30.2246 - <span class="icon-bar"></span>
30.2247 - </button>
30.2248 - <a class="navbar-brand" href="#">Brand</a>
30.2249 - </div>
30.2250 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
30.2251 - <p class="navbar-text">Signed in as Mark Otto</p>
30.2252 - </div>
30.2253 - </nav>
30.2254 - </div>
30.2255 -{% highlight html %}
30.2256 -<p class="navbar-text">Signed in as Mark Otto</p>
30.2257 -{% endhighlight %}
30.2258 -
30.2259 -
30.2260 - <h2 id="navbar-links">Non-nav links</h2>
30.2261 - <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
30.2262 - <div class="bs-example">
30.2263 - <nav class="navbar navbar-default" role="navigation">
30.2264 - <div class="navbar-header">
30.2265 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
30.2266 - <span class="sr-only">Toggle navigation</span>
30.2267 - <span class="icon-bar"></span>
30.2268 - <span class="icon-bar"></span>
30.2269 - <span class="icon-bar"></span>
30.2270 - </button>
30.2271 - <a class="navbar-brand" href="#">Brand</a>
30.2272 - </div>
30.2273 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
30.2274 - <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
30.2275 - </div>
30.2276 - </nav>
30.2277 - </div>
30.2278 -{% highlight html %}
30.2279 -<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
30.2280 -{% endhighlight %}
30.2281 -
30.2282 -
30.2283 - <h2 id="navbar-component-alignment">Component alignment</h2>
30.2284 - <p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
30.2285 - <p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
30.2286 -
30.2287 -
30.2288 - <h2 id="navbar-fixed-top">Fixed to top</h2>
30.2289 - <p>Add <code>.navbar-fixed-top</code>.</p>
30.2290 - <div class="bs-example bs-navbar-top-example">
30.2291 - <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
30.2292 - <!-- Brand and toggle get grouped for better mobile display -->
30.2293 - <div class="navbar-header">
30.2294 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
30.2295 - <span class="sr-only">Toggle navigation</span>
30.2296 - <span class="icon-bar"></span>
30.2297 - <span class="icon-bar"></span>
30.2298 - <span class="icon-bar"></span>
30.2299 - </button>
30.2300 - <a class="navbar-brand" href="#">Brand</a>
30.2301 - </div>
30.2302 -
30.2303 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2304 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
30.2305 - <ul class="nav navbar-nav">
30.2306 - <li class="active"><a href="#">Home</a></li>
30.2307 - <li><a href="#">Link</a></li>
30.2308 - <li><a href="#">Link</a></li>
30.2309 - </ul>
30.2310 - </div><!-- /.navbar-collapse -->
30.2311 - </nav>
30.2312 - </div><!-- /example -->
30.2313 -{% highlight html %}
30.2314 -<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
30.2315 - ...
30.2316 -</nav>
30.2317 -{% endhighlight %}
30.2318 -
30.2319 - <div class="bs-callout bs-callout-danger">
30.2320 - <h4>Body padding required</h4>
30.2321 - <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
30.2322 -{% highlight css %}
30.2323 -body { padding-top: 70px; }
30.2324 -{% endhighlight %}
30.2325 - <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
30.2326 - </div>
30.2327 -
30.2328 -
30.2329 - <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
30.2330 - <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
30.2331 - <div class="bs-example bs-navbar-bottom-example">
30.2332 - <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
30.2333 - <!-- Brand and toggle get grouped for better mobile display -->
30.2334 - <div class="navbar-header">
30.2335 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
30.2336 - <span class="sr-only">Toggle navigation</span>
30.2337 - <span class="icon-bar"></span>
30.2338 - <span class="icon-bar"></span>
30.2339 - <span class="icon-bar"></span>
30.2340 - </button>
30.2341 - <a class="navbar-brand" href="#">Brand</a>
30.2342 - </div>
30.2343 -
30.2344 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2345 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
30.2346 - <ul class="nav navbar-nav">
30.2347 - <li class="active"><a href="#">Home</a></li>
30.2348 - <li><a href="#">Link</a></li>
30.2349 - <li><a href="#">Link</a></li>
30.2350 - </ul>
30.2351 - </div><!-- /.navbar-collapse -->
30.2352 - </nav>
30.2353 - </div><!-- /example -->
30.2354 -{% highlight html %}
30.2355 -<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
30.2356 - ...
30.2357 -</nav>
30.2358 -{% endhighlight %}
30.2359 -
30.2360 - <div class="bs-callout bs-callout-danger">
30.2361 - <h4>Body padding required</h4>
30.2362 - <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
30.2363 -{% highlight css %}
30.2364 -body { padding-bottom: 70px; }
30.2365 -{% endhighlight %}
30.2366 - <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
30.2367 - </div>
30.2368 -
30.2369 -
30.2370 - <h2 id="navbar-static-top">Static top</h2>
30.2371 - <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
30.2372 - <div class="bs-example bs-navbar-top-example">
30.2373 - <nav class="navbar navbar-default navbar-static-top" role="navigation">
30.2374 - <!-- Brand and toggle get grouped for better mobile display -->
30.2375 - <div class="navbar-header">
30.2376 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
30.2377 - <span class="sr-only">Toggle navigation</span>
30.2378 - <span class="icon-bar"></span>
30.2379 - <span class="icon-bar"></span>
30.2380 - <span class="icon-bar"></span>
30.2381 - </button>
30.2382 - <a class="navbar-brand" href="#">Brand</a>
30.2383 - </div>
30.2384 -
30.2385 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2386 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
30.2387 - <ul class="nav navbar-nav">
30.2388 - <li class="active"><a href="#">Home</a></li>
30.2389 - <li><a href="#">Link</a></li>
30.2390 - <li><a href="#">Link</a></li>
30.2391 - </ul>
30.2392 - </div><!-- /.navbar-collapse -->
30.2393 - </nav>
30.2394 - </div><!-- /example -->
30.2395 -{% highlight html %}
30.2396 -<nav class="navbar navbar-default navbar-static-top" role="navigation">
30.2397 - ...
30.2398 -</nav>
30.2399 -{% endhighlight %}
30.2400 -
30.2401 -
30.2402 - <h2 id="navbar-inverted">Inverted navbar</h2>
30.2403 - <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
30.2404 - <div class="bs-example">
30.2405 - <nav class="navbar navbar-inverse" role="navigation">
30.2406 - <!-- Brand and toggle get grouped for better mobile display -->
30.2407 - <div class="navbar-header">
30.2408 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
30.2409 - <span class="sr-only">Toggle navigation</span>
30.2410 - <span class="icon-bar"></span>
30.2411 - <span class="icon-bar"></span>
30.2412 - <span class="icon-bar"></span>
30.2413 - </button>
30.2414 - <a class="navbar-brand" href="#">Brand</a>
30.2415 - </div>
30.2416 -
30.2417 - <!-- Collect the nav links, forms, and other content for toggling -->
30.2418 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
30.2419 - <ul class="nav navbar-nav">
30.2420 - <li class="active"><a href="#">Home</a></li>
30.2421 - <li><a href="#">Link</a></li>
30.2422 - <li><a href="#">Link</a></li>
30.2423 - </ul>
30.2424 - </div><!-- /.navbar-collapse -->
30.2425 - </nav>
30.2426 - </div><!-- /example -->
30.2427 -{% highlight html %}
30.2428 -<nav class="navbar navbar-inverse" role="navigation">
30.2429 - ...
30.2430 -</nav>
30.2431 -{% endhighlight %}
30.2432 -
30.2433 - </div>
30.2434 -
30.2435 -
30.2436 -
30.2437 - <!-- Breadcrumbs
30.2438 - ================================================== -->
30.2439 - <div class="bs-docs-section">
30.2440 - <div class="page-header">
30.2441 - <h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
30.2442 - </div>
30.2443 - <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
30.2444 - <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
30.2445 - <div class="bs-example">
30.2446 - <ol class="breadcrumb">
30.2447 - <li class="active">Home</li>
30.2448 - </ol>
30.2449 - <ol class="breadcrumb">
30.2450 - <li><a href="#">Home</a></li>
30.2451 - <li class="active">Library</li>
30.2452 - </ol>
30.2453 - <ol class="breadcrumb" style="margin-bottom: 5px;">
30.2454 - <li><a href="#">Home</a></li>
30.2455 - <li><a href="#">Library</a></li>
30.2456 - <li class="active">Data</li>
30.2457 - </ol>
30.2458 - </div>
30.2459 -{% highlight html %}
30.2460 -<ol class="breadcrumb">
30.2461 - <li><a href="#">Home</a></li>
30.2462 - <li><a href="#">Library</a></li>
30.2463 - <li class="active">Data</li>
30.2464 -</ol>
30.2465 -{% endhighlight %}
30.2466 - </div>
30.2467 -
30.2468 -
30.2469 -
30.2470 - <!-- Pagination
30.2471 - ================================================== -->
30.2472 - <div class="bs-docs-section">
30.2473 - <div class="page-header">
30.2474 - <h1 id="pagination">Pagination</h1>
30.2475 - </div>
30.2476 - <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
30.2477 -
30.2478 - <h2 id="pagination-default">Default pagination</h2>
30.2479 - <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
30.2480 - <div class="bs-example">
30.2481 - <ul class="pagination">
30.2482 - <li><a href="#">«</a></li>
30.2483 - <li><a href="#">1</a></li>
30.2484 - <li><a href="#">2</a></li>
30.2485 - <li><a href="#">3</a></li>
30.2486 - <li><a href="#">4</a></li>
30.2487 - <li><a href="#">5</a></li>
30.2488 - <li><a href="#">»</a></li>
30.2489 - </ul>
30.2490 - </div>
30.2491 -{% highlight html %}
30.2492 -<ul class="pagination">
30.2493 - <li><a href="#">«</a></li>
30.2494 - <li><a href="#">1</a></li>
30.2495 - <li><a href="#">2</a></li>
30.2496 - <li><a href="#">3</a></li>
30.2497 - <li><a href="#">4</a></li>
30.2498 - <li><a href="#">5</a></li>
30.2499 - <li><a href="#">»</a></li>
30.2500 -</ul>
30.2501 -{% endhighlight %}
30.2502 -
30.2503 - <h3>Disabled and active states</h3>
30.2504 - <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
30.2505 - <div class="bs-example">
30.2506 - <ul class="pagination">
30.2507 - <li class="disabled"><a href="#">«</a></li>
30.2508 - <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
30.2509 - <li><a href="#">2</a></li>
30.2510 - <li><a href="#">3</a></li>
30.2511 - <li><a href="#">4</a></li>
30.2512 - <li><a href="#">5</a></li>
30.2513 - <li><a href="#">»</a></li>
30.2514 - </ul>
30.2515 - </div>
30.2516 -{% highlight html %}
30.2517 -<ul class="pagination">
30.2518 - <li class="disabled"><a href="#">«</a></li>
30.2519 - <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
30.2520 - ...
30.2521 -</ul>
30.2522 -{% endhighlight %}
30.2523 - <p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
30.2524 -{% highlight html %}
30.2525 -<ul class="pagination">
30.2526 - <li class="disabled"><span>«</span></li>
30.2527 - <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
30.2528 - ...
30.2529 -</ul>
30.2530 -{% endhighlight %}
30.2531 -
30.2532 -
30.2533 - <h3>Sizing</h3>
30.2534 - <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
30.2535 - <div class="bs-example">
30.2536 - <div>
30.2537 - <ul class="pagination pagination-lg">
30.2538 - <li><a href="#">«</a></li>
30.2539 - <li><a href="#">1</a></li>
30.2540 - <li><a href="#">2</a></li>
30.2541 - <li><a href="#">3</a></li>
30.2542 - <li><a href="#">4</a></li>
30.2543 - <li><a href="#">5</a></li>
30.2544 - <li><a href="#">»</a></li>
30.2545 - </ul>
30.2546 - </div>
30.2547 - <div>
30.2548 - <ul class="pagination">
30.2549 - <li><a href="#">«</a></li>
30.2550 - <li><a href="#">1</a></li>
30.2551 - <li><a href="#">2</a></li>
30.2552 - <li><a href="#">3</a></li>
30.2553 - <li><a href="#">4</a></li>
30.2554 - <li><a href="#">5</a></li>
30.2555 - <li><a href="#">»</a></li>
30.2556 - </ul>
30.2557 - </div>
30.2558 - <div>
30.2559 - <ul class="pagination pagination-sm">
30.2560 - <li><a href="#">«</a></li>
30.2561 - <li><a href="#">1</a></li>
30.2562 - <li><a href="#">2</a></li>
30.2563 - <li><a href="#">3</a></li>
30.2564 - <li><a href="#">4</a></li>
30.2565 - <li><a href="#">5</a></li>
30.2566 - <li><a href="#">»</a></li>
30.2567 - </ul>
30.2568 - </div>
30.2569 - </div>
30.2570 -{% highlight html %}
30.2571 -<ul class="pagination pagination-lg">...</ul>
30.2572 -<ul class="pagination">...</ul>
30.2573 -<ul class="pagination pagination-sm">...</ul>
30.2574 -{% endhighlight %}
30.2575 -
30.2576 -
30.2577 - <h2 id="pagination-pager">Pager</h2>
30.2578 - <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
30.2579 -
30.2580 - <h3>Default example</h3>
30.2581 - <p>By default, the pager centers links.</p>
30.2582 - <div class="bs-example">
30.2583 - <ul class="pager">
30.2584 - <li><a href="#">Previous</a></li>
30.2585 - <li><a href="#">Next</a></li>
30.2586 - </ul>
30.2587 - </div>
30.2588 -{% highlight html %}
30.2589 -<ul class="pager">
30.2590 - <li><a href="#">Previous</a></li>
30.2591 - <li><a href="#">Next</a></li>
30.2592 -</ul>
30.2593 -{% endhighlight %}
30.2594 -
30.2595 - <h3>Aligned links</h3>
30.2596 - <p>Alternatively, you can align each link to the sides:</p>
30.2597 - <div class="bs-example">
30.2598 - <ul class="pager">
30.2599 - <li class="previous"><a href="#">← Older</a></li>
30.2600 - <li class="next"><a href="#">Newer →</a></li>
30.2601 - </ul>
30.2602 - </div>
30.2603 -{% highlight html %}
30.2604 -<ul class="pager">
30.2605 - <li class="previous"><a href="#">← Older</a></li>
30.2606 - <li class="next"><a href="#">Newer →</a></li>
30.2607 -</ul>
30.2608 -{% endhighlight %}
30.2609 -
30.2610 -
30.2611 - <h3>Optional disabled state</h3>
30.2612 - <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
30.2613 - <div class="bs-example">
30.2614 - <ul class="pager">
30.2615 - <li class="previous disabled"><a href="#">← Older</a></li>
30.2616 - <li class="next"><a href="#">Newer →</a></li>
30.2617 - </ul>
30.2618 - </div>
30.2619 -{% highlight html %}
30.2620 -<ul class="pager">
30.2621 - <li class="previous disabled"><a href="#">← Older</a></li>
30.2622 - <li class="next"><a href="#">Newer →</a></li>
30.2623 -</ul>
30.2624 -{% endhighlight %}
30.2625 - </div>
30.2626 -
30.2627 -
30.2628 -
30.2629 - <!-- Labels
30.2630 - ================================================== -->
30.2631 - <div class="bs-docs-section">
30.2632 - <div class="page-header">
30.2633 - <h1 id="labels">Labels</h1>
30.2634 - </div>
30.2635 - <p class="lead"></p>
30.2636 -
30.2637 - <h3>Example</h3>
30.2638 - <div class="bs-example">
30.2639 - <h1>Example heading <span class="label label-default">New</span></h1>
30.2640 - <h2>Example heading <span class="label label-default">New</span></h2>
30.2641 - <h3>Example heading <span class="label label-default">New</span></h3>
30.2642 - <h4>Example heading <span class="label label-default">New</span></h4>
30.2643 - <h5>Example heading <span class="label label-default">New</span></h5>
30.2644 - <h6>Example heading <span class="label label-default">New</span></h6>
30.2645 - </div>
30.2646 -{% highlight html %}
30.2647 -<h3>Example heading <span class="label label-default">New</span></h3>
30.2648 -{% endhighlight %}
30.2649 -
30.2650 - <h3>Available variations</h3>
30.2651 - <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
30.2652 - <div class="bs-example">
30.2653 - <span class="label label-default">Default</span>
30.2654 - <span class="label label-primary">Primary</span>
30.2655 - <span class="label label-success">Success</span>
30.2656 - <span class="label label-info">Info</span>
30.2657 - <span class="label label-warning">Warning</span>
30.2658 - <span class="label label-danger">Danger</span>
30.2659 - </div>
30.2660 -{% highlight html %}
30.2661 -<span class="label label-default">Default</span>
30.2662 -<span class="label label-primary">Primary</span>
30.2663 -<span class="label label-success">Success</span>
30.2664 -<span class="label label-info">Info</span>
30.2665 -<span class="label label-warning">Warning</span>
30.2666 -<span class="label label-danger">Danger</span>
30.2667 -{% endhighlight %}
30.2668 -
30.2669 - </div>
30.2670 -
30.2671 -
30.2672 -
30.2673 - <!-- Badges
30.2674 - ================================================== -->
30.2675 - <div class="bs-docs-section">
30.2676 - <div class="page-header">
30.2677 - <h1 id="badges">Badges</h1>
30.2678 - </div>
30.2679 - <p class="lead">Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.</p>
30.2680 -
30.2681 - <div class="bs-example">
30.2682 - <a href="#">Inbox <span class="badge">42</span></a>
30.2683 - </div>
30.2684 -{% highlight html %}
30.2685 -<a href="#">Inbox <span class="badge">42</span></a>
30.2686 -{% endhighlight %}
30.2687 -
30.2688 - <h4>Self collapsing</h4>
30.2689 - <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
30.2690 -
30.2691 - <div class="bs-callout bs-callout-danger">
30.2692 - <h4>Cross-browser compatibility</h4>
30.2693 - <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
30.2694 - </div>
30.2695 -
30.2696 - <h4>Adapts to active nav states</h4>
30.2697 - <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
30.2698 - <div class="bs-example">
30.2699 - <ul class="nav nav-pills">
30.2700 - <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
30.2701 - <li><a href="#">Profile</a></li>
30.2702 - <li><a href="#">Messages <span class="badge">3</span></a></li>
30.2703 - </ul>
30.2704 - <br>
30.2705 - <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
30.2706 - <li class="active">
30.2707 - <a href="#">
30.2708 - <span class="badge pull-right">42</span>
30.2709 - Home
30.2710 - </a>
30.2711 - </li>
30.2712 - <li><a href="#">Profile</a></li>
30.2713 - <li>
30.2714 - <a href="#">
30.2715 - <span class="badge pull-right">3</span>
30.2716 - Messages
30.2717 - </a>
30.2718 - </li>
30.2719 - </ul>
30.2720 - <br>
30.2721 - <button class="btn btn-primary" type="button">
30.2722 - Messages <span class="badge">4</span>
30.2723 - </button>
30.2724 - </div>
30.2725 -{% highlight html %}
30.2726 -<ul class="nav nav-pills nav-stacked">
30.2727 - <li class="active">
30.2728 - <a href="#">
30.2729 - <span class="badge pull-right">42</span>
30.2730 - Home
30.2731 - </a>
30.2732 - </li>
30.2733 - ...
30.2734 -</ul>
30.2735 -{% endhighlight %}
30.2736 - </div>
30.2737 -
30.2738 -
30.2739 -
30.2740 - <!-- Jumbotron
30.2741 - ================================================== -->
30.2742 - <div class="bs-docs-section">
30.2743 - <div class="page-header">
30.2744 - <h1 id="jumbotron">Jumbotron</h1>
30.2745 - </div>
30.2746 - <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
30.2747 - <div class="bs-example">
30.2748 - <div class="jumbotron">
30.2749 - <h1>Hello, world!</h1>
30.2750 - <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
30.2751 - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
30.2752 - </div>
30.2753 - </div>
30.2754 -{% highlight html %}
30.2755 -<div class="jumbotron">
30.2756 - <h1>Hello, world!</h1>
30.2757 - <p>...</p>
30.2758 - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
30.2759 -</div>
30.2760 -{% endhighlight %}
30.2761 - <p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>
30.2762 -{% highlight html %}
30.2763 -<div class="jumbotron">
30.2764 - <div class="container">
30.2765 - ...
30.2766 - </div>
30.2767 -</div>
30.2768 -{% endhighlight %}
30.2769 -
30.2770 - </div>
30.2771 -
30.2772 -
30.2773 -
30.2774 - <!-- Page header
30.2775 - ================================================== -->
30.2776 - <div class="bs-docs-section">
30.2777 - <div class="page-header">
30.2778 - <h1 id="page-header">Page header</h1>
30.2779 - </div>
30.2780 - <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
30.2781 - <div class="bs-example">
30.2782 - <div class="page-header">
30.2783 - <h1>Example page header <small>Subtext for header</small></h1>
30.2784 - </div>
30.2785 - </div>
30.2786 -{% highlight html %}
30.2787 -<div class="page-header">
30.2788 - <h1>Example page header <small>Subtext for header</small></h1>
30.2789 -</div>
30.2790 -{% endhighlight %}
30.2791 - </div>
30.2792 -
30.2793 -
30.2794 -
30.2795 - <!-- Thumbnails
30.2796 - ================================================== -->
30.2797 - <div class="bs-docs-section">
30.2798 - <div class="page-header">
30.2799 - <h1 id="thumbnails">Thumbnails</h1>
30.2800 - </div>
30.2801 - <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
30.2802 -
30.2803 - <h3 id="thumbnails-default">Default example</h3>
30.2804 - <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
30.2805 - <div class="bs-example">
30.2806 - <div class="row">
30.2807 - <div class="col-xs-6 col-md-3">
30.2808 - <a href="#" class="thumbnail">
30.2809 - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
30.2810 - </a>
30.2811 - </div>
30.2812 - <div class="col-xs-6 col-md-3">
30.2813 - <a href="#" class="thumbnail">
30.2814 - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
30.2815 - </a>
30.2816 - </div>
30.2817 - <div class="col-xs-6 col-md-3">
30.2818 - <a href="#" class="thumbnail">
30.2819 - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
30.2820 - </a>
30.2821 - </div>
30.2822 - <div class="col-xs-6 col-md-3">
30.2823 - <a href="#" class="thumbnail">
30.2824 - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
30.2825 - </a>
30.2826 - </div>
30.2827 - </div>
30.2828 - </div><!-- /.bs-example -->
30.2829 -{% highlight html %}
30.2830 -<div class="row">
30.2831 - <div class="col-xs-6 col-md-3">
30.2832 - <a href="#" class="thumbnail">
30.2833 - <img data-src="holder.js/100%x180" alt="...">
30.2834 - </a>
30.2835 - </div>
30.2836 - ...
30.2837 -</div>
30.2838 -{% endhighlight %}
30.2839 -
30.2840 - <h3 id="thumbnails-custom-content">Custom content</h3>
30.2841 - <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
30.2842 - <div class="bs-example">
30.2843 - <div class="row">
30.2844 - <div class="col-sm-6 col-md-4">
30.2845 - <div class="thumbnail">
30.2846 - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
30.2847 - <div class="caption">
30.2848 - <h3>Thumbnail label</h3>
30.2849 - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
30.2850 - <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
30.2851 - </div>
30.2852 - </div>
30.2853 - </div>
30.2854 - <div class="col-sm-6 col-md-4">
30.2855 - <div class="thumbnail">
30.2856 - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
30.2857 - <div class="caption">
30.2858 - <h3>Thumbnail label</h3>
30.2859 - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
30.2860 - <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
30.2861 - </div>
30.2862 - </div>
30.2863 - </div>
30.2864 - <div class="col-sm-6 col-md-4">
30.2865 - <div class="thumbnail">
30.2866 - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
30.2867 - <div class="caption">
30.2868 - <h3>Thumbnail label</h3>
30.2869 - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
30.2870 - <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
30.2871 - </div>
30.2872 - </div>
30.2873 - </div>
30.2874 - </div>
30.2875 - </div><!-- /.bs-example -->
30.2876 -{% highlight html %}
30.2877 -<div class="row">
30.2878 - <div class="col-sm-6 col-md-4">
30.2879 - <div class="thumbnail">
30.2880 - <img data-src="holder.js/300x200" alt="...">
30.2881 - <div class="caption">
30.2882 - <h3>Thumbnail label</h3>
30.2883 - <p>...</p>
30.2884 - <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
30.2885 - </div>
30.2886 - </div>
30.2887 - </div>
30.2888 -</div>
30.2889 -{% endhighlight %}
30.2890 - </div>
30.2891 -
30.2892 -
30.2893 -
30.2894 -
30.2895 - <!-- Alerts
30.2896 - ================================================== -->
30.2897 - <div class="bs-docs-section">
30.2898 - <div class="page-header">
30.2899 - <h1 id="alerts">Alerts</h1>
30.2900 - </div>
30.2901 - <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
30.2902 -
30.2903 - <h2 id="alerts-examples">Examples</h2>
30.2904 - <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
30.2905 -
30.2906 - <div class="bs-callout bs-callout-info">
30.2907 - <h4>No default class</h4>
30.2908 - <p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
30.2909 - </div>
30.2910 -
30.2911 - <div class="bs-example">
30.2912 - <div class="alert alert-success">
30.2913 - <strong>Well done!</strong> You successfully read this important alert message.
30.2914 - </div>
30.2915 - <div class="alert alert-info">
30.2916 - <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
30.2917 - </div>
30.2918 - <div class="alert alert-warning">
30.2919 - <strong>Warning!</strong> Best check yo self, you're not looking too good.
30.2920 - </div>
30.2921 - <div class="alert alert-danger">
30.2922 - <strong>Oh snap!</strong> Change a few things up and try submitting again.
30.2923 - </div>
30.2924 - </div>
30.2925 -{% highlight html %}
30.2926 -<div class="alert alert-success">...</div>
30.2927 -<div class="alert alert-info">...</div>
30.2928 -<div class="alert alert-warning">...</div>
30.2929 -<div class="alert alert-danger">...</div>
30.2930 -{% endhighlight %}
30.2931 -
30.2932 - <h2 id="alerts-dismissable">Dismissable alerts</h2>
30.2933 - <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
30.2934 - <div class="bs-example">
30.2935 - <div class="alert alert-warning alert-dismissable">
30.2936 - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
30.2937 - <strong>Warning!</strong> Best check yo self, you're not looking too good.
30.2938 - </div>
30.2939 - </div>
30.2940 -{% highlight html %}
30.2941 -<div class="alert alert-warning alert-dismissable">
30.2942 - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
30.2943 - <strong>Warning!</strong> Best check yo self, you're not looking too good.
30.2944 -</div>
30.2945 -{% endhighlight %}
30.2946 -
30.2947 - <div class="bs-callout bs-callout-warning">
30.2948 - <h4>Ensure proper behavior across all devices</h4>
30.2949 - <p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
30.2950 - </div>
30.2951 -
30.2952 - <h2 id="alerts-links">Links in alerts</h2>
30.2953 - <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
30.2954 - <div class="bs-example">
30.2955 - <div class="alert alert-success">
30.2956 - <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
30.2957 - </div>
30.2958 - <div class="alert alert-info">
30.2959 - <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
30.2960 - </div>
30.2961 - <div class="alert alert-warning">
30.2962 - <strong>Warning!</strong> Best check yo self, you're <a href="#" class="alert-link">not looking too good</a>.
30.2963 - </div>
30.2964 - <div class="alert alert-danger">
30.2965 - <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
30.2966 - </div>
30.2967 - </div>
30.2968 -{% highlight html %}
30.2969 -<div class="alert alert-success">
30.2970 - <a href="#" class="alert-link">...</a>
30.2971 -</div>
30.2972 -<div class="alert alert-info">
30.2973 - <a href="#" class="alert-link">...</a>
30.2974 -</div>
30.2975 -<div class="alert alert-warning">
30.2976 - <a href="#" class="alert-link">...</a>
30.2977 -</div>
30.2978 -<div class="alert alert-danger">
30.2979 - <a href="#" class="alert-link">...</a>
30.2980 -</div>
30.2981 -{% endhighlight %}
30.2982 - </div>
30.2983 -
30.2984 -
30.2985 -
30.2986 -
30.2987 - <!-- Progress bars
30.2988 - ================================================== -->
30.2989 - <div class="bs-docs-section">
30.2990 - <div class="page-header">
30.2991 - <h1 id="progress">Progress bars</h1>
30.2992 - </div>
30.2993 - <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
30.2994 -
30.2995 - <div class="bs-callout bs-callout-danger">
30.2996 - <h4>Cross-browser compatibility</h4>
30.2997 - <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
30.2998 - </div>
30.2999 -
30.3000 - <h3 id="progress-basic">Basic example</h3>
30.3001 - <p>Default progress bar.</p>
30.3002 - <div class="bs-example">
30.3003 - <div class="progress">
30.3004 - <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
30.3005 - <span class="sr-only">60% Complete</span>
30.3006 - </div>
30.3007 - </div>
30.3008 - </div>
30.3009 -{% highlight html %}
30.3010 -<div class="progress">
30.3011 - <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
30.3012 - <span class="sr-only">60% Complete</span>
30.3013 - </div>
30.3014 -</div>
30.3015 -{% endhighlight %}
30.3016 -
30.3017 - <h3 id="progress-alternatives">Contextual alternatives</h3>
30.3018 - <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
30.3019 - <div class="bs-example">
30.3020 - <div class="progress">
30.3021 - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
30.3022 - <span class="sr-only">40% Complete (success)</span>
30.3023 - </div>
30.3024 - </div>
30.3025 - <div class="progress">
30.3026 - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
30.3027 - <span class="sr-only">20% Complete</span>
30.3028 - </div>
30.3029 - </div>
30.3030 - <div class="progress">
30.3031 - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
30.3032 - <span class="sr-only">60% Complete (warning)</span>
30.3033 - </div>
30.3034 - </div>
30.3035 - <div class="progress">
30.3036 - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
30.3037 - <span class="sr-only">80% Complete (danger)</span>
30.3038 - </div>
30.3039 - </div>
30.3040 - </div>
30.3041 -{% highlight html %}
30.3042 -<div class="progress">
30.3043 - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
30.3044 - <span class="sr-only">40% Complete (success)</span>
30.3045 - </div>
30.3046 -</div>
30.3047 -<div class="progress">
30.3048 - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
30.3049 - <span class="sr-only">20% Complete</span>
30.3050 - </div>
30.3051 -</div>
30.3052 -<div class="progress">
30.3053 - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
30.3054 - <span class="sr-only">60% Complete (warning)</span>
30.3055 - </div>
30.3056 -</div>
30.3057 -<div class="progress">
30.3058 - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
30.3059 - <span class="sr-only">80% Complete</span>
30.3060 - </div>
30.3061 -</div>
30.3062 -{% endhighlight %}
30.3063 -
30.3064 - <h3 id="progress-striped">Striped</h3>
30.3065 - <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
30.3066 - <div class="bs-example">
30.3067 - <div class="progress progress-striped" >
30.3068 - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
30.3069 - <span class="sr-only">40% Complete (success)</span>
30.3070 - </div>
30.3071 - </div>
30.3072 - <div class="progress progress-striped">
30.3073 - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
30.3074 - <span class="sr-only">20% Complete</span>
30.3075 - </div>
30.3076 - </div>
30.3077 - <div class="progress progress-striped">
30.3078 - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
30.3079 - <span class="sr-only">60% Complete (warning)</span>
30.3080 - </div>
30.3081 - </div>
30.3082 - <div class="progress progress-striped">
30.3083 - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
30.3084 - <span class="sr-only">80% Complete (danger)</span>
30.3085 - </div>
30.3086 - </div>
30.3087 - </div>
30.3088 -{% highlight html %}
30.3089 -<div class="progress progress-striped">
30.3090 - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
30.3091 - <span class="sr-only">40% Complete (success)</span>
30.3092 - </div>
30.3093 -</div>
30.3094 -<div class="progress progress-striped">
30.3095 - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
30.3096 - <span class="sr-only">20% Complete</span>
30.3097 - </div>
30.3098 -</div>
30.3099 -<div class="progress progress-striped">
30.3100 - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
30.3101 - <span class="sr-only">60% Complete (warning)</span>
30.3102 - </div>
30.3103 -</div>
30.3104 -<div class="progress progress-striped">
30.3105 - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
30.3106 - <span class="sr-only">80% Complete (danger)</span>
30.3107 - </div>
30.3108 -</div>
30.3109 -{% endhighlight %}
30.3110 -
30.3111 - <h3 id="progress-animated">Animated</h3>
30.3112 - <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
30.3113 - <div class="bs-example">
30.3114 - <div class="progress progress-striped active">
30.3115 - <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
30.3116 - </div>
30.3117 - </div>
30.3118 -{% highlight html %}
30.3119 -<div class="progress progress-striped active">
30.3120 - <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
30.3121 - <span class="sr-only">45% Complete</span>
30.3122 - </div>
30.3123 -</div>
30.3124 -{% endhighlight %}
30.3125 -
30.3126 - <h3 id="progress-stacked">Stacked</h3>
30.3127 - <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
30.3128 - <div class="bs-example">
30.3129 - <div class="progress">
30.3130 - <div class="progress-bar progress-bar-success" style="width: 35%">
30.3131 - <span class="sr-only">35% Complete (success)</span>
30.3132 - </div>
30.3133 - <div class="progress-bar progress-bar-warning" style="width: 20%">
30.3134 - <span class="sr-only">20% Complete (warning)</span>
30.3135 - </div>
30.3136 - <div class="progress-bar progress-bar-danger" style="width: 10%">
30.3137 - <span class="sr-only">10% Complete (danger)</span>
30.3138 - </div>
30.3139 - </div>
30.3140 - </div>
30.3141 -{% highlight html %}
30.3142 -<div class="progress">
30.3143 - <div class="progress-bar progress-bar-success" style="width: 35%">
30.3144 - <span class="sr-only">35% Complete (success)</span>
30.3145 - </div>
30.3146 - <div class="progress-bar progress-bar-warning" style="width: 20%">
30.3147 - <span class="sr-only">20% Complete (warning)</span>
30.3148 - </div>
30.3149 - <div class="progress-bar progress-bar-danger" style="width: 10%">
30.3150 - <span class="sr-only">10% Complete (danger)</span>
30.3151 - </div>
30.3152 -</div>
30.3153 -{% endhighlight %}
30.3154 - </div>
30.3155 -
30.3156 -
30.3157 -
30.3158 -
30.3159 - <!-- Media object
30.3160 - ================================================== -->
30.3161 - <div class="bs-docs-section">
30.3162 - <div class="page-header">
30.3163 - <h1 id="media">Media object</h1>
30.3164 - </div>
30.3165 - <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
30.3166 -
30.3167 - <h3 id="media-default">Default media</h3>
30.3168 - <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
30.3169 - <div class="bs-example">
30.3170 - <div class="media">
30.3171 - <a class="pull-left" href="#">
30.3172 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3173 - </a>
30.3174 - <div class="media-body">
30.3175 - <h4 class="media-heading">Media heading</h4>
30.3176 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
30.3177 - </div>
30.3178 - </div>
30.3179 - <div class="media">
30.3180 - <a class="pull-left" href="#">
30.3181 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3182 - </a>
30.3183 - <div class="media-body">
30.3184 - <h4 class="media-heading">Media heading</h4>
30.3185 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
30.3186 - <div class="media">
30.3187 - <a class="pull-left" href="#">
30.3188 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3189 - </a>
30.3190 - <div class="media-body">
30.3191 - <h4 class="media-heading">Nested media heading</h4>
30.3192 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
30.3193 - </div>
30.3194 - </div>
30.3195 - </div>
30.3196 - </div>
30.3197 - </div><!-- /.bs-example -->
30.3198 -{% highlight html %}
30.3199 -<div class="media">
30.3200 - <a class="pull-left" href="#">
30.3201 - <img class="media-object" src="..." alt="...">
30.3202 - </a>
30.3203 - <div class="media-body">
30.3204 - <h4 class="media-heading">Media heading</h4>
30.3205 - ...
30.3206 - </div>
30.3207 -</div>
30.3208 -{% endhighlight %}
30.3209 -
30.3210 - <h3 id="media-list">Media list</h3>
30.3211 - <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
30.3212 - <div class="bs-example">
30.3213 - <ul class="media-list">
30.3214 - <li class="media">
30.3215 - <a class="pull-left" href="#">
30.3216 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3217 - </a>
30.3218 - <div class="media-body">
30.3219 - <h4 class="media-heading">Media heading</h4>
30.3220 - <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
30.3221 - <!-- Nested media object -->
30.3222 - <div class="media">
30.3223 - <a class="pull-left" href="#">
30.3224 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3225 - </a>
30.3226 - <div class="media-body">
30.3227 - <h4 class="media-heading">Nested media heading</h4>
30.3228 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
30.3229 - <!-- Nested media object -->
30.3230 - <div class="media">
30.3231 - <a class="pull-left" href="#">
30.3232 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3233 - </a>
30.3234 - <div class="media-body">
30.3235 - <h4 class="media-heading">Nested media heading</h4>
30.3236 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
30.3237 - </div>
30.3238 - </div>
30.3239 - </div>
30.3240 - </div>
30.3241 - <!-- Nested media object -->
30.3242 - <div class="media">
30.3243 - <a class="pull-left" href="#">
30.3244 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3245 - </a>
30.3246 - <div class="media-body">
30.3247 - <h4 class="media-heading">Nested media heading</h4>
30.3248 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
30.3249 - </div>
30.3250 - </div>
30.3251 - </div>
30.3252 - </li>
30.3253 - <li class="media">
30.3254 - <a class="pull-right" href="#">
30.3255 - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
30.3256 - </a>
30.3257 - <div class="media-body">
30.3258 - <h4 class="media-heading">Media heading</h4>
30.3259 - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
30.3260 - </div>
30.3261 - </li>
30.3262 - </ul>
30.3263 - </div>
30.3264 -{% highlight html %}
30.3265 -<ul class="media-list">
30.3266 - <li class="media">
30.3267 - <a class="pull-left" href="#">
30.3268 - <img class="media-object" src="..." alt="...">
30.3269 - </a>
30.3270 - <div class="media-body">
30.3271 - <h4 class="media-heading">Media heading</h4>
30.3272 - ...
30.3273 - </div>
30.3274 - </li>
30.3275 -</ul>
30.3276 -{% endhighlight %}
30.3277 - </div>
30.3278 -
30.3279 -
30.3280 -
30.3281 - <!-- List group
30.3282 - ================================================== -->
30.3283 - <div class="bs-docs-section">
30.3284 - <div class="page-header">
30.3285 - <h1 id="list-group">List group</h1>
30.3286 - </div>
30.3287 - <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
30.3288 -
30.3289 - <h3 id="list-group-basic">Basic example</h3>
30.3290 - <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
30.3291 - <div class="bs-example">
30.3292 - <ul class="list-group">
30.3293 - <li class="list-group-item">Cras justo odio</li>
30.3294 - <li class="list-group-item">Dapibus ac facilisis in</li>
30.3295 - <li class="list-group-item">Morbi leo risus</li>
30.3296 - <li class="list-group-item">Porta ac consectetur ac</li>
30.3297 - <li class="list-group-item">Vestibulum at eros</li>
30.3298 - </ul>
30.3299 - </div>
30.3300 -{% highlight html %}
30.3301 -<ul class="list-group">
30.3302 - <li class="list-group-item">Cras justo odio</li>
30.3303 - <li class="list-group-item">Dapibus ac facilisis in</li>
30.3304 - <li class="list-group-item">Morbi leo risus</li>
30.3305 - <li class="list-group-item">Porta ac consectetur ac</li>
30.3306 - <li class="list-group-item">Vestibulum at eros</li>
30.3307 -</ul>
30.3308 -{% endhighlight %}
30.3309 -
30.3310 - <h3 id="list-group-badges">Badges</h3>
30.3311 - <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
30.3312 - <div class="bs-example">
30.3313 - <ul class="list-group">
30.3314 - <li class="list-group-item">
30.3315 - <span class="badge">14</span>
30.3316 - Cras justo odio
30.3317 - </li>
30.3318 - <li class="list-group-item">
30.3319 - <span class="badge">2</span>
30.3320 - Dapibus ac facilisis in
30.3321 - </li>
30.3322 - <li class="list-group-item">
30.3323 - <span class="badge">1</span>
30.3324 - Morbi leo risus
30.3325 - </li>
30.3326 - </ul>
30.3327 - </div>
30.3328 -{% highlight html %}
30.3329 -<ul class="list-group">
30.3330 - <li class="list-group-item">
30.3331 - <span class="badge">14</span>
30.3332 - Cras justo odio
30.3333 - </li>
30.3334 -</ul>
30.3335 -{% endhighlight %}
30.3336 -
30.3337 - <h3 id="list-group-linked">Linked items</h3>
30.3338 - <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>
30.3339 - <div class="bs-example">
30.3340 - <div class="list-group">
30.3341 - <a href="#" class="list-group-item active">
30.3342 - Cras justo odio
30.3343 - </a>
30.3344 - <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
30.3345 - <a href="#" class="list-group-item">Morbi leo risus</a>
30.3346 - <a href="#" class="list-group-item">Porta ac consectetur ac</a>
30.3347 - <a href="#" class="list-group-item">Vestibulum at eros</a>
30.3348 - </div>
30.3349 - </div>
30.3350 -{% highlight html %}
30.3351 -<div class="list-group">
30.3352 - <a href="#" class="list-group-item active">
30.3353 - Cras justo odio
30.3354 - </a>
30.3355 - <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
30.3356 - <a href="#" class="list-group-item">Morbi leo risus</a>
30.3357 - <a href="#" class="list-group-item">Porta ac consectetur ac</a>
30.3358 - <a href="#" class="list-group-item">Vestibulum at eros</a>
30.3359 -</div>
30.3360 -{% endhighlight %}
30.3361 -
30.3362 - <h3 id="list-group-custom-content">Custom content</h3>
30.3363 - <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
30.3364 - <div class="bs-example">
30.3365 - <div class="list-group">
30.3366 - <a href="#" class="list-group-item active">
30.3367 - <h4 class="list-group-item-heading">List group item heading</h4>
30.3368 - <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
30.3369 - </a>
30.3370 - <a href="#" class="list-group-item">
30.3371 - <h4 class="list-group-item-heading">List group item heading</h4>
30.3372 - <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
30.3373 - </a>
30.3374 - <a href="#" class="list-group-item">
30.3375 - <h4 class="list-group-item-heading">List group item heading</h4>
30.3376 - <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
30.3377 - </a>
30.3378 - </div>
30.3379 - </div>
30.3380 -{% highlight html %}
30.3381 -<div class="list-group">
30.3382 - <a href="#" class="list-group-item active">
30.3383 - <h4 class="list-group-item-heading">List group item heading</h4>
30.3384 - <p class="list-group-item-text">...</p>
30.3385 - </a>
30.3386 -</div>
30.3387 -{% endhighlight %}
30.3388 - </div>
30.3389 -
30.3390 -
30.3391 -
30.3392 -
30.3393 - <!-- Panels
30.3394 - ================================================== -->
30.3395 - <div class="bs-docs-section">
30.3396 - <div class="page-header">
30.3397 - <h1 id="panels">Panels</h1>
30.3398 - </div>
30.3399 - <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
30.3400 -
30.3401 - <h3 id="panels-basic">Basic example</h3>
30.3402 - <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
30.3403 - <div class="bs-example">
30.3404 - <div class="panel panel-default">
30.3405 - <div class="panel-body">
30.3406 - Basic panel example
30.3407 - </div>
30.3408 - </div>
30.3409 - </div>
30.3410 -{% highlight html %}
30.3411 -<div class="panel panel-default">
30.3412 - <div class="panel-body">
30.3413 - Basic panel example
30.3414 - </div>
30.3415 -</div>
30.3416 -{% endhighlight %}
30.3417 -
30.3418 - <h3 id="panels-heading">Panel with heading</h3>
30.3419 - <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
30.3420 - <div class="bs-example">
30.3421 - <div class="panel panel-default">
30.3422 - <div class="panel-heading">Panel heading without title</div>
30.3423 - <div class="panel-body">
30.3424 - Panel content
30.3425 - </div>
30.3426 - </div>
30.3427 - <div class="panel panel-default">
30.3428 - <div class="panel-heading">
30.3429 - <h3 class="panel-title">Panel title</h3>
30.3430 - </div>
30.3431 - <div class="panel-body">
30.3432 - Panel content
30.3433 - </div>
30.3434 - </div>
30.3435 - </div>
30.3436 -{% highlight html %}
30.3437 -<div class="panel panel-default">
30.3438 - <div class="panel-heading">Panel heading without title</div>
30.3439 - <div class="panel-body">
30.3440 - Panel content
30.3441 - </div>
30.3442 -</div>
30.3443 -
30.3444 -<div class="panel panel-default">
30.3445 - <div class="panel-heading">
30.3446 - <h3 class="panel-title">Panel title</h3>
30.3447 - </div>
30.3448 - <div class="panel-body">
30.3449 - Panel content
30.3450 - </div>
30.3451 -</div>
30.3452 -{% endhighlight %}
30.3453 -
30.3454 - <h3 id="panels-footer">Panel with footer</h3>
30.3455 - <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
30.3456 - <div class="bs-example">
30.3457 - <div class="panel panel-default">
30.3458 - <div class="panel-body">
30.3459 - Panel content
30.3460 - </div>
30.3461 - <div class="panel-footer">Panel footer</div>
30.3462 - </div>
30.3463 - </div>
30.3464 -{% highlight html %}
30.3465 -<div class="panel panel-default">
30.3466 - <div class="panel-body">
30.3467 - Panel content
30.3468 - </div>
30.3469 - <div class="panel-footer">Panel footer</div>
30.3470 -</div>
30.3471 -{% endhighlight %}
30.3472 -
30.3473 - <h3 id="panels-alternatives">Contextual alternatives</h3>
30.3474 - <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
30.3475 - <div class="bs-example">
30.3476 - <div class="panel panel-primary">
30.3477 - <div class="panel-heading">
30.3478 - <h3 class="panel-title">Panel title</h3>
30.3479 - </div>
30.3480 - <div class="panel-body">
30.3481 - Panel content
30.3482 - </div>
30.3483 - </div>
30.3484 - <div class="panel panel-success">
30.3485 - <div class="panel-heading">
30.3486 - <h3 class="panel-title">Panel title</h3>
30.3487 - </div>
30.3488 - <div class="panel-body">
30.3489 - Panel content
30.3490 - </div>
30.3491 - </div>
30.3492 - <div class="panel panel-info">
30.3493 - <div class="panel-heading">
30.3494 - <h3 class="panel-title">Panel title</h3>
30.3495 - </div>
30.3496 - <div class="panel-body">
30.3497 - Panel content
30.3498 - </div>
30.3499 - </div>
30.3500 - <div class="panel panel-warning">
30.3501 - <div class="panel-heading">
30.3502 - <h3 class="panel-title">Panel title</h3>
30.3503 - </div>
30.3504 - <div class="panel-body">
30.3505 - Panel content
30.3506 - </div>
30.3507 - </div>
30.3508 - <div class="panel panel-danger">
30.3509 - <div class="panel-heading">
30.3510 - <h3 class="panel-title">Panel title</h3>
30.3511 - </div>
30.3512 - <div class="panel-body">
30.3513 - Panel content
30.3514 - </div>
30.3515 - </div>
30.3516 - </div>
30.3517 -{% highlight html %}
30.3518 -<div class="panel panel-primary">...</div>
30.3519 -<div class="panel panel-success">...</div>
30.3520 -<div class="panel panel-info">...</div>
30.3521 -<div class="panel panel-warning">...</div>
30.3522 -<div class="panel panel-danger">...</div>
30.3523 -{% endhighlight %}
30.3524 -
30.3525 - <h3 id="panels-tables">With tables</h3>
30.3526 - <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
30.3527 - <div class="bs-example">
30.3528 - <div class="panel panel-default">
30.3529 - <!-- Default panel contents -->
30.3530 - <div class="panel-heading">Panel heading</div>
30.3531 - <div class="panel-body">
30.3532 - <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
30.3533 - </div>
30.3534 -
30.3535 - <!-- Table -->
30.3536 - <table class="table">
30.3537 - <thead>
30.3538 - <tr>
30.3539 - <th>#</th>
30.3540 - <th>First Name</th>
30.3541 - <th>Last Name</th>
30.3542 - <th>Username</th>
30.3543 - </tr>
30.3544 - </thead>
30.3545 - <tbody>
30.3546 - <tr>
30.3547 - <td>1</td>
30.3548 - <td>Mark</td>
30.3549 - <td>Otto</td>
30.3550 - <td>@mdo</td>
30.3551 - </tr>
30.3552 - <tr>
30.3553 - <td>2</td>
30.3554 - <td>Jacob</td>
30.3555 - <td>Thornton</td>
30.3556 - <td>@fat</td>
30.3557 - </tr>
30.3558 - <tr>
30.3559 - <td>3</td>
30.3560 - <td>Larry</td>
30.3561 - <td>the Bird</td>
30.3562 - <td>@twitter</td>
30.3563 - </tr>
30.3564 - </tbody>
30.3565 - </table>
30.3566 - </div>
30.3567 - </div>
30.3568 -{% highlight html %}
30.3569 -<div class="panel panel-default">
30.3570 - <!-- Default panel contents -->
30.3571 - <div class="panel-heading">Panel heading</div>
30.3572 - <div class="panel-body">
30.3573 - <p>...</p>
30.3574 - </div>
30.3575 -
30.3576 - <!-- Table -->
30.3577 - <table class="table">
30.3578 - ...
30.3579 - </table>
30.3580 -</div>
30.3581 -{% endhighlight %}
30.3582 -
30.3583 - <p>If there is no panel body, the component moves from panel header to table without interruption.</p>
30.3584 - <div class="bs-example">
30.3585 - <div class="panel panel-default">
30.3586 - <!-- Default panel contents -->
30.3587 - <div class="panel-heading">Panel heading</div>
30.3588 -
30.3589 - <!-- Table -->
30.3590 - <table class="table">
30.3591 - <thead>
30.3592 - <tr>
30.3593 - <th>#</th>
30.3594 - <th>First Name</th>
30.3595 - <th>Last Name</th>
30.3596 - <th>Username</th>
30.3597 - </tr>
30.3598 - </thead>
30.3599 - <tbody>
30.3600 - <tr>
30.3601 - <td>1</td>
30.3602 - <td>Mark</td>
30.3603 - <td>Otto</td>
30.3604 - <td>@mdo</td>
30.3605 - </tr>
30.3606 - <tr>
30.3607 - <td>2</td>
30.3608 - <td>Jacob</td>
30.3609 - <td>Thornton</td>
30.3610 - <td>@fat</td>
30.3611 - </tr>
30.3612 - <tr>
30.3613 - <td>3</td>
30.3614 - <td>Larry</td>
30.3615 - <td>the Bird</td>
30.3616 - <td>@twitter</td>
30.3617 - </tr>
30.3618 - </tbody>
30.3619 - </table>
30.3620 - </div>
30.3621 - </div>
30.3622 -{% highlight html %}
30.3623 -<div class="panel panel-default">
30.3624 - <!-- Default panel contents -->
30.3625 - <div class="panel-heading">Panel heading</div>
30.3626 -
30.3627 - <!-- Table -->
30.3628 - <table class="table">
30.3629 - ...
30.3630 - </table>
30.3631 -</div>
30.3632 -{% endhighlight %}
30.3633 -
30.3634 -
30.3635 -
30.3636 - <h3 id="panels-list-group">With list groups</h3>
30.3637 - <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
30.3638 - <div class="bs-example">
30.3639 - <div class="panel panel-default">
30.3640 - <!-- Default panel contents -->
30.3641 - <div class="panel-heading">Panel heading</div>
30.3642 - <div class="panel-body">
30.3643 - <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
30.3644 - </div>
30.3645 -
30.3646 - <!-- List group -->
30.3647 - <ul class="list-group">
30.3648 - <li class="list-group-item">Cras justo odio</li>
30.3649 - <li class="list-group-item">Dapibus ac facilisis in</li>
30.3650 - <li class="list-group-item">Morbi leo risus</li>
30.3651 - <li class="list-group-item">Porta ac consectetur ac</li>
30.3652 - <li class="list-group-item">Vestibulum at eros</li>
30.3653 - </ul>
30.3654 - </div>
30.3655 - </div>
30.3656 -{% highlight html %}
30.3657 -<div class="panel panel-default">
30.3658 - <!-- Default panel contents -->
30.3659 - <div class="panel-heading">Panel heading</div>
30.3660 - <div class="panel-body">
30.3661 - <p>...</p>
30.3662 - </div>
30.3663 -
30.3664 - <!-- List group -->
30.3665 - <ul class="list-group">
30.3666 - <li class="list-group-item">Cras justo odio</li>
30.3667 - <li class="list-group-item">Dapibus ac facilisis in</li>
30.3668 - <li class="list-group-item">Morbi leo risus</li>
30.3669 - <li class="list-group-item">Porta ac consectetur ac</li>
30.3670 - <li class="list-group-item">Vestibulum at eros</li>
30.3671 - </ul>
30.3672 -</div>
30.3673 -{% endhighlight %}
30.3674 -
30.3675 - </div>
30.3676 -
30.3677 -
30.3678 -
30.3679 -
30.3680 -
30.3681 - <!-- Wells
30.3682 - ================================================== -->
30.3683 - <div class="bs-docs-section">
30.3684 - <div class="page-header">
30.3685 - <h1 id="wells">Wells</h1>
30.3686 - </div>
30.3687 -
30.3688 - <h3>Default well</h3>
30.3689 - <p>Use the well as a simple effect on an element to give it an inset effect.</p>
30.3690 - <div class="bs-example">
30.3691 - <div class="well">
30.3692 - Look, I'm in a well!
30.3693 - </div>
30.3694 - </div>
30.3695 -{% highlight html %}
30.3696 -<div class="well">...</div>
30.3697 -{% endhighlight %}
30.3698 - <h3>Optional classes</h3>
30.3699 - <p>Control padding and rounded corners with two optional modifier classes.</p>
30.3700 - <div class="bs-example">
30.3701 - <div class="well well-lg">
30.3702 - Look, I'm in a large well!
30.3703 - </div>
30.3704 - </div>
30.3705 -{% highlight html %}
30.3706 -<div class="well well-lg">...</div>
30.3707 -{% endhighlight %}
30.3708 -
30.3709 - <div class="bs-example">
30.3710 - <div class="well well-sm">
30.3711 - Look, I'm in a small well!
30.3712 - </div>
30.3713 - </div>
30.3714 -{% highlight html %}
30.3715 -<div class="well well-sm">...</div>
30.3716 -{% endhighlight %}
30.3717 - </div>
31.1 --- a/bootstrap-source/bootstrap-3.0.3/composer.json Sat Jan 18 12:34:36 2014 +0100
31.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
31.3 @@ -1,25 +0,0 @@
31.4 -{
31.5 - "name": "twbs/bootstrap"
31.6 - , "description": "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
31.7 - , "keywords": ["bootstrap", "css"]
31.8 - , "homepage": "http://getbootstrap.com"
31.9 - , "authors": [
31.10 - {
31.11 - "name": "Mark Otto",
31.12 - "email": "markdotto@gmail.com"
31.13 - },
31.14 - {
31.15 - "name": "Jacob Thornton",
31.16 - "email": "jacobthornton@gmail.com"
31.17 - }
31.18 - ]
31.19 - , "support": {
31.20 - "issues": "https://github.com/twbs/bootstrap/issues"
31.21 - }
31.22 - , "license": "Apache-2.0"
31.23 - , "extra": {
31.24 - "branch-alias": {
31.25 - "dev-master": "3.0.x-dev"
31.26 - }
31.27 - }
31.28 -}
32.1 --- a/bootstrap-source/bootstrap-3.0.3/css.html Sat Jan 18 12:34:36 2014 +0100
32.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
32.3 @@ -1,2673 +0,0 @@
32.4 ----
32.5 -layout: default
32.6 -title: CSS
32.7 -slug: css
32.8 -lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
32.9 -base_url: "../"
32.10 ----
32.11 -
32.12 -
32.13 - <!-- Global Bootstrap settings
32.14 - ================================================== -->
32.15 - <div class="bs-docs-section">
32.16 - <div class="page-header">
32.17 - <h1 id="overview">Overview</h1>
32.18 - </div>
32.19 - <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
32.20 -
32.21 - <h3 id="overview-doctype">HTML5 doctype</h3>
32.22 - <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
32.23 -{% highlight html %}
32.24 -<!DOCTYPE html>
32.25 -<html lang="en">
32.26 - ...
32.27 -</html>
32.28 -{% endhighlight %}
32.29 -
32.30 - <h3 id="overview-mobile">Mobile first</h3>
32.31 - <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
32.32 - <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
32.33 -{% highlight html %}
32.34 -<meta name="viewport" content="width=device-width, initial-scale=1.0">
32.35 -{% endhighlight %}
32.36 - <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
32.37 -{% highlight html %}
32.38 -<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
32.39 -{% endhighlight %}
32.40 -
32.41 - <h3 id="overview-responsive-images">Responsive images</h3>
32.42 - <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
32.43 -{% highlight html %}
32.44 -<img src="..." class="img-responsive" alt="Responsive image">
32.45 -{% endhighlight %}
32.46 -
32.47 - <h3 id="overview-type-links">Typography and links</h3>
32.48 - <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
32.49 - <ul>
32.50 - <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
32.51 - <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
32.52 - <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
32.53 - </ul>
32.54 - <p>These styles can be found within <code>scaffolding.less</code>.</p>
32.55 -
32.56 - <h3 id="overview-normalize">Normalize</h3>
32.57 - <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
32.58 -
32.59 - <h3 id="overview-container">Containers</h3>
32.60 - <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
32.61 - <p>Note that, due to <code>padding</code> and fixed widths, containers are not nestable by default.</p>
32.62 -{% highlight html %}
32.63 -<div class="container">
32.64 - ...
32.65 -</div>
32.66 -{% endhighlight %}
32.67 - </div>
32.68 -
32.69 -
32.70 -
32.71 - <!-- Grid system
32.72 - ================================================== -->
32.73 - <div class="bs-docs-section">
32.74 - <div class="page-header">
32.75 - <h1 id="grid">Grid system</h1>
32.76 - </div>
32.77 - <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
32.78 -
32.79 - <h3 id="grid-intro">Introduction</h3>
32.80 - <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
32.81 - <ul>
32.82 - <li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li>
32.83 - <li>Use rows to create horizontal groups of columns.</li>
32.84 - <li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
32.85 - <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
32.86 - <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
32.87 - <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
32.88 - </ul>
32.89 - <p>Look to the examples for applying these principles to your code.</p>
32.90 -
32.91 - <div class="bs-callout bs-callout-info">
32.92 - <h4>Grids and full-width layouts</h4>
32.93 - <p>Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with <code>padding: 0 15px;</code> to offset the <code>margin: 0 -15px;</code> used on <code>.row</code>s.</p>
32.94 - </div>
32.95 -
32.96 - <h3 id="grid-media-queries">Media queries</h3>
32.97 - <p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p>
32.98 -{% highlight css %}
32.99 -/* Extra small devices (phones, less than 768px) */
32.100 -/* No media query since this is the default in Bootstrap */
32.101 -
32.102 -/* Small devices (tablets, 768px and up) */
32.103 -@media (min-width: @screen-sm-min) { ... }
32.104 -
32.105 -/* Medium devices (desktops, 992px and up) */
32.106 -@media (min-width: @screen-md-min) { ... }
32.107 -
32.108 -/* Large devices (large desktops, 1200px and up) */
32.109 -@media (min-width: @screen-lg-min) { ... }
32.110 -{% endhighlight %}
32.111 - <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
32.112 -{% highlight css %}
32.113 -@media (max-width: @screen-xs-max) { ... }
32.114 -@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
32.115 -@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
32.116 -@media (min-width: @screen-lg-min) { ... }
32.117 -{% endhighlight %}
32.118 -
32.119 - <h3 id="grid-options">Grid options</h3>
32.120 - <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
32.121 - <div class="table-responsive">
32.122 - <table class="table table-bordered table-striped">
32.123 - <thead>
32.124 - <tr>
32.125 - <th></th>
32.126 - <th>
32.127 - Extra small devices
32.128 - <small>Phones (<768px)</small>
32.129 - </th>
32.130 - <th>
32.131 - Small devices
32.132 - <small>Tablets (≥768px)</small>
32.133 - </th>
32.134 - <th>
32.135 - Medium devices
32.136 - <small>Desktops (≥992px)</small>
32.137 - </th>
32.138 - <th>
32.139 - Large devices
32.140 - <small>Desktops (≥1200px)</small>
32.141 - </th>
32.142 - </tr>
32.143 - </thead>
32.144 - <tbody>
32.145 - <tr>
32.146 - <th>Grid behavior</th>
32.147 - <td>Horizontal at all times</td>
32.148 - <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
32.149 - </tr>
32.150 - <tr>
32.151 - <th>Max container width</th>
32.152 - <td>None (auto)</td>
32.153 - <td>750px</td>
32.154 - <td>970px</td>
32.155 - <td>1170px</td>
32.156 - </tr>
32.157 - <tr>
32.158 - <th>Class prefix</th>
32.159 - <td><code>.col-xs-</code></td>
32.160 - <td><code>.col-sm-</code></td>
32.161 - <td><code>.col-md-</code></td>
32.162 - <td><code>.col-lg-</code></td>
32.163 - </tr>
32.164 - <tr>
32.165 - <th># of columns</th>
32.166 - <td colspan="4">12</td>
32.167 - </tr>
32.168 - <tr>
32.169 - <th>Max column width</th>
32.170 - <td class="text-muted">Auto</td>
32.171 - <td>60px</td>
32.172 - <td>78px</td>
32.173 - <td>95px</td>
32.174 - </tr>
32.175 - <tr>
32.176 - <th>Gutter width</th>
32.177 - <td colspan="4">30px (15px on each side of a column)</td>
32.178 - </tr>
32.179 - <tr>
32.180 - <th>Nestable</th>
32.181 - <td colspan="4">Yes</td>
32.182 - </tr>
32.183 - <tr>
32.184 - <th>Offsets</th>
32.185 - <td colspan="4">Yes</td>
32.186 - </tr>
32.187 - <tr>
32.188 - <th>Column ordering</th>
32.189 - <td colspan="4">Yes</td>
32.190 - </tr>
32.191 - </tbody>
32.192 - </table>
32.193 - </div>
32.194 - <p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p>
32.195 -
32.196 - <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
32.197 - <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
32.198 - <div class="bs-docs-grid">
32.199 - <div class="row show-grid">
32.200 - <div class="col-md-1">.col-md-1</div>
32.201 - <div class="col-md-1">.col-md-1</div>
32.202 - <div class="col-md-1">.col-md-1</div>
32.203 - <div class="col-md-1">.col-md-1</div>
32.204 - <div class="col-md-1">.col-md-1</div>
32.205 - <div class="col-md-1">.col-md-1</div>
32.206 - <div class="col-md-1">.col-md-1</div>
32.207 - <div class="col-md-1">.col-md-1</div>
32.208 - <div class="col-md-1">.col-md-1</div>
32.209 - <div class="col-md-1">.col-md-1</div>
32.210 - <div class="col-md-1">.col-md-1</div>
32.211 - <div class="col-md-1">.col-md-1</div>
32.212 - </div>
32.213 - <div class="row show-grid">
32.214 - <div class="col-md-8">.col-md-8</div>
32.215 - <div class="col-md-4">.col-md-4</div>
32.216 - </div>
32.217 - <div class="row show-grid">
32.218 - <div class="col-md-4">.col-md-4</div>
32.219 - <div class="col-md-4">.col-md-4</div>
32.220 - <div class="col-md-4">.col-md-4</div>
32.221 - </div>
32.222 - <div class="row show-grid">
32.223 - <div class="col-md-6">.col-md-6</div>
32.224 - <div class="col-md-6">.col-md-6</div>
32.225 - </div>
32.226 - </div>
32.227 -{% highlight html %}
32.228 -<div class="row">
32.229 - <div class="col-md-1">.col-md-1</div>
32.230 - <div class="col-md-1">.col-md-1</div>
32.231 - <div class="col-md-1">.col-md-1</div>
32.232 - <div class="col-md-1">.col-md-1</div>
32.233 - <div class="col-md-1">.col-md-1</div>
32.234 - <div class="col-md-1">.col-md-1</div>
32.235 - <div class="col-md-1">.col-md-1</div>
32.236 - <div class="col-md-1">.col-md-1</div>
32.237 - <div class="col-md-1">.col-md-1</div>
32.238 - <div class="col-md-1">.col-md-1</div>
32.239 - <div class="col-md-1">.col-md-1</div>
32.240 - <div class="col-md-1">.col-md-1</div>
32.241 -</div>
32.242 -<div class="row">
32.243 - <div class="col-md-8">.col-md-8</div>
32.244 - <div class="col-md-4">.col-md-4</div>
32.245 -</div>
32.246 -<div class="row">
32.247 - <div class="col-md-4">.col-md-4</div>
32.248 - <div class="col-md-4">.col-md-4</div>
32.249 - <div class="col-md-4">.col-md-4</div>
32.250 -</div>
32.251 -<div class="row">
32.252 - <div class="col-md-6">.col-md-6</div>
32.253 - <div class="col-md-6">.col-md-6</div>
32.254 -</div>
32.255 -{% endhighlight %}
32.256 -
32.257 - <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
32.258 - <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
32.259 - <div class="bs-docs-grid">
32.260 - <div class="row show-grid">
32.261 - <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
32.262 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.263 - </div>
32.264 - <div class="row show-grid">
32.265 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.266 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.267 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.268 - </div>
32.269 - <div class="row show-grid">
32.270 - <div class="col-xs-6">.col-xs-6</div>
32.271 - <div class="col-xs-6">.col-xs-6</div>
32.272 - </div>
32.273 - </div>
32.274 -{% highlight html %}
32.275 -<!-- Stack the columns on mobile by making one full-width and the other half-width -->
32.276 -<div class="row">
32.277 - <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
32.278 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.279 -</div>
32.280 -
32.281 -<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
32.282 -<div class="row">
32.283 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.284 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.285 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.286 -</div>
32.287 -
32.288 -<!-- Columns are always 50% wide, on mobile and desktop -->
32.289 -<div class="row">
32.290 - <div class="col-xs-6">.col-xs-6</div>
32.291 - <div class="col-xs-6">.col-xs-6</div>
32.292 -</div>
32.293 -{% endhighlight %}
32.294 -
32.295 - <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
32.296 - <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
32.297 - <div class="bs-docs-grid">
32.298 - <div class="row show-grid">
32.299 - <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
32.300 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.301 - </div>
32.302 - <div class="row show-grid">
32.303 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.304 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.305 - <!-- Optional: clear the XS cols if their content doesn't match in height -->
32.306 - <div class="clearfix visible-xs"></div>
32.307 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.308 - </div>
32.309 - </div>
32.310 -{% highlight html %}
32.311 -<div class="row">
32.312 - <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
32.313 - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
32.314 -</div>
32.315 -<div class="row">
32.316 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.317 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.318 - <!-- Optional: clear the XS cols if their content doesn't match in height -->
32.319 - <div class="clearfix visible-xs"></div>
32.320 - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
32.321 -</div>
32.322 -{% endhighlight %}
32.323 -
32.324 - <h3 id="grid-responsive-resets">Responsive column resets</h3>
32.325 - <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p>
32.326 -<div class="bs-docs-grid">
32.327 - <div class="row show-grid">
32.328 - <div class="col-xs-6 col-sm-3">
32.329 - .col-xs-6 .col-sm-3
32.330 - <br>
32.331 - Resize your viewport or check it out on your phone for an example.
32.332 - </div>
32.333 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.334 -
32.335 - <!-- Add the extra clearfix for only the required viewport -->
32.336 - <div class="clearfix visible-xs"></div>
32.337 -
32.338 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.339 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.340 - </div>
32.341 -</div>
32.342 -{% highlight html %}
32.343 -<div class="row">
32.344 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.345 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.346 -
32.347 - <!-- Add the extra clearfix for only the required viewport -->
32.348 - <div class="clearfix visible-xs"></div>
32.349 -
32.350 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.351 - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32.352 -</div>
32.353 -{% endhighlight %}
32.354 - <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
32.355 -{% highlight html %}
32.356 -<div class="row">
32.357 - <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
32.358 - <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
32.359 -</div>
32.360 -
32.361 -<div class="row">
32.362 - <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
32.363 - <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
32.364 -</div>
32.365 -{% endhighlight %}
32.366 -
32.367 -
32.368 - <h3 id="grid-offsetting">Offsetting columns</h3>
32.369 - <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
32.370 - <div class="bs-docs-grid">
32.371 - <div class="row show-grid">
32.372 - <div class="col-md-4">.col-md-4</div>
32.373 - <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
32.374 - </div>
32.375 - <div class="row show-grid">
32.376 - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
32.377 - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
32.378 - </div>
32.379 - <div class="row show-grid">
32.380 - <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
32.381 - </div>
32.382 - </div>
32.383 -{% highlight html %}
32.384 -<div class="row">
32.385 - <div class="col-md-4">.col-md-4</div>
32.386 - <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
32.387 -</div>
32.388 -<div class="row">
32.389 - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
32.390 - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
32.391 -</div>
32.392 -<div class="row">
32.393 - <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
32.394 -</div>
32.395 -{% endhighlight %}
32.396 -
32.397 -
32.398 - <h3 id="grid-nesting">Nesting columns</h3>
32.399 - <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
32.400 - <div class="row show-grid">
32.401 - <div class="col-md-9">
32.402 - Level 1: .col-md-9
32.403 - <div class="row show-grid">
32.404 - <div class="col-md-6">
32.405 - Level 2: .col-md-6
32.406 - </div>
32.407 - <div class="col-md-6">
32.408 - Level 2: .col-md-6
32.409 - </div>
32.410 - </div>
32.411 - </div>
32.412 - </div>
32.413 -{% highlight html %}
32.414 -<div class="row">
32.415 - <div class="col-md-9">
32.416 - Level 1: .col-md-9
32.417 - <div class="row">
32.418 - <div class="col-md-6">
32.419 - Level 2: .col-md-6
32.420 - </div>
32.421 - <div class="col-md-6">
32.422 - Level 2: .col-md-6
32.423 - </div>
32.424 - </div>
32.425 - </div>
32.426 -</div>
32.427 -{% endhighlight %}
32.428 -
32.429 - <h3 id="grid-column-ordering">Column ordering</h3>
32.430 - <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
32.431 - <div class="row show-grid">
32.432 - <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
32.433 - <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
32.434 - </div>
32.435 -
32.436 -{% highlight html %}
32.437 -<div class="row">
32.438 - <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
32.439 - <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
32.440 -</div>
32.441 -{% endhighlight %}
32.442 -
32.443 - <h3 id="grid-less">LESS mixins and variables</h3>
32.444 - <p>In addition to <a href="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
32.445 -
32.446 - <h4>Variables</h4>
32.447 - <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
32.448 -{% highlight css %}
32.449 -@grid-columns: 12;
32.450 -@grid-gutter-width: 30px;
32.451 -@grid-float-breakpoint: 768px;
32.452 -{% endhighlight %}
32.453 -
32.454 - <h4>Mixins</h4>
32.455 - <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
32.456 -{% highlight css %}
32.457 -// Creates a wrapper for a series of columns
32.458 -.make-row(@gutter: @grid-gutter-width) {
32.459 - // Then clear the floated columns
32.460 - .clearfix();
32.461 -
32.462 - @media (min-width: @screen-sm-min) {
32.463 - margin-left: (@gutter / -2);
32.464 - margin-right: (@gutter / -2);
32.465 - }
32.466 -
32.467 - // Negative margin nested rows out to align the content of columns
32.468 - .row {
32.469 - margin-left: (@gutter / -2);
32.470 - margin-right: (@gutter / -2);
32.471 - }
32.472 -}
32.473 -
32.474 -// Generate the extra small columns
32.475 -.make-xs-column(@columns; @gutter: @grid-gutter-width) {
32.476 - position: relative;
32.477 - // Prevent columns from collapsing when empty
32.478 - min-height: 1px;
32.479 - // Inner gutter via padding
32.480 - padding-left: (@gutter / 2);
32.481 - padding-right: (@gutter / 2);
32.482 -
32.483 - // Calculate width based on number of columns available
32.484 - @media (min-width: @grid-float-breakpoint) {
32.485 - float: left;
32.486 - width: percentage((@columns / @grid-columns));
32.487 - }
32.488 -}
32.489 -
32.490 -// Generate the small columns
32.491 -.make-sm-column(@columns; @gutter: @grid-gutter-width) {
32.492 - position: relative;
32.493 - // Prevent columns from collapsing when empty
32.494 - min-height: 1px;
32.495 - // Inner gutter via padding
32.496 - padding-left: (@gutter / 2);
32.497 - padding-right: (@gutter / 2);
32.498 -
32.499 - // Calculate width based on number of columns available
32.500 - @media (min-width: @screen-sm-min) {
32.501 - float: left;
32.502 - width: percentage((@columns / @grid-columns));
32.503 - }
32.504 -}
32.505 -
32.506 -// Generate the small column offsets
32.507 -.make-sm-column-offset(@columns) {
32.508 - @media (min-width: @screen-sm-min) {
32.509 - margin-left: percentage((@columns / @grid-columns));
32.510 - }
32.511 -}
32.512 -.make-sm-column-push(@columns) {
32.513 - @media (min-width: @screen-sm-min) {
32.514 - left: percentage((@columns / @grid-columns));
32.515 - }
32.516 -}
32.517 -.make-sm-column-pull(@columns) {
32.518 - @media (min-width: @screen-sm-min) {
32.519 - right: percentage((@columns / @grid-columns));
32.520 - }
32.521 -}
32.522 -
32.523 -// Generate the medium columns
32.524 -.make-md-column(@columns; @gutter: @grid-gutter-width) {
32.525 - position: relative;
32.526 - // Prevent columns from collapsing when empty
32.527 - min-height: 1px;
32.528 - // Inner gutter via padding
32.529 - padding-left: (@gutter / 2);
32.530 - padding-right: (@gutter / 2);
32.531 -
32.532 - // Calculate width based on number of columns available
32.533 - @media (min-width: @screen-md-min) {
32.534 - float: left;
32.535 - width: percentage((@columns / @grid-columns));
32.536 - }
32.537 -}
32.538 -
32.539 -// Generate the medium column offsets
32.540 -.make-md-column-offset(@columns) {
32.541 - @media (min-width: @screen-md-min) {
32.542 - margin-left: percentage((@columns / @grid-columns));
32.543 - }
32.544 -}
32.545 -.make-md-column-push(@columns) {
32.546 - @media (min-width: @screen-md-min) {
32.547 - left: percentage((@columns / @grid-columns));
32.548 - }
32.549 -}
32.550 -.make-md-column-pull(@columns) {
32.551 - @media (min-width: @screen-md-min) {
32.552 - right: percentage((@columns / @grid-columns));
32.553 - }
32.554 -}
32.555 -
32.556 -// Generate the large columns
32.557 -.make-lg-column(@columns; @gutter: @grid-gutter-width) {
32.558 - position: relative;
32.559 - // Prevent columns from collapsing when empty
32.560 - min-height: 1px;
32.561 - // Inner gutter via padding
32.562 - padding-left: (@gutter / 2);
32.563 - padding-right: (@gutter / 2);
32.564 -
32.565 - // Calculate width based on number of columns available
32.566 - @media (min-width: @screen-lg-min) {
32.567 - float: left;
32.568 - width: percentage((@columns / @grid-columns));
32.569 - }
32.570 -}
32.571 -
32.572 -// Generate the large column offsets
32.573 -.make-lg-column-offset(@columns) {
32.574 - @media (min-width: @screen-lg-min) {
32.575 - margin-left: percentage((@columns / @grid-columns));
32.576 - }
32.577 -}
32.578 -.make-lg-column-push(@columns) {
32.579 - @media (min-width: @screen-lg-min) {
32.580 - left: percentage((@columns / @grid-columns));
32.581 - }
32.582 -}
32.583 -.make-lg-column-pull(@columns) {
32.584 - @media (min-width: @screen-lg-min) {
32.585 - right: percentage((@columns / @grid-columns));
32.586 - }
32.587 -}
32.588 -{% endhighlight %}
32.589 -
32.590 - <h4>Example usage</h4>
32.591 - <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
32.592 -{% highlight css %}
32.593 -.wrapper {
32.594 - .make-row();
32.595 -}
32.596 -.content-main {
32.597 - .make-lg-column(8);
32.598 -}
32.599 -.content-secondary {
32.600 - .make-lg-column(3);
32.601 - .make-lg-column-offset(1);
32.602 -}
32.603 -{% endhighlight %}
32.604 -{% highlight html %}
32.605 -<div class="wrapper">
32.606 - <div class="content-main">...</div>
32.607 - <div class="content-secondary">...</div>
32.608 -</div>
32.609 -{% endhighlight %}
32.610 -
32.611 - </div>
32.612 -
32.613 -
32.614 -
32.615 -
32.616 - <!-- Typography
32.617 - ================================================== -->
32.618 - <div class="bs-docs-section">
32.619 - <div class="page-header">
32.620 - <h1 id="type">Typography</h1>
32.621 - </div>
32.622 -
32.623 - <!-- Headings -->
32.624 - <h2 id="type-headings">Headings</h2>
32.625 - <p>All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
32.626 - <div class="bs-example bs-example-type">
32.627 - <table class="table">
32.628 - <tbody>
32.629 - <tr>
32.630 - <td><h1>h1. Bootstrap heading</h1></td>
32.631 - <td class="info">Semibold 36px</td>
32.632 - </tr>
32.633 - <tr>
32.634 - <td><h2>h2. Bootstrap heading</h2></td>
32.635 - <td class="info">Semibold 30px</td>
32.636 - </tr>
32.637 - <tr>
32.638 - <td><h3>h3. Bootstrap heading</h3></td>
32.639 - <td class="info">Semibold 24px</td>
32.640 - </tr>
32.641 - <tr>
32.642 - <td><h4>h4. Bootstrap heading</h4></td>
32.643 - <td class="info">Semibold 18px</td>
32.644 - </tr>
32.645 - <tr>
32.646 - <td><h5>h5. Bootstrap heading</h5></td>
32.647 - <td class="info">Semibold 14px</td>
32.648 - </tr>
32.649 - <tr>
32.650 - <td><h6>h6. Bootstrap heading</h6></td>
32.651 - <td class="info">Semibold 12px</td>
32.652 - </tr>
32.653 - </tbody>
32.654 - </table>
32.655 - </div>
32.656 -{% highlight html %}
32.657 -<h1>h1. Bootstrap heading</h1>
32.658 -<h2>h2. Bootstrap heading</h2>
32.659 -<h3>h3. Bootstrap heading</h3>
32.660 -<h4>h4. Bootstrap heading</h4>
32.661 -<h5>h5. Bootstrap heading</h5>
32.662 -<h6>h6. Bootstrap heading</h6>
32.663 -{% endhighlight %}
32.664 -
32.665 - <p>Create lighter, secondary text in any heading with a generic <code><small></code> tag or the <code>.small</code> class.</p>
32.666 - <div class="bs-example bs-example-type">
32.667 - <table class="table">
32.668 - <tbody>
32.669 - <tr>
32.670 - <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
32.671 - </tr>
32.672 - <tr>
32.673 - <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
32.674 - </tr>
32.675 - <tr>
32.676 - <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
32.677 - </tr>
32.678 - <tr>
32.679 - <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
32.680 - </tr>
32.681 - <tr>
32.682 - <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
32.683 - </tr>
32.684 - <tr>
32.685 - <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
32.686 - </tr>
32.687 - </tbody>
32.688 - </table>
32.689 - </div>
32.690 -{% highlight html %}
32.691 -<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
32.692 -<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
32.693 -<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
32.694 -<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
32.695 -<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
32.696 -<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
32.697 -{% endhighlight %}
32.698 -
32.699 -
32.700 - <!-- Body copy -->
32.701 - <h2 id="type-body-copy">Body copy</h2>
32.702 - <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
32.703 - <div class="bs-example">
32.704 - <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
32.705 - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
32.706 - <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
32.707 - </div>
32.708 -{% highlight html %}
32.709 -<p>...</p>
32.710 -{% endhighlight %}
32.711 -
32.712 - <!-- Body copy .lead -->
32.713 - <h3>Lead body copy</h3>
32.714 - <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
32.715 - <div class="bs-example">
32.716 - <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
32.717 - </div>
32.718 -{% highlight html %}
32.719 -<p class="lead">...</p>
32.720 -{% endhighlight %}
32.721 -
32.722 - <!-- Using LESS -->
32.723 - <h3>Built with Less</h3>
32.724 - <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
32.725 -
32.726 -
32.727 - <!-- Emphasis -->
32.728 - <h2 id="type-emphasis">Emphasis</h2>
32.729 - <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
32.730 -
32.731 - <h3>Small text</h3>
32.732 - <p>For de-emphasizing inline or blocks of text, use the <code><small></code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code><small></code> elements.</p>
32.733 - <p>You may alternatively use an inline element with <code>.small</code> in place of any <code><small></code></p>
32.734 - <div class="bs-example">
32.735 - <p><small>This line of text is meant to be treated as fine print.</small></p>
32.736 - </div>
32.737 -{% highlight html %}
32.738 -<small>This line of text is meant to be treated as fine print.</small>
32.739 -{% endhighlight %}
32.740 -
32.741 -
32.742 - <h3>Bold</h3>
32.743 - <p>For emphasizing a snippet of text with a heavier font-weight.</p>
32.744 - <div class="bs-example">
32.745 - <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
32.746 - </div>
32.747 -{% highlight html %}
32.748 -<strong>rendered as bold text</strong>
32.749 -{% endhighlight %}
32.750 -
32.751 - <h3>Italics</h3>
32.752 - <p>For emphasizing a snippet of text with italics.</p>
32.753 - <div class="bs-example">
32.754 - <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
32.755 - </div>
32.756 -{% highlight html %}
32.757 -<em>rendered as italicized text</em>
32.758 -{% endhighlight %}
32.759 -
32.760 - <div class="bs-callout bs-callout-info">
32.761 - <h4>Alternate elements</h4>
32.762 - <p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
32.763 - </div>
32.764 -
32.765 - <h3>Alignment classes</h3>
32.766 - <p>Easily realign text to components with text alignment classes.</p>
32.767 - <div class="bs-example">
32.768 - <p class="text-left">Left aligned text.</p>
32.769 - <p class="text-center">Center aligned text.</p>
32.770 - <p class="text-right">Right aligned text.</p>
32.771 - </div>
32.772 -{% highlight html %}
32.773 -<p class="text-left">Left aligned text.</p>
32.774 -<p class="text-center">Center aligned text.</p>
32.775 -<p class="text-right">Right aligned text.</p>
32.776 -{% endhighlight %}
32.777 -
32.778 - <h3>Emphasis classes</h3>
32.779 - <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
32.780 - <div class="bs-example">
32.781 - <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
32.782 - <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
32.783 - <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
32.784 - <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
32.785 - <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
32.786 - <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
32.787 - </div>
32.788 -{% highlight html %}
32.789 -<p class="text-muted">...</p>
32.790 -<p class="text-primary">...</p>
32.791 -<p class="text-success">...</p>
32.792 -<p class="text-info">...</p>
32.793 -<p class="text-warning">...</p>
32.794 -<p class="text-danger">...</p>
32.795 -{% endhighlight %}
32.796 - <div class="bs-callout bs-callout-info">
32.797 - <h4>Dealing with specificity</h4>
32.798 - <p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
32.799 - </div>
32.800 -
32.801 -
32.802 - <!-- Abbreviations -->
32.803 - <h2 id="type-abbreviations">Abbreviations</h2>
32.804 - <p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
32.805 -
32.806 - <h3>Basic abbreviation</h3>
32.807 - <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code><abbr></code> element.</p>
32.808 - <div class="bs-example">
32.809 - <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
32.810 - </div>
32.811 -{% highlight html %}
32.812 -<abbr title="attribute">attr</abbr>
32.813 -{% endhighlight %}
32.814 -
32.815 - <h3>Initialism</h3>
32.816 - <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
32.817 - <div class="bs-example">
32.818 - <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
32.819 - </div>
32.820 -{% highlight html %}
32.821 -<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
32.822 -{% endhighlight %}
32.823 -
32.824 -
32.825 - <!-- Addresses -->
32.826 - <h2 id="type-addresses">Addresses</h2>
32.827 - <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
32.828 - <div class="bs-example">
32.829 - <address>
32.830 - <strong>Twitter, Inc.</strong><br>
32.831 - 795 Folsom Ave, Suite 600<br>
32.832 - San Francisco, CA 94107<br>
32.833 - <abbr title="Phone">P:</abbr> (123) 456-7890
32.834 - </address>
32.835 - <address>
32.836 - <strong>Full Name</strong><br>
32.837 - <a href="mailto:#">first.last@example.com</a>
32.838 - </address>
32.839 - </div>
32.840 -{% highlight html %}
32.841 -<address>
32.842 - <strong>Twitter, Inc.</strong><br>
32.843 - 795 Folsom Ave, Suite 600<br>
32.844 - San Francisco, CA 94107<br>
32.845 - <abbr title="Phone">P:</abbr> (123) 456-7890
32.846 -</address>
32.847 -
32.848 -<address>
32.849 - <strong>Full Name</strong><br>
32.850 - <a href="mailto:#">first.last@example.com</a>
32.851 -</address>
32.852 -{% endhighlight %}
32.853 -
32.854 -
32.855 - <!-- Blockquotes -->
32.856 - <h2 id="type-blockquotes">Blockquotes</h2>
32.857 - <p>For quoting blocks of content from another source within your document.</p>
32.858 -
32.859 - <h3>Default blockquote</h3>
32.860 - <p>Wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p>
32.861 - <div class="bs-example">
32.862 - <blockquote>
32.863 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
32.864 - </blockquote>
32.865 - </div>
32.866 -{% highlight html %}
32.867 -<blockquote>
32.868 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
32.869 -</blockquote>
32.870 -{% endhighlight %}
32.871 -
32.872 - <h3>Blockquote options</h3>
32.873 - <p>Style and content changes for simple variations on a standard <code><blockquote></code>.</p>
32.874 -
32.875 - <h4>Naming a source</h4>
32.876 - <p>Add <code><small></code> tag or <code>.small</code> class for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
32.877 - <div class="bs-example">
32.878 - <blockquote>
32.879 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
32.880 - <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
32.881 - </blockquote>
32.882 - </div>
32.883 -{% highlight html %}
32.884 -<blockquote>
32.885 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
32.886 - <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
32.887 -</blockquote>
32.888 -{% endhighlight %}
32.889 -
32.890 - <h4>Alternate displays</h4>
32.891 - <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
32.892 - <div class="bs-example" style="overflow: hidden;">
32.893 - <blockquote class="pull-right">
32.894 - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
32.895 - <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
32.896 - </blockquote>
32.897 - </div>
32.898 -{% highlight html %}
32.899 -<blockquote class="pull-right">
32.900 - ...
32.901 -</blockquote>
32.902 -{% endhighlight %}
32.903 -
32.904 -
32.905 - <!-- Lists -->
32.906 - <h2 id="type-lists">Lists</h2>
32.907 -
32.908 - <h3>Unordered</h3>
32.909 - <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
32.910 - <div class="bs-example">
32.911 - <ul>
32.912 - <li>Lorem ipsum dolor sit amet</li>
32.913 - <li>Consectetur adipiscing elit</li>
32.914 - <li>Integer molestie lorem at massa</li>
32.915 - <li>Facilisis in pretium nisl aliquet</li>
32.916 - <li>Nulla volutpat aliquam velit
32.917 - <ul>
32.918 - <li>Phasellus iaculis neque</li>
32.919 - <li>Purus sodales ultricies</li>
32.920 - <li>Vestibulum laoreet porttitor sem</li>
32.921 - <li>Ac tristique libero volutpat at</li>
32.922 - </ul>
32.923 - </li>
32.924 - <li>Faucibus porta lacus fringilla vel</li>
32.925 - <li>Aenean sit amet erat nunc</li>
32.926 - <li>Eget porttitor lorem</li>
32.927 - </ul>
32.928 - </div>
32.929 -{% highlight html %}
32.930 -<ul>
32.931 - <li>...</li>
32.932 -</ul>
32.933 -{% endhighlight %}
32.934 -
32.935 - <h3>Ordered</h3>
32.936 - <p>A list of items in which the order <em>does</em> explicitly matter.</p>
32.937 - <div class="bs-example">
32.938 - <ol>
32.939 - <li>Lorem ipsum dolor sit amet</li>
32.940 - <li>Consectetur adipiscing elit</li>
32.941 - <li>Integer molestie lorem at massa</li>
32.942 - <li>Facilisis in pretium nisl aliquet</li>
32.943 - <li>Nulla volutpat aliquam velit</li>
32.944 - <li>Faucibus porta lacus fringilla vel</li>
32.945 - <li>Aenean sit amet erat nunc</li>
32.946 - <li>Eget porttitor lorem</li>
32.947 - </ol>
32.948 - </div>
32.949 -{% highlight html %}
32.950 -<ol>
32.951 - <li>...</li>
32.952 -</ol>
32.953 -{% endhighlight %}
32.954 -
32.955 - <h3>Unstyled</h3>
32.956 - <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
32.957 - <div class="bs-example">
32.958 - <ul class="list-unstyled">
32.959 - <li>Lorem ipsum dolor sit amet</li>
32.960 - <li>Consectetur adipiscing elit</li>
32.961 - <li>Integer molestie lorem at massa</li>
32.962 - <li>Facilisis in pretium nisl aliquet</li>
32.963 - <li>Nulla volutpat aliquam velit
32.964 - <ul>
32.965 - <li>Phasellus iaculis neque</li>
32.966 - <li>Purus sodales ultricies</li>
32.967 - <li>Vestibulum laoreet porttitor sem</li>
32.968 - <li>Ac tristique libero volutpat at</li>
32.969 - </ul>
32.970 - </li>
32.971 - <li>Faucibus porta lacus fringilla vel</li>
32.972 - <li>Aenean sit amet erat nunc</li>
32.973 - <li>Eget porttitor lorem</li>
32.974 - </ul>
32.975 - </div>
32.976 -{% highlight html %}
32.977 -<ul class="list-unstyled">
32.978 - <li>...</li>
32.979 -</ul>
32.980 -{% endhighlight %}
32.981 -
32.982 - <h3>Inline</h3>
32.983 - <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
32.984 - <div class="bs-example">
32.985 - <ul class="list-inline">
32.986 - <li>Lorem ipsum</li>
32.987 - <li>Phasellus iaculis</li>
32.988 - <li>Nulla volutpat</li>
32.989 - </ul>
32.990 - </div>
32.991 -{% highlight html %}
32.992 -<ul class="list-inline">
32.993 - <li>...</li>
32.994 -</ul>
32.995 -{% endhighlight %}
32.996 -
32.997 - <h3>Description</h3>
32.998 - <p>A list of terms with their associated descriptions.</p>
32.999 - <div class="bs-example">
32.1000 - <dl>
32.1001 - <dt>Description lists</dt>
32.1002 - <dd>A description list is perfect for defining terms.</dd>
32.1003 - <dt>Euismod</dt>
32.1004 - <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
32.1005 - <dd>Donec id elit non mi porta gravida at eget metus.</dd>
32.1006 - <dt>Malesuada porta</dt>
32.1007 - <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
32.1008 - </dl>
32.1009 - </div>
32.1010 -{% highlight html %}
32.1011 -<dl>
32.1012 - <dt>...</dt>
32.1013 - <dd>...</dd>
32.1014 -</dl>
32.1015 -{% endhighlight %}
32.1016 -
32.1017 - <h4>Horizontal description</h4>
32.1018 - <p>Make terms and descriptions in <code><dl></code> line up side-by-side. Starts off stacked like default <code><dl></code>s, but when the navbar expands, so do these.</p>
32.1019 - <div class="bs-example">
32.1020 - <dl class="dl-horizontal">
32.1021 - <dt>Description lists</dt>
32.1022 - <dd>A description list is perfect for defining terms.</dd>
32.1023 - <dt>Euismod</dt>
32.1024 - <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
32.1025 - <dd>Donec id elit non mi porta gravida at eget metus.</dd>
32.1026 - <dt>Malesuada porta</dt>
32.1027 - <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
32.1028 - <dt>Felis euismod semper eget lacinia</dt>
32.1029 - <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
32.1030 - </dl>
32.1031 - </div>
32.1032 -{% highlight html %}
32.1033 -<dl class="dl-horizontal">
32.1034 - <dt>...</dt>
32.1035 - <dd>...</dd>
32.1036 -</dl>
32.1037 -{% endhighlight %}
32.1038 -
32.1039 - <div class="bs-callout bs-callout-info">
32.1040 - <h4>Auto-truncating</h4>
32.1041 - <p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
32.1042 - </div>
32.1043 - </div>
32.1044 -
32.1045 -
32.1046 - <!-- Code
32.1047 - ================================================== -->
32.1048 - <div class="bs-docs-section">
32.1049 - <div class="page-header">
32.1050 - <h1 id="code">Code</h1>
32.1051 - </div>
32.1052 -
32.1053 - <h2>Inline</h2>
32.1054 - <p>Wrap inline snippets of code with <code><code></code>.</p>
32.1055 -<div class="bs-example">
32.1056 - For example, <code><section></code> should be wrapped as inline.
32.1057 -</div>
32.1058 -{% highlight html %}
32.1059 -For example, <code><section></code> should be wrapped as inline.
32.1060 -{% endhighlight %}
32.1061 -
32.1062 - <h2>Basic block</h2>
32.1063 - <p>Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
32.1064 -<div class="bs-example">
32.1065 - <pre><p>Sample text here...</p></pre>
32.1066 -</div>
32.1067 -{% highlight html %}
32.1068 -<pre><p>Sample text here...</p></pre>
32.1069 -{% endhighlight %}
32.1070 -
32.1071 - <p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
32.1072 - </div>
32.1073 -
32.1074 -
32.1075 -
32.1076 - <!-- Tables
32.1077 - ================================================== -->
32.1078 - <div class="bs-docs-section">
32.1079 - <div class="page-header">
32.1080 - <h1 id="tables">Tables</h1>
32.1081 - </div>
32.1082 -
32.1083 - <h2 id="tables-example">Basic example</h2>
32.1084 - <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
32.1085 - <div class="bs-example">
32.1086 - <table class="table">
32.1087 - <thead>
32.1088 - <tr>
32.1089 - <th>#</th>
32.1090 - <th>First Name</th>
32.1091 - <th>Last Name</th>
32.1092 - <th>Username</th>
32.1093 - </tr>
32.1094 - </thead>
32.1095 - <tbody>
32.1096 - <tr>
32.1097 - <td>1</td>
32.1098 - <td>Mark</td>
32.1099 - <td>Otto</td>
32.1100 - <td>@mdo</td>
32.1101 - </tr>
32.1102 - <tr>
32.1103 - <td>2</td>
32.1104 - <td>Jacob</td>
32.1105 - <td>Thornton</td>
32.1106 - <td>@fat</td>
32.1107 - </tr>
32.1108 - <tr>
32.1109 - <td>3</td>
32.1110 - <td>Larry</td>
32.1111 - <td>the Bird</td>
32.1112 - <td>@twitter</td>
32.1113 - </tr>
32.1114 - </tbody>
32.1115 - </table>
32.1116 - </div><!-- /example -->
32.1117 -{% highlight html %}
32.1118 -<table class="table">
32.1119 - ...
32.1120 -</table>
32.1121 -{% endhighlight %}
32.1122 -
32.1123 -
32.1124 - <h2 id="tables-striped">Striped rows</h2>
32.1125 - <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
32.1126 - <div class="bs-callout bs-callout-danger">
32.1127 - <h4>Cross-browser compatibility</h4>
32.1128 - <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
32.1129 - </div>
32.1130 - <div class="bs-example">
32.1131 - <table class="table table-striped">
32.1132 - <thead>
32.1133 - <tr>
32.1134 - <th>#</th>
32.1135 - <th>First Name</th>
32.1136 - <th>Last Name</th>
32.1137 - <th>Username</th>
32.1138 - </tr>
32.1139 - </thead>
32.1140 - <tbody>
32.1141 - <tr>
32.1142 - <td>1</td>
32.1143 - <td>Mark</td>
32.1144 - <td>Otto</td>
32.1145 - <td>@mdo</td>
32.1146 - </tr>
32.1147 - <tr>
32.1148 - <td>2</td>
32.1149 - <td>Jacob</td>
32.1150 - <td>Thornton</td>
32.1151 - <td>@fat</td>
32.1152 - </tr>
32.1153 - <tr>
32.1154 - <td>3</td>
32.1155 - <td>Larry</td>
32.1156 - <td>the Bird</td>
32.1157 - <td>@twitter</td>
32.1158 - </tr>
32.1159 - </tbody>
32.1160 - </table>
32.1161 - </div><!-- /example -->
32.1162 -{% highlight html %}
32.1163 -<table class="table table-striped">
32.1164 - ...
32.1165 -</table>
32.1166 -{% endhighlight %}
32.1167 -
32.1168 -
32.1169 - <h2 id="tables-bordered">Bordered table</h2>
32.1170 - <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
32.1171 - <div class="bs-example">
32.1172 - <table class="table table-bordered">
32.1173 - <thead>
32.1174 - <tr>
32.1175 - <th>#</th>
32.1176 - <th>First Name</th>
32.1177 - <th>Last Name</th>
32.1178 - <th>Username</th>
32.1179 - </tr>
32.1180 - </thead>
32.1181 - <tbody>
32.1182 - <tr>
32.1183 - <td rowspan="2">1</td>
32.1184 - <td>Mark</td>
32.1185 - <td>Otto</td>
32.1186 - <td>@mdo</td>
32.1187 - </tr>
32.1188 - <tr>
32.1189 - <td>Mark</td>
32.1190 - <td>Otto</td>
32.1191 - <td>@TwBootstrap</td>
32.1192 - </tr>
32.1193 - <tr>
32.1194 - <td>2</td>
32.1195 - <td>Jacob</td>
32.1196 - <td>Thornton</td>
32.1197 - <td>@fat</td>
32.1198 - </tr>
32.1199 - <tr>
32.1200 - <td>3</td>
32.1201 - <td colspan="2">Larry the Bird</td>
32.1202 - <td>@twitter</td>
32.1203 - </tr>
32.1204 - </tbody>
32.1205 - </table>
32.1206 - </div><!-- /example -->
32.1207 -{% highlight html %}
32.1208 -<table class="table table-bordered">
32.1209 - ...
32.1210 -</table>
32.1211 -{% endhighlight %}
32.1212 -
32.1213 -
32.1214 - <h2 id="tables-hover-rows">Hover rows</h2>
32.1215 - <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
32.1216 - <div class="bs-example">
32.1217 - <table class="table table-hover">
32.1218 - <thead>
32.1219 - <tr>
32.1220 - <th>#</th>
32.1221 - <th>First Name</th>
32.1222 - <th>Last Name</th>
32.1223 - <th>Username</th>
32.1224 - </tr>
32.1225 - </thead>
32.1226 - <tbody>
32.1227 - <tr>
32.1228 - <td>1</td>
32.1229 - <td>Mark</td>
32.1230 - <td>Otto</td>
32.1231 - <td>@mdo</td>
32.1232 - </tr>
32.1233 - <tr>
32.1234 - <td>2</td>
32.1235 - <td>Jacob</td>
32.1236 - <td>Thornton</td>
32.1237 - <td>@fat</td>
32.1238 - </tr>
32.1239 - <tr>
32.1240 - <td>3</td>
32.1241 - <td colspan="2">Larry the Bird</td>
32.1242 - <td>@twitter</td>
32.1243 - </tr>
32.1244 - </tbody>
32.1245 - </table>
32.1246 - </div><!-- /example -->
32.1247 -{% highlight html %}
32.1248 -<table class="table table-hover">
32.1249 - ...
32.1250 -</table>
32.1251 -{% endhighlight %}
32.1252 -
32.1253 -
32.1254 - <h2 id="tables-condensed">Condensed table</h2>
32.1255 - <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
32.1256 - <div class="bs-example">
32.1257 - <table class="table table-condensed">
32.1258 - <thead>
32.1259 - <tr>
32.1260 - <th>#</th>
32.1261 - <th>First Name</th>
32.1262 - <th>Last Name</th>
32.1263 - <th>Username</th>
32.1264 - </tr>
32.1265 - </thead>
32.1266 - <tbody>
32.1267 - <tr>
32.1268 - <td>1</td>
32.1269 - <td>Mark</td>
32.1270 - <td>Otto</td>
32.1271 - <td>@mdo</td>
32.1272 - </tr>
32.1273 - <tr>
32.1274 - <td>2</td>
32.1275 - <td>Jacob</td>
32.1276 - <td>Thornton</td>
32.1277 - <td>@fat</td>
32.1278 - </tr>
32.1279 - <tr>
32.1280 - <td>3</td>
32.1281 - <td colspan="2">Larry the Bird</td>
32.1282 - <td>@twitter</td>
32.1283 - </tr>
32.1284 - </tbody>
32.1285 - </table>
32.1286 - </div><!-- /example -->
32.1287 -{% highlight html %}
32.1288 -<table class="table table-condensed">
32.1289 - ...
32.1290 -</table>
32.1291 -{% endhighlight %}
32.1292 -
32.1293 -
32.1294 - <h2 id="tables-contextual-classes">Contextual classes</h2>
32.1295 - <p>Use contextual classes to color table rows or individual cells.</p>
32.1296 - <div class="table-responsive">
32.1297 - <table class="table table-bordered table-striped">
32.1298 - <colgroup>
32.1299 - <col class="col-xs-1">
32.1300 - <col class="col-xs-7">
32.1301 - </colgroup>
32.1302 - <thead>
32.1303 - <tr>
32.1304 - <th>Class</th>
32.1305 - <th>Description</th>
32.1306 - </tr>
32.1307 - </thead>
32.1308 - <tbody>
32.1309 - <tr>
32.1310 - <td>
32.1311 - <code>.active</code>
32.1312 - </td>
32.1313 - <td>Applies the hover color to a particular row or cell</td>
32.1314 - </tr>
32.1315 - <tr>
32.1316 - <td>
32.1317 - <code>.success</code>
32.1318 - </td>
32.1319 - <td>Indicates a successful or positive action</td>
32.1320 - </tr>
32.1321 - <tr>
32.1322 - <td>
32.1323 - <code>.warning</code>
32.1324 - </td>
32.1325 - <td>Indicates a warning that might need attention</td>
32.1326 - </tr>
32.1327 - <tr>
32.1328 - <td>
32.1329 - <code>.danger</code>
32.1330 - </td>
32.1331 - <td>Indicates a dangerous or potentially negative action</td>
32.1332 - </tr>
32.1333 - </tbody>
32.1334 - </table>
32.1335 - </div>
32.1336 - <div class="bs-example">
32.1337 - <table class="table">
32.1338 - <thead>
32.1339 - <tr>
32.1340 - <th>#</th>
32.1341 - <th>Column heading</th>
32.1342 - <th>Column heading</th>
32.1343 - <th>Column heading</th>
32.1344 - </tr>
32.1345 - </thead>
32.1346 - <tbody>
32.1347 - <tr class="active">
32.1348 - <td>1</td>
32.1349 - <td>Column content</td>
32.1350 - <td>Column content</td>
32.1351 - <td>Column content</td>
32.1352 - </tr>
32.1353 - <tr>
32.1354 - <td>2</td>
32.1355 - <td>Column content</td>
32.1356 - <td>Column content</td>
32.1357 - <td>Column content</td>
32.1358 - </tr>
32.1359 - <tr class="success">
32.1360 - <td>3</td>
32.1361 - <td>Column content</td>
32.1362 - <td>Column content</td>
32.1363 - <td>Column content</td>
32.1364 - </tr>
32.1365 - <tr>
32.1366 - <td>4</td>
32.1367 - <td>Column content</td>
32.1368 - <td>Column content</td>
32.1369 - <td>Column content</td>
32.1370 - </tr>
32.1371 - <tr class="warning">
32.1372 - <td>5</td>
32.1373 - <td>Column content</td>
32.1374 - <td>Column content</td>
32.1375 - <td>Column content</td>
32.1376 - </tr>
32.1377 - <tr>
32.1378 - <td>6</td>
32.1379 - <td>Column content</td>
32.1380 - <td>Column content</td>
32.1381 - <td>Column content</td>
32.1382 - </tr>
32.1383 - <tr class="danger">
32.1384 - <td>7</td>
32.1385 - <td>Column content</td>
32.1386 - <td>Column content</td>
32.1387 - <td>Column content</td>
32.1388 - </tr>
32.1389 - </tbody>
32.1390 - </table>
32.1391 - </div><!-- /example -->
32.1392 -{% highlight html %}
32.1393 -<!-- On rows -->
32.1394 -<tr class="active">...</tr>
32.1395 -<tr class="success">...</tr>
32.1396 -<tr class="warning">...</tr>
32.1397 -<tr class="danger">...</tr>
32.1398 -
32.1399 -<!-- On cells (`td` or `th`) -->
32.1400 -<tr>
32.1401 - <td class="active">...</td>
32.1402 - <td class="success">...</td>
32.1403 - <td class="warning">...</td>
32.1404 - <td class="danger">...</td>
32.1405 -</tr>
32.1406 -{% endhighlight %}
32.1407 -
32.1408 -
32.1409 - <h2 id="tables-responsive">Responsive tables</h2>
32.1410 - <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
32.1411 - <div class="bs-example">
32.1412 - <div class="table-responsive">
32.1413 - <table class="table">
32.1414 - <thead>
32.1415 - <tr>
32.1416 - <th>#</th>
32.1417 - <th>Table heading</th>
32.1418 - <th>Table heading</th>
32.1419 - <th>Table heading</th>
32.1420 - <th>Table heading</th>
32.1421 - <th>Table heading</th>
32.1422 - <th>Table heading</th>
32.1423 - </tr>
32.1424 - </thead>
32.1425 - <tbody>
32.1426 - <tr>
32.1427 - <td>1</td>
32.1428 - <td>Table cell</td>
32.1429 - <td>Table cell</td>
32.1430 - <td>Table cell</td>
32.1431 - <td>Table cell</td>
32.1432 - <td>Table cell</td>
32.1433 - <td>Table cell</td>
32.1434 - </tr>
32.1435 - <tr>
32.1436 - <td>2</td>
32.1437 - <td>Table cell</td>
32.1438 - <td>Table cell</td>
32.1439 - <td>Table cell</td>
32.1440 - <td>Table cell</td>
32.1441 - <td>Table cell</td>
32.1442 - <td>Table cell</td>
32.1443 - </tr>
32.1444 - <tr>
32.1445 - <td>3</td>
32.1446 - <td>Table cell</td>
32.1447 - <td>Table cell</td>
32.1448 - <td>Table cell</td>
32.1449 - <td>Table cell</td>
32.1450 - <td>Table cell</td>
32.1451 - <td>Table cell</td>
32.1452 - </tr>
32.1453 - </tbody>
32.1454 - </table>
32.1455 - </div><!-- /.table-responsive -->
32.1456 -
32.1457 - <div class="table-responsive">
32.1458 - <table class="table table-bordered">
32.1459 - <thead>
32.1460 - <tr>
32.1461 - <th>#</th>
32.1462 - <th>Table heading</th>
32.1463 - <th>Table heading</th>
32.1464 - <th>Table heading</th>
32.1465 - <th>Table heading</th>
32.1466 - <th>Table heading</th>
32.1467 - <th>Table heading</th>
32.1468 - </tr>
32.1469 - </thead>
32.1470 - <tbody>
32.1471 - <tr>
32.1472 - <td>1</td>
32.1473 - <td>Table cell</td>
32.1474 - <td>Table cell</td>
32.1475 - <td>Table cell</td>
32.1476 - <td>Table cell</td>
32.1477 - <td>Table cell</td>
32.1478 - <td>Table cell</td>
32.1479 - </tr>
32.1480 - <tr>
32.1481 - <td>2</td>
32.1482 - <td>Table cell</td>
32.1483 - <td>Table cell</td>
32.1484 - <td>Table cell</td>
32.1485 - <td>Table cell</td>
32.1486 - <td>Table cell</td>
32.1487 - <td>Table cell</td>
32.1488 - </tr>
32.1489 - <tr>
32.1490 - <td>3</td>
32.1491 - <td>Table cell</td>
32.1492 - <td>Table cell</td>
32.1493 - <td>Table cell</td>
32.1494 - <td>Table cell</td>
32.1495 - <td>Table cell</td>
32.1496 - <td>Table cell</td>
32.1497 - </tr>
32.1498 - </tbody>
32.1499 - </table>
32.1500 - </div><!-- /.table-responsive -->
32.1501 - </div><!-- /example -->
32.1502 -{% highlight html %}
32.1503 -<div class="table-responsive">
32.1504 - <table class="table">
32.1505 - ...
32.1506 - </table>
32.1507 -</div>
32.1508 -{% endhighlight %}
32.1509 -
32.1510 - </div>
32.1511 -
32.1512 -
32.1513 -
32.1514 - <!-- Forms
32.1515 - ================================================== -->
32.1516 - <div class="bs-docs-section">
32.1517 - <div class="page-header">
32.1518 - <h1 id="forms">Forms</h1>
32.1519 - </div>
32.1520 -
32.1521 - <h2 id="forms-example">Basic example</h2>
32.1522 - <p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
32.1523 - <div class="bs-example">
32.1524 - <form role="form">
32.1525 - <div class="form-group">
32.1526 - <label for="exampleInputEmail1">Email address</label>
32.1527 - <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
32.1528 - </div>
32.1529 - <div class="form-group">
32.1530 - <label for="exampleInputPassword1">Password</label>
32.1531 - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
32.1532 - </div>
32.1533 - <div class="form-group">
32.1534 - <label for="exampleInputFile">File input</label>
32.1535 - <input type="file" id="exampleInputFile">
32.1536 - <p class="help-block">Example block-level help text here.</p>
32.1537 - </div>
32.1538 - <div class="checkbox">
32.1539 - <label>
32.1540 - <input type="checkbox"> Check me out
32.1541 - </label>
32.1542 - </div>
32.1543 - <button type="submit" class="btn btn-default">Submit</button>
32.1544 - </form>
32.1545 - </div><!-- /example -->
32.1546 -{% highlight html %}
32.1547 -<form role="form">
32.1548 - <div class="form-group">
32.1549 - <label for="exampleInputEmail1">Email address</label>
32.1550 - <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
32.1551 - </div>
32.1552 - <div class="form-group">
32.1553 - <label for="exampleInputPassword1">Password</label>
32.1554 - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
32.1555 - </div>
32.1556 - <div class="form-group">
32.1557 - <label for="exampleInputFile">File input</label>
32.1558 - <input type="file" id="exampleInputFile">
32.1559 - <p class="help-block">Example block-level help text here.</p>
32.1560 - </div>
32.1561 - <div class="checkbox">
32.1562 - <label>
32.1563 - <input type="checkbox"> Check me out
32.1564 - </label>
32.1565 - </div>
32.1566 - <button type="submit" class="btn btn-default">Submit</button>
32.1567 -</form>
32.1568 -{% endhighlight %}
32.1569 -
32.1570 -
32.1571 - <h2 id="forms-inline">Inline form</h2>
32.1572 - <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
32.1573 - <div class="bs-callout bs-callout-danger">
32.1574 - <h4>Requires custom widths</h4>
32.1575 - <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
32.1576 - </div>
32.1577 - <div class="bs-callout bs-callout-danger">
32.1578 - <h4>Always add labels</h4>
32.1579 - <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
32.1580 - </div>
32.1581 - <div class="bs-example">
32.1582 - <form class="form-inline" role="form">
32.1583 - <div class="form-group">
32.1584 - <label class="sr-only" for="exampleInputEmail2">Email address</label>
32.1585 - <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
32.1586 - </div>
32.1587 - <div class="form-group">
32.1588 - <label class="sr-only" for="exampleInputPassword2">Password</label>
32.1589 - <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
32.1590 - </div>
32.1591 - <div class="checkbox">
32.1592 - <label>
32.1593 - <input type="checkbox"> Remember me
32.1594 - </label>
32.1595 - </div>
32.1596 - <button type="submit" class="btn btn-default">Sign in</button>
32.1597 - </form>
32.1598 - </div><!-- /example -->
32.1599 -{% highlight html %}
32.1600 -<form class="form-inline" role="form">
32.1601 - <div class="form-group">
32.1602 - <label class="sr-only" for="exampleInputEmail2">Email address</label>
32.1603 - <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
32.1604 - </div>
32.1605 - <div class="form-group">
32.1606 - <label class="sr-only" for="exampleInputPassword2">Password</label>
32.1607 - <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
32.1608 - </div>
32.1609 - <div class="checkbox">
32.1610 - <label>
32.1611 - <input type="checkbox"> Remember me
32.1612 - </label>
32.1613 - </div>
32.1614 - <button type="submit" class="btn btn-default">Sign in</button>
32.1615 -</form>
32.1616 -{% endhighlight %}
32.1617 -
32.1618 -
32.1619 - <h2 id="forms-horizontal">Horizontal form</h2>
32.1620 - <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
32.1621 - <div class="bs-example">
32.1622 - <form class="form-horizontal" role="form">
32.1623 - <div class="form-group">
32.1624 - <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
32.1625 - <div class="col-sm-10">
32.1626 - <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
32.1627 - </div>
32.1628 - </div>
32.1629 - <div class="form-group">
32.1630 - <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
32.1631 - <div class="col-sm-10">
32.1632 - <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
32.1633 - </div>
32.1634 - </div>
32.1635 - <div class="form-group">
32.1636 - <div class="col-sm-offset-2 col-sm-10">
32.1637 - <div class="checkbox">
32.1638 - <label>
32.1639 - <input type="checkbox"> Remember me
32.1640 - </label>
32.1641 - </div>
32.1642 - </div>
32.1643 - </div>
32.1644 - <div class="form-group">
32.1645 - <div class="col-sm-offset-2 col-sm-10">
32.1646 - <button type="submit" class="btn btn-default">Sign in</button>
32.1647 - </div>
32.1648 - </div>
32.1649 - </form>
32.1650 - </div><!-- /.bs-example -->
32.1651 -{% highlight html %}
32.1652 -<form class="form-horizontal" role="form">
32.1653 - <div class="form-group">
32.1654 - <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
32.1655 - <div class="col-sm-10">
32.1656 - <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
32.1657 - </div>
32.1658 - </div>
32.1659 - <div class="form-group">
32.1660 - <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
32.1661 - <div class="col-sm-10">
32.1662 - <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
32.1663 - </div>
32.1664 - </div>
32.1665 - <div class="form-group">
32.1666 - <div class="col-sm-offset-2 col-sm-10">
32.1667 - <div class="checkbox">
32.1668 - <label>
32.1669 - <input type="checkbox"> Remember me
32.1670 - </label>
32.1671 - </div>
32.1672 - </div>
32.1673 - </div>
32.1674 - <div class="form-group">
32.1675 - <div class="col-sm-offset-2 col-sm-10">
32.1676 - <button type="submit" class="btn btn-default">Sign in</button>
32.1677 - </div>
32.1678 - </div>
32.1679 -</form>
32.1680 -{% endhighlight %}
32.1681 -
32.1682 -
32.1683 - <h2 id="forms-controls">Supported controls</h2>
32.1684 - <p>Examples of standard form controls supported in an example form layout.</p>
32.1685 -
32.1686 - <h3>Inputs</h3>
32.1687 - <p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
32.1688 - <div class="bs-callout bs-callout-danger">
32.1689 - <h4>Type declaration required</h4>
32.1690 - <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
32.1691 - </div>
32.1692 - <div class="bs-example">
32.1693 - <form role="form">
32.1694 - <input type="text" class="form-control" placeholder="Text input">
32.1695 - </form>
32.1696 - </div><!-- /.bs-example -->
32.1697 -{% highlight html %}
32.1698 -<input type="text" class="form-control" placeholder="Text input">
32.1699 -{% endhighlight %}
32.1700 - <div class="bs-callout bs-callout-info">
32.1701 - <h4>Input groups</h4>
32.1702 - <p>To add integrated text or buttons before and/or after any text-based <code><input></code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
32.1703 - </div>
32.1704 -
32.1705 - <h3>Textarea</h3>
32.1706 - <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
32.1707 - <div class="bs-example">
32.1708 - <form role="form">
32.1709 - <textarea class="form-control" rows="3"></textarea>
32.1710 - </form>
32.1711 - </div><!-- /.bs-example -->
32.1712 -{% highlight html %}
32.1713 -<textarea class="form-control" rows="3"></textarea>
32.1714 -{% endhighlight %}
32.1715 -
32.1716 - <h3>Checkboxes and radios</h3>
32.1717 - <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
32.1718 - <h4>Default (stacked)</h4>
32.1719 - <div class="bs-example">
32.1720 - <form role="form">
32.1721 - <div class="checkbox">
32.1722 - <label>
32.1723 - <input type="checkbox" value="">
32.1724 - Option one is this and that—be sure to include why it's great
32.1725 - </label>
32.1726 - </div>
32.1727 - <br>
32.1728 - <div class="radio">
32.1729 - <label>
32.1730 - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
32.1731 - Option one is this and that—be sure to include why it's great
32.1732 - </label>
32.1733 - </div>
32.1734 - <div class="radio">
32.1735 - <label>
32.1736 - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
32.1737 - Option two can be something else and selecting it will deselect option one
32.1738 - </label>
32.1739 - </div>
32.1740 - </form>
32.1741 - </div><!-- /.bs-example -->
32.1742 -{% highlight html %}
32.1743 -<div class="checkbox">
32.1744 - <label>
32.1745 - <input type="checkbox" value="">
32.1746 - Option one is this and that—be sure to include why it's great
32.1747 - </label>
32.1748 -</div>
32.1749 -
32.1750 -<div class="radio">
32.1751 - <label>
32.1752 - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
32.1753 - Option one is this and that—be sure to include why it's great
32.1754 - </label>
32.1755 -</div>
32.1756 -<div class="radio">
32.1757 - <label>
32.1758 - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
32.1759 - Option two can be something else and selecting it will deselect option one
32.1760 - </label>
32.1761 -</div>
32.1762 -{% endhighlight %}
32.1763 -
32.1764 - <h4>Inline checkboxes</h4>
32.1765 - <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
32.1766 - <div class="bs-example">
32.1767 - <form role="form">
32.1768 - <label class="checkbox-inline">
32.1769 - <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
32.1770 - </label>
32.1771 - <label class="checkbox-inline">
32.1772 - <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
32.1773 - </label>
32.1774 - <label class="checkbox-inline">
32.1775 - <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
32.1776 - </label>
32.1777 - </form>
32.1778 - </div><!-- /.bs-example -->
32.1779 -{% highlight html %}
32.1780 -<label class="checkbox-inline">
32.1781 - <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
32.1782 -</label>
32.1783 -<label class="checkbox-inline">
32.1784 - <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
32.1785 -</label>
32.1786 -<label class="checkbox-inline">
32.1787 - <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
32.1788 -</label>
32.1789 -{% endhighlight %}
32.1790 -
32.1791 - <h3>Selects</h3>
32.1792 - <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
32.1793 - <div class="bs-example">
32.1794 - <form role="form">
32.1795 - <select class="form-control">
32.1796 - <option>1</option>
32.1797 - <option>2</option>
32.1798 - <option>3</option>
32.1799 - <option>4</option>
32.1800 - <option>5</option>
32.1801 - </select>
32.1802 - <br>
32.1803 - <select multiple class="form-control">
32.1804 - <option>1</option>
32.1805 - <option>2</option>
32.1806 - <option>3</option>
32.1807 - <option>4</option>
32.1808 - <option>5</option>
32.1809 - </select>
32.1810 - </form>
32.1811 - </div><!-- /.bs-example -->
32.1812 -{% highlight html %}
32.1813 -<select class="form-control">
32.1814 - <option>1</option>
32.1815 - <option>2</option>
32.1816 - <option>3</option>
32.1817 - <option>4</option>
32.1818 - <option>5</option>
32.1819 -</select>
32.1820 -
32.1821 -<select multiple class="form-control">
32.1822 - <option>1</option>
32.1823 - <option>2</option>
32.1824 - <option>3</option>
32.1825 - <option>4</option>
32.1826 - <option>5</option>
32.1827 -</select>
32.1828 -{% endhighlight %}
32.1829 -
32.1830 -
32.1831 - <h2 id="forms-controls-static">Static control</h2>
32.1832 - <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code><p></code>.</p>
32.1833 - <div class="bs-example">
32.1834 - <form class="form-horizontal" role="form">
32.1835 - <div class="form-group">
32.1836 - <label class="col-sm-2 control-label">Email</label>
32.1837 - <div class="col-sm-10">
32.1838 - <p class="form-control-static">email@example.com</p>
32.1839 - </div>
32.1840 - </div>
32.1841 - <div class="form-group">
32.1842 - <label for="inputPassword" class="col-sm-2 control-label">Password</label>
32.1843 - <div class="col-sm-10">
32.1844 - <input type="password" class="form-control" id="inputPassword" placeholder="Password">
32.1845 - </div>
32.1846 - </div>
32.1847 - </form>
32.1848 - </div><!-- /.bs-example -->
32.1849 -{% highlight html %}
32.1850 -<form class="form-horizontal" role="form">
32.1851 - <div class="form-group">
32.1852 - <label class="col-sm-2 control-label">Email</label>
32.1853 - <div class="col-sm-10">
32.1854 - <p class="form-control-static">email@example.com</p>
32.1855 - </div>
32.1856 - </div>
32.1857 - <div class="form-group">
32.1858 - <label for="inputPassword" class="col-sm-2 control-label">Password</label>
32.1859 - <div class="col-sm-10">
32.1860 - <input type="password" class="form-control" id="inputPassword" placeholder="Password">
32.1861 - </div>
32.1862 - </div>
32.1863 -</form>
32.1864 -{% endhighlight %}
32.1865 -
32.1866 -
32.1867 - <h2 id="forms-control-states">Form states</h2>
32.1868 - <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
32.1869 -
32.1870 - <h3 id="forms-input-focus">Input focus</h3>
32.1871 - <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
32.1872 - <div class="bs-example">
32.1873 - <form role="form">
32.1874 - <input class="form-control" id="focusedInput" type="text" value="This is focused...">
32.1875 - </form>
32.1876 - </div>
32.1877 -{% highlight html %}
32.1878 -<input class="form-control" id="focusedInput" type="text" value="This is focused...">
32.1879 -{% endhighlight %}
32.1880 -
32.1881 - <h3 id="forms-disabled-inputs">Disabled inputs</h3>
32.1882 - <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
32.1883 - <div class="bs-example">
32.1884 - <form role="form">
32.1885 - <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
32.1886 - </form>
32.1887 - </div><!-- /.bs-example -->
32.1888 -{% highlight html %}
32.1889 -<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
32.1890 -{% endhighlight %}
32.1891 -
32.1892 - <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
32.1893 - <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once.</p>
32.1894 -
32.1895 - <div class="bs-callout bs-callout-warning">
32.1896 - <h4>Link functionality of <code><a></code> not impacted</h4>
32.1897 - <p>This class will only change the appearance of <code><a class="btn btn-default"></code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
32.1898 - </div>
32.1899 -
32.1900 - <div class="bs-callout bs-callout-danger">
32.1901 - <h4>Cross-browser compatibility</h4>
32.1902 - <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
32.1903 - </div>
32.1904 -
32.1905 - <div class="bs-example">
32.1906 - <form role="form">
32.1907 - <fieldset disabled>
32.1908 - <div class="form-group">
32.1909 - <label for="disabledTextInput">Disabled input</label>
32.1910 - <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
32.1911 - </div>
32.1912 - <div class="form-group">
32.1913 - <label for="disabledSelect">Disabled select menu</label>
32.1914 - <select id="disabledSelect" class="form-control">
32.1915 - <option>Disabled select</option>
32.1916 - </select>
32.1917 - </div>
32.1918 - <div class="checkbox">
32.1919 - <label>
32.1920 - <input type="checkbox"> Can't check this
32.1921 - </label>
32.1922 - </div>
32.1923 - <button type="submit" class="btn btn-primary">Submit</button>
32.1924 - </fieldset>
32.1925 - </form>
32.1926 - </div><!-- /.bs-example -->
32.1927 -{% highlight html %}
32.1928 -<form role="form">
32.1929 - <fieldset disabled>
32.1930 - <div class="form-group">
32.1931 - <label for="disabledTextInput">Disabled input</label>
32.1932 - <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
32.1933 - </div>
32.1934 - <div class="form-group">
32.1935 - <label for="disabledSelect">Disabled select menu</label>
32.1936 - <select id="disabledSelect" class="form-control">
32.1937 - <option>Disabled select</option>
32.1938 - </select>
32.1939 - </div>
32.1940 - <div class="checkbox">
32.1941 - <label>
32.1942 - <input type="checkbox"> Can't check this
32.1943 - </label>
32.1944 - </div>
32.1945 - <button type="submit" class="btn btn-primary">Submit</button>
32.1946 - </fieldset>
32.1947 -</form>
32.1948 -{% endhighlight %}
32.1949 -
32.1950 - <h3 id="forms-validation">Validation states</h3>
32.1951 - <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
32.1952 -
32.1953 - <div class="bs-example">
32.1954 - <form role="form">
32.1955 - <div class="form-group has-success">
32.1956 - <label class="control-label" for="inputSuccess">Input with success</label>
32.1957 - <input type="text" class="form-control" id="inputSuccess">
32.1958 - </div>
32.1959 - <div class="form-group has-warning">
32.1960 - <label class="control-label" for="inputWarning">Input with warning</label>
32.1961 - <input type="text" class="form-control" id="inputWarning">
32.1962 - </div>
32.1963 - <div class="form-group has-error">
32.1964 - <label class="control-label" for="inputError">Input with error</label>
32.1965 - <input type="text" class="form-control" id="inputError">
32.1966 - </div>
32.1967 - </form>
32.1968 - </div><!-- /.bs-example -->
32.1969 -{% highlight html %}
32.1970 -<div class="form-group has-success">
32.1971 - <label class="control-label" for="inputSuccess">Input with success</label>
32.1972 - <input type="text" class="form-control" id="inputSuccess">
32.1973 -</div>
32.1974 -<div class="form-group has-warning">
32.1975 - <label class="control-label" for="inputWarning">Input with warning</label>
32.1976 - <input type="text" class="form-control" id="inputWarning">
32.1977 -</div>
32.1978 -<div class="form-group has-error">
32.1979 - <label class="control-label" for="inputError">Input with error</label>
32.1980 - <input type="text" class="form-control" id="inputError">
32.1981 -</div>
32.1982 -{% endhighlight %}
32.1983 -
32.1984 -
32.1985 - <h2 id="forms-control-sizes">Control sizing</h2>
32.1986 - <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
32.1987 -
32.1988 - <h3>Height sizing</h3>
32.1989 - <p>Create larger or smaller form controls that match button sizes.</p>
32.1990 - <div class="bs-example bs-example-control-sizing">
32.1991 - <form role="form">
32.1992 - <div class="controls">
32.1993 - <input class="form-control input-lg" type="text" placeholder=".input-lg">
32.1994 - <input type="text" class="form-control" placeholder="Default input">
32.1995 - <input class="form-control input-sm" type="text" placeholder=".input-sm">
32.1996 -
32.1997 - <select class="form-control input-lg">
32.1998 - <option value="">.input-lg</option>
32.1999 - </select>
32.2000 - <select class="form-control">
32.2001 - <option value="">Default select</option>
32.2002 - </select>
32.2003 - <select class="form-control input-sm">
32.2004 - <option value="">.input-sm</option>
32.2005 - </select>
32.2006 - </div>
32.2007 - </form>
32.2008 - </div><!-- /.bs-example -->
32.2009 -{% highlight html %}
32.2010 -<input class="form-control input-lg" type="text" placeholder=".input-lg">
32.2011 -<input class="form-control" type="text" placeholder="Default input">
32.2012 -<input class="form-control input-sm" type="text" placeholder=".input-sm">
32.2013 -
32.2014 -<select class="form-control input-lg">...</select>
32.2015 -<select class="form-control">...</select>
32.2016 -<select class="form-control input-sm">...</select>
32.2017 -{% endhighlight %}
32.2018 -
32.2019 - <h3>Column sizing</h3>
32.2020 - <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
32.2021 - <div class="bs-example">
32.2022 - <form role="form">
32.2023 - <div class="row">
32.2024 - <div class="col-xs-2">
32.2025 - <input type="text" class="form-control" placeholder=".col-xs-2">
32.2026 - </div>
32.2027 - <div class="col-xs-3">
32.2028 - <input type="text" class="form-control" placeholder=".col-xs-3">
32.2029 - </div>
32.2030 - <div class="col-xs-4">
32.2031 - <input type="text" class="form-control" placeholder=".col-xs-4">
32.2032 - </div>
32.2033 - </div>
32.2034 - </form>
32.2035 - </div><!-- /.bs-example -->
32.2036 -{% highlight html %}
32.2037 -<div class="row">
32.2038 - <div class="col-xs-2">
32.2039 - <input type="text" class="form-control" placeholder=".col-xs-2">
32.2040 - </div>
32.2041 - <div class="col-xs-3">
32.2042 - <input type="text" class="form-control" placeholder=".col-xs-3">
32.2043 - </div>
32.2044 - <div class="col-xs-4">
32.2045 - <input type="text" class="form-control" placeholder=".col-xs-4">
32.2046 - </div>
32.2047 -</div>
32.2048 -{% endhighlight %}
32.2049 -
32.2050 - <h2 id="forms-help-text">Help text</h2>
32.2051 - <p>Block level help text for form controls.</p>
32.2052 - <div class="bs-example">
32.2053 - <form role="form">
32.2054 - <input type="text" class="form-control">
32.2055 - <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
32.2056 - </form>
32.2057 - </div><!-- /.bs-example -->
32.2058 -{% highlight html %}
32.2059 -<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
32.2060 -{% endhighlight %}
32.2061 -
32.2062 - </div>
32.2063 -
32.2064 -
32.2065 -
32.2066 - <!-- Buttons
32.2067 - ================================================== -->
32.2068 - <div class="bs-docs-section">
32.2069 - <div class="page-header">
32.2070 - <h1 id="buttons">Buttons</h1>
32.2071 - </div>
32.2072 -
32.2073 - <h2 id="buttons-options">Options</h2>
32.2074 - <p>Use any of the available button classes to quickly create a styled button.</p>
32.2075 - <div class="bs-example">
32.2076 - <button type="button" class="btn btn-default">Default</button>
32.2077 - <button type="button" class="btn btn-primary">Primary</button>
32.2078 - <button type="button" class="btn btn-success">Success</button>
32.2079 - <button type="button" class="btn btn-info">Info</button>
32.2080 - <button type="button" class="btn btn-warning">Warning</button>
32.2081 - <button type="button" class="btn btn-danger">Danger</button>
32.2082 - <button type="button" class="btn btn-link">Link</button>
32.2083 - </div>
32.2084 -{% highlight html %}
32.2085 -<!-- Standard button -->
32.2086 -<button type="button" class="btn btn-default">Default</button>
32.2087 -
32.2088 -<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
32.2089 -<button type="button" class="btn btn-primary">Primary</button>
32.2090 -
32.2091 -<!-- Indicates a successful or positive action -->
32.2092 -<button type="button" class="btn btn-success">Success</button>
32.2093 -
32.2094 -<!-- Contextual button for informational alert messages -->
32.2095 -<button type="button" class="btn btn-info">Info</button>
32.2096 -
32.2097 -<!-- Indicates caution should be taken with this action -->
32.2098 -<button type="button" class="btn btn-warning">Warning</button>
32.2099 -
32.2100 -<!-- Indicates a dangerous or potentially negative action -->
32.2101 -<button type="button" class="btn btn-danger">Danger</button>
32.2102 -
32.2103 -<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
32.2104 -<button type="button" class="btn btn-link">Link</button>
32.2105 -{% endhighlight %}
32.2106 -
32.2107 - <h2 id="buttons-sizes">Sizes</h2>
32.2108 - <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
32.2109 - <div class="bs-example">
32.2110 - <p>
32.2111 - <button type="button" class="btn btn-primary btn-lg">Large button</button>
32.2112 - <button type="button" class="btn btn-default btn-lg">Large button</button>
32.2113 - </p>
32.2114 - <p>
32.2115 - <button type="button" class="btn btn-primary">Default button</button>
32.2116 - <button type="button" class="btn btn-default">Default button</button>
32.2117 - </p>
32.2118 - <p>
32.2119 - <button type="button" class="btn btn-primary btn-sm">Small button</button>
32.2120 - <button type="button" class="btn btn-default btn-sm">Small button</button>
32.2121 - </p>
32.2122 - <p>
32.2123 - <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
32.2124 - <button type="button" class="btn btn-default btn-xs">Extra small button</button>
32.2125 - </p>
32.2126 - </div>
32.2127 -{% highlight html %}
32.2128 -<p>
32.2129 - <button type="button" class="btn btn-primary btn-lg">Large button</button>
32.2130 - <button type="button" class="btn btn-default btn-lg">Large button</button>
32.2131 -</p>
32.2132 -<p>
32.2133 - <button type="button" class="btn btn-primary">Default button</button>
32.2134 - <button type="button" class="btn btn-default">Default button</button>
32.2135 -</p>
32.2136 -<p>
32.2137 - <button type="button" class="btn btn-primary btn-sm">Small button</button>
32.2138 - <button type="button" class="btn btn-default btn-sm">Small button</button>
32.2139 -</p>
32.2140 -<p>
32.2141 - <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
32.2142 - <button type="button" class="btn btn-default btn-xs">Extra small button</button>
32.2143 -</p>
32.2144 -{% endhighlight %}
32.2145 -
32.2146 - <p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
32.2147 - <div class="bs-example">
32.2148 - <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
32.2149 - <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
32.2150 - <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
32.2151 - </div>
32.2152 - </div>
32.2153 -{% highlight html %}
32.2154 -<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
32.2155 -<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
32.2156 -{% endhighlight %}
32.2157 -
32.2158 -
32.2159 - <h2 id="buttons-active">Active state</h2>
32.2160 - <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> <code><button></code>s should you need to replicate the active state progammatically.</p>
32.2161 -
32.2162 - <h3>Button element</h3>
32.2163 - <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
32.2164 - <p class="bs-example">
32.2165 - <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
32.2166 - <button type="button" class="btn btn-default btn-lg active">Button</button>
32.2167 - </p>
32.2168 -{% highlight html %}
32.2169 -<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
32.2170 -<button type="button" class="btn btn-default btn-lg active">Button</button>
32.2171 -{% endhighlight %}
32.2172 -
32.2173 - <h3>Anchor element</h3>
32.2174 - <p>Add the <code>.active</code> class to <code><a></code> buttons.</p>
32.2175 - <p class="bs-example">
32.2176 - <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
32.2177 - <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
32.2178 - </p>
32.2179 -{% highlight html %}
32.2180 -<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
32.2181 -<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
32.2182 -{% endhighlight %}
32.2183 -
32.2184 -
32.2185 - <h2 id="buttons-disabled">Disabled state</h2>
32.2186 - <p>Make buttons look unclickable by fading them back 50%.</p>
32.2187 -
32.2188 - <h3>Button element</h3>
32.2189 - <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
32.2190 - <p class="bs-example">
32.2191 - <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
32.2192 - <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
32.2193 - </p>
32.2194 -{% highlight html %}
32.2195 -<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
32.2196 -<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
32.2197 -{% endhighlight %}
32.2198 -
32.2199 - <div class="bs-callout bs-callout-danger">
32.2200 - <h4>Cross-browser compatibility</h4>
32.2201 - <p>If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
32.2202 - </div>
32.2203 -
32.2204 - <h3>Anchor element</h3>
32.2205 - <p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
32.2206 - <p class="bs-example">
32.2207 - <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
32.2208 - <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
32.2209 - </p>
32.2210 -{% highlight html %}
32.2211 -<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
32.2212 -<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
32.2213 -{% endhighlight %}
32.2214 - <p>
32.2215 - We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
32.2216 - </p>
32.2217 - <div class="bs-callout bs-callout-warning">
32.2218 - <h4>Link functionality not impacted</h4>
32.2219 - <p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
32.2220 - </div>
32.2221 - <div class="bs-callout bs-callout-warning">
32.2222 - <h4>Context-specific usage</h4>
32.2223 - <p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
32.2224 - </div>
32.2225 -
32.2226 -
32.2227 - <h2 id="buttons-tags">Button tags</h2>
32.2228 - <p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
32.2229 - <form class="bs-example">
32.2230 - <a class="btn btn-default" href="#" role="button">Link</a>
32.2231 - <button class="btn btn-default" type="submit">Button</button>
32.2232 - <input class="btn btn-default" type="button" value="Input">
32.2233 - <input class="btn btn-default" type="submit" value="Submit">
32.2234 - </form>
32.2235 -{% highlight html %}
32.2236 -<a class="btn btn-default" href="#" role="button">Link</a>
32.2237 -<button class="btn btn-default" type="submit">Button</button>
32.2238 -<input class="btn btn-default" type="button" value="Input">
32.2239 -<input class="btn btn-default" type="submit" value="Submit">
32.2240 -{% endhighlight %}
32.2241 -
32.2242 - <div class="bs-callout bs-callout-warning">
32.2243 - <h4>Cross-browser rendering</h4>
32.2244 - <p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
32.2245 - <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
32.2246 - </div>
32.2247 -
32.2248 - </div>
32.2249 -
32.2250 -
32.2251 -
32.2252 - <!-- Images
32.2253 - ================================================== -->
32.2254 - <div class="bs-docs-section">
32.2255 - <div class="page-header">
32.2256 - <h1 id="images">Images</h1>
32.2257 - </div>
32.2258 -
32.2259 - <p>Add classes to an <code><img></code> element to easily style images in any project.</p>
32.2260 - <div class="bs-callout bs-callout-danger">
32.2261 - <h4>Cross-browser compatibility</h4>
32.2262 - <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
32.2263 - </div>
32.2264 - <div class="bs-example bs-example-images">
32.2265 - <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
32.2266 - <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
32.2267 - <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
32.2268 - </div>
32.2269 -{% highlight html %}
32.2270 -<img src="..." alt="..." class="img-rounded">
32.2271 -<img src="..." alt="..." class="img-circle">
32.2272 -<img src="..." alt="..." class="img-thumbnail">
32.2273 -{% endhighlight %}
32.2274 -
32.2275 - <div class="bs-callout bs-callout-warning">
32.2276 - <h4>Responsive images</h4>
32.2277 - <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
32.2278 - </div>
32.2279 -
32.2280 - </div>
32.2281 -
32.2282 -
32.2283 - <!-- Helpers
32.2284 - ================================================== -->
32.2285 - <div class="bs-docs-section">
32.2286 - <div class="page-header">
32.2287 - <h1 id="helper-classes">Helper classes</h1>
32.2288 - </div>
32.2289 -
32.2290 -
32.2291 - <h3 id="helper-classes-close">Close icon</h3>
32.2292 - <p>Use the generic close icon for dismissing content like modals and alerts.</p>
32.2293 - <div class="bs-example">
32.2294 - <p><button type="button" class="close" aria-hidden="true">×</button></p>
32.2295 - </div>
32.2296 -{% highlight html %}
32.2297 -<button type="button" class="close" aria-hidden="true">×</button>
32.2298 -{% endhighlight %}
32.2299 -
32.2300 -
32.2301 - <h3 id="helper-classes-carets">Carets</h3>
32.2302 - <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
32.2303 - <div class="bs-example">
32.2304 - <span class="caret"></span>
32.2305 - </div>
32.2306 -{% highlight html %}
32.2307 -<span class="caret"></span>
32.2308 -{% endhighlight %}
32.2309 -
32.2310 -
32.2311 - <h3 id="helper-classes-floats">Quick floats</h3>
32.2312 - <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
32.2313 -{% highlight html %}
32.2314 -<div class="pull-left">...</div>
32.2315 -<div class="pull-right">...</div>
32.2316 -{% endhighlight %}
32.2317 -{% highlight css %}
32.2318 -// Classes
32.2319 -.pull-left {
32.2320 - float: left !important;
32.2321 -}
32.2322 -.pull-right {
32.2323 - float: right !important;
32.2324 -}
32.2325 -
32.2326 -// Usage as mixins
32.2327 -.element {
32.2328 - .pull-left();
32.2329 -}
32.2330 -.another-element {
32.2331 - .pull-right();
32.2332 -}
32.2333 -{% endhighlight %}
32.2334 -
32.2335 - <div class="bs-callout bs-callout-warning">
32.2336 - <h4>Not for use in navbars</h4>
32.2337 - <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
32.2338 - </div>
32.2339 -
32.2340 -
32.2341 - <h3 id="helper-classes-center">Center content blocks</h3>
32.2342 - <p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p>
32.2343 -{% highlight html %}
32.2344 -<div class="center-block">...</div>
32.2345 -{% endhighlight %}
32.2346 -{% highlight css %}
32.2347 -// Classes
32.2348 -.center-block {
32.2349 - display: block;
32.2350 - margin-left: auto;
32.2351 - margin-right: auto;
32.2352 -}
32.2353 -
32.2354 -// Usage as mixins
32.2355 -.element {
32.2356 - .center-block();
32.2357 -}
32.2358 -{% endhighlight %}
32.2359 -
32.2360 -
32.2361 -
32.2362 - <h3 id="helper-classes-clearfix">Clearfix</h3>
32.2363 - <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
32.2364 -{% highlight html %}
32.2365 -<!-- Usage as a class -->
32.2366 -<div class="clearfix">...</div>
32.2367 -{% endhighlight %}
32.2368 -{% highlight css %}
32.2369 -// Mixin itself
32.2370 -.clearfix() {
32.2371 - &:before,
32.2372 - &:after {
32.2373 - content: " ";
32.2374 - display: table;
32.2375 - }
32.2376 - &:after {
32.2377 - clear: both;
32.2378 - }
32.2379 -}
32.2380 -
32.2381 -// Usage as a Mixin
32.2382 -.element {
32.2383 - .clearfix();
32.2384 -}
32.2385 -{% endhighlight %}
32.2386 -
32.2387 -
32.2388 - <h3 id="helper-classes-show-hide">Showing and hiding content</h3>
32.2389 - <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
32.2390 - <p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
32.2391 - <p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>
32.2392 -{% highlight html %}
32.2393 -<div class="show">...</div>
32.2394 -<div class="hidden">...</div>
32.2395 -{% endhighlight %}
32.2396 -{% highlight css %}
32.2397 -// Classes
32.2398 -.show {
32.2399 - display: block !important;
32.2400 -}
32.2401 -.hidden {
32.2402 - display: none !important;
32.2403 - visibility: hidden !important;
32.2404 -}
32.2405 -.invisible {
32.2406 - visibility: hidden;
32.2407 -}
32.2408 -
32.2409 -// Usage as mixins
32.2410 -.element {
32.2411 - .show();
32.2412 -}
32.2413 -.another-element {
32.2414 - .hidden();
32.2415 -}
32.2416 -{% endhighlight %}
32.2417 -
32.2418 -
32.2419 - <h3 id="helper-classes-screen-readers">Screen reader content</h3>
32.2420 - <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
32.2421 -{% highlight html %}
32.2422 -<a class="sr-only" href="#content">Skip to main content</a>
32.2423 -{% endhighlight %}
32.2424 -{% highlight css %}
32.2425 -// Usage as a Mixin
32.2426 -.skip-navigation {
32.2427 - .sr-only();
32.2428 -}
32.2429 -{% endhighlight %}
32.2430 -
32.2431 -
32.2432 - <h3 id="helper-classes-image-replacement">Image replacement</h3>
32.2433 - <p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
32.2434 -{% highlight html %}
32.2435 -<h1 class="text-hide">Custom heading</h1>
32.2436 -{% endhighlight %}
32.2437 - {% highlight css %}
32.2438 -// Usage as a Mixin
32.2439 -.heading {
32.2440 - .text-hide();
32.2441 -}
32.2442 -{% endhighlight %}
32.2443 - </div>
32.2444 -
32.2445 -
32.2446 -
32.2447 - <!-- Responsive utilities
32.2448 - ================================================== -->
32.2449 - <div class="bs-docs-section" id="responsive-utilities">
32.2450 - <div class="page-header">
32.2451 - <h1>Responsive utilities</h1>
32.2452 - </div>
32.2453 - <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
32.2454 - <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
32.2455 -
32.2456 -
32.2457 - <h2 id="responsive-utilities-classes">Available classes</h2>
32.2458 - <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
32.2459 - <div class="table-responsive">
32.2460 - <table class="table table-bordered table-striped responsive-utilities">
32.2461 - <thead>
32.2462 - <tr>
32.2463 - <th></th>
32.2464 - <th>
32.2465 - Extra small devices
32.2466 - <small>Phones (<768px)</small>
32.2467 - </th>
32.2468 - <th>
32.2469 - Small devices
32.2470 - <small>Tablets (≥768px)</small>
32.2471 - </th>
32.2472 - <th>
32.2473 - Medium devices
32.2474 - <small>Desktops (≥992px)</small>
32.2475 - </th>
32.2476 - <th>
32.2477 - Large devices
32.2478 - <small>Desktops (≥1200px)</small>
32.2479 - </th>
32.2480 - </tr>
32.2481 - </thead>
32.2482 - <tbody>
32.2483 - <tr>
32.2484 - <th><code>.visible-xs</code></th>
32.2485 - <td class="is-visible">Visible</td>
32.2486 - <td class="is-hidden">Hidden</td>
32.2487 - <td class="is-hidden">Hidden</td>
32.2488 - <td class="is-hidden">Hidden</td>
32.2489 - </tr>
32.2490 - <tr>
32.2491 - <th><code>.visible-sm</code></th>
32.2492 - <td class="is-hidden">Hidden</td>
32.2493 - <td class="is-visible">Visible</td>
32.2494 - <td class="is-hidden">Hidden</td>
32.2495 - <td class="is-hidden">Hidden</td>
32.2496 - </tr>
32.2497 - <tr>
32.2498 - <th><code>.visible-md</code></th>
32.2499 - <td class="is-hidden">Hidden</td>
32.2500 - <td class="is-hidden">Hidden</td>
32.2501 - <td class="is-visible">Visible</td>
32.2502 - <td class="is-hidden">Hidden</td>
32.2503 - </tr>
32.2504 - <tr>
32.2505 - <th><code>.visible-lg</code></th>
32.2506 - <td class="is-hidden">Hidden</td>
32.2507 - <td class="is-hidden">Hidden</td>
32.2508 - <td class="is-hidden">Hidden</td>
32.2509 - <td class="is-visible">Visible</td>
32.2510 - </tr>
32.2511 - </tbody>
32.2512 - <tbody>
32.2513 - <tr>
32.2514 - <th><code>.hidden-xs</code></th>
32.2515 - <td class="is-hidden">Hidden</td>
32.2516 - <td class="is-visible">Visible</td>
32.2517 - <td class="is-visible">Visible</td>
32.2518 - <td class="is-visible">Visible</td>
32.2519 - </tr>
32.2520 - <tr>
32.2521 - <th><code>.hidden-sm</code></th>
32.2522 - <td class="is-visible">Visible</td>
32.2523 - <td class="is-hidden">Hidden</td>
32.2524 - <td class="is-visible">Visible</td>
32.2525 - <td class="is-visible">Visible</td>
32.2526 - </tr>
32.2527 - <tr>
32.2528 - <th><code>.hidden-md</code></th>
32.2529 - <td class="is-visible">Visible</td>
32.2530 - <td class="is-visible">Visible</td>
32.2531 - <td class="is-hidden">Hidden</td>
32.2532 - <td class="is-visible">Visible</td>
32.2533 - </tr>
32.2534 - <tr>
32.2535 - <th><code>.hidden-lg</code></th>
32.2536 - <td class="is-visible">Visible</td>
32.2537 - <td class="is-visible">Visible</td>
32.2538 - <td class="is-visible">Visible</td>
32.2539 - <td class="is-hidden">Hidden</td>
32.2540 - </tr>
32.2541 - </tbody>
32.2542 - </table>
32.2543 - </div>
32.2544 -
32.2545 -
32.2546 - <h2 id="responsive-utilities-print">Print classes</h2>
32.2547 - <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
32.2548 - <div class="table-responsive">
32.2549 - <table class="table table-bordered table-striped responsive-utilities">
32.2550 - <thead>
32.2551 - <tr>
32.2552 - <th>Class</th>
32.2553 - <th>Browser</th>
32.2554 - <th>Print</th>
32.2555 - </tr>
32.2556 - </thead>
32.2557 - <tbody>
32.2558 - <tr>
32.2559 - <th><code>.visible-print</code></th>
32.2560 - <td class="is-hidden">Hidden</td>
32.2561 - <td class="is-visible">Visible</td>
32.2562 - </tr>
32.2563 - <tr>
32.2564 - <th><code>.hidden-print</code></th>
32.2565 - <td class="is-visible">Visible</td>
32.2566 - <td class="is-hidden">Hidden</td>
32.2567 - </tr>
32.2568 - </tbody>
32.2569 - </table>
32.2570 - </div>
32.2571 -
32.2572 -
32.2573 - <h2 id="responsive-utilities-tests">Test cases</h2>
32.2574 - <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
32.2575 -
32.2576 - <h3>Visible on...</h3>
32.2577 - <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
32.2578 - <div class="row responsive-utilities-test visible-on">
32.2579 - <div class="col-xs-6 col-sm-3">
32.2580 - <span class="hidden-xs">Extra small</span>
32.2581 - <span class="visible-xs">✔ Visible on x-small</span>
32.2582 - </div>
32.2583 - <div class="col-xs-6 col-sm-3">
32.2584 - <span class="hidden-sm">Small</span>
32.2585 - <span class="visible-sm">✔ Visible on small</span>
32.2586 - </div>
32.2587 - <div class="clearfix visible-xs"></div>
32.2588 - <div class="col-xs-6 col-sm-3">
32.2589 - <span class="hidden-md">Medium</span>
32.2590 - <span class="visible-md">✔ Visible on medium</span>
32.2591 - </div>
32.2592 - <div class="col-xs-6 col-sm-3">
32.2593 - <span class="hidden-lg">Large</span>
32.2594 - <span class="visible-lg">✔ Visible on large</span>
32.2595 - </div>
32.2596 - </div>
32.2597 - <div class="row responsive-utilities-test visible-on">
32.2598 - <div class="col-xs-6 col-sm-6">
32.2599 - <span class="hidden-xs hidden-sm">Extra small and small</span>
32.2600 - <span class="visible-xs visible-sm">✔ Visible on x-small and small</span>
32.2601 - </div>
32.2602 - <div class="col-xs-6 col-sm-6">
32.2603 - <span class="hidden-md hidden-lg">Medium and large</span>
32.2604 - <span class="visible-md visible-lg">✔ Visible on medium and large</span>
32.2605 - </div>
32.2606 - <div class="clearfix visible-xs"></div>
32.2607 - <div class="col-xs-6 col-sm-6">
32.2608 - <span class="hidden-xs hidden-md">Extra small and medium</span>
32.2609 - <span class="visible-xs visible-md">✔ Visible on x-small and medium</span>
32.2610 - </div>
32.2611 - <div class="col-xs-6 col-sm-6">
32.2612 - <span class="hidden-sm hidden-lg">Small and large</span>
32.2613 - <span class="visible-sm visible-lg">✔ Visible on small and large</span>
32.2614 - </div>
32.2615 - <div class="clearfix visible-xs"></div>
32.2616 - <div class="col-xs-6 col-sm-6">
32.2617 - <span class="hidden-xs hidden-lg">Extra small and large</span>
32.2618 - <span class="visible-xs visible-lg">✔ Visible on x-small and large</span>
32.2619 - </div>
32.2620 - <div class="col-xs-6 col-sm-6">
32.2621 - <span class="hidden-sm hidden-md">Small and medium</span>
32.2622 - <span class="visible-sm visible-md">✔ Visible on small and medium</span>
32.2623 - </div>
32.2624 - </div>
32.2625 -
32.2626 - <h3>Hidden on...</h3>
32.2627 - <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
32.2628 - <div class="row responsive-utilities-test hidden-on">
32.2629 - <div class="col-xs-6 col-sm-3">
32.2630 - <span class="hidden-xs">Extra small</span>
32.2631 - <span class="visible-xs">✔ Hidden on x-small</span>
32.2632 - </div>
32.2633 - <div class="col-xs-6 col-sm-3">
32.2634 - <span class="hidden-sm">Small</span>
32.2635 - <span class="visible-sm">✔ Hidden on small</span>
32.2636 - </div>
32.2637 - <div class="clearfix visible-xs"></div>
32.2638 - <div class="col-xs-6 col-sm-3">
32.2639 - <span class="hidden-md">Medium</span>
32.2640 - <span class="visible-md">✔ Hidden on medium</span>
32.2641 - </div>
32.2642 - <div class="col-xs-6 col-sm-3">
32.2643 - <span class="hidden-lg">Large</span>
32.2644 - <span class="visible-lg">✔ Hidden on large</span>
32.2645 - </div>
32.2646 - </div>
32.2647 - <div class="row responsive-utilities-test hidden-on">
32.2648 - <div class="col-xs-6 col-sm-6">
32.2649 - <span class="hidden-xs hidden-sm">Extra small and small</span>
32.2650 - <span class="visible-xs visible-sm">✔ Hidden on x-small and small</span>
32.2651 - </div>
32.2652 - <div class="col-xs-6 col-sm-6">
32.2653 - <span class="hidden-md hidden-lg">Medium and large</span>
32.2654 - <span class="visible-md visible-lg">✔ Hidden on medium and large</span>
32.2655 - </div>
32.2656 - <div class="clearfix visible-xs"></div>
32.2657 - <div class="col-xs-6 col-sm-6">
32.2658 - <span class="hidden-xs hidden-md">Extra small and medium</span>
32.2659 - <span class="visible-xs visible-md">✔ Hidden on x-small and medium</span>
32.2660 - </div>
32.2661 - <div class="col-xs-6 col-sm-6">
32.2662 - <span class="hidden-sm hidden-lg">Small and large</span>
32.2663 - <span class="visible-sm visible-lg">✔ Hidden on small and large</span>
32.2664 - </div>
32.2665 - <div class="clearfix visible-xs"></div>
32.2666 - <div class="col-xs-6 col-sm-6">
32.2667 - <span class="hidden-xs hidden-lg">Extra small and large</span>
32.2668 - <span class="visible-xs visible-lg">✔ Hidden on x-small and large</span>
32.2669 - </div>
32.2670 - <div class="col-xs-6 col-sm-6">
32.2671 - <span class="hidden-sm hidden-md">Small and medium</span>
32.2672 - <span class="visible-sm visible-md">✔ Hidden on small and medium</span>
32.2673 - </div>
32.2674 - </div>
32.2675 -
32.2676 - </div>
33.1 --- a/bootstrap-source/bootstrap-3.0.3/customize.html Sat Jan 18 12:34:36 2014 +0100
33.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
33.3 @@ -1,1715 +0,0 @@
33.4 ----
33.5 -layout: default
33.6 -title: Customize and download
33.7 -slug: customize
33.8 -lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
33.9 -base_url: "../"
33.10 ----
33.11 -
33.12 -<!-- Customizer form -->
33.13 -<form class="bs-customizer" role="form">
33.14 - <div class="bs-docs-section" id="less-section">
33.15 - <div class="page-header">
33.16 - <button class="btn btn-default toggle" type="button">Toggle all</button>
33.17 - <h1 id="less">LESS files</h1>
33.18 - </div>
33.19 - <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
33.20 -
33.21 - <div class="row">
33.22 - <div class="col-xs-6 col-sm-4">
33.23 - <h3>Common CSS</h3>
33.24 - <div class="checkbox">
33.25 - <label>
33.26 - <input type="checkbox" checked value="print.less">
33.27 - Print media styles
33.28 - </label>
33.29 - </div>
33.30 - <div class="checkbox">
33.31 - <label>
33.32 - <input type="checkbox" checked value="type.less">
33.33 - Typography
33.34 - </label>
33.35 - </div>
33.36 - <div class="checkbox">
33.37 - <label>
33.38 - <input type="checkbox" checked value="code.less">
33.39 - Code
33.40 - </label>
33.41 - </div>
33.42 - <div class="checkbox">
33.43 - <label>
33.44 - <input type="checkbox" checked value="grid.less">
33.45 - Grid system
33.46 - </label>
33.47 - </div>
33.48 - <div class="checkbox">
33.49 - <label>
33.50 - <input type="checkbox" checked value="tables.less">
33.51 - Tables
33.52 - </label>
33.53 - </div>
33.54 - <div class="checkbox">
33.55 - <label>
33.56 - <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less">
33.57 - Forms
33.58 - </label>
33.59 - </div>
33.60 - <div class="checkbox">
33.61 - <label>
33.62 - <input type="checkbox" checked value="buttons.less">
33.63 - Buttons
33.64 - </label>
33.65 - </div>
33.66 - </div><!-- .col-xs-6 .col-sm-4 -->
33.67 -
33.68 - <div class="col-xs-6 col-sm-4">
33.69 - <h3>Components</h3>
33.70 - <div class="checkbox">
33.71 - <label>
33.72 - <input type="checkbox" checked value="glyphicons.less">
33.73 - Glyphicons
33.74 - </label>
33.75 - </div>
33.76 - <div class="checkbox">
33.77 - <label>
33.78 - <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less">
33.79 - Button groups
33.80 - </label>
33.81 - </div>
33.82 - <div class="checkbox">
33.83 - <label>
33.84 - <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less">
33.85 - Input groups
33.86 - </label>
33.87 - </div>
33.88 - <div class="checkbox">
33.89 - <label>
33.90 - <input type="checkbox" checked value="navs.less" data-dependents="navbar.less">
33.91 - Navs
33.92 - </label>
33.93 - </div>
33.94 - <div class="checkbox">
33.95 - <label>
33.96 - <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less">
33.97 - Navbar
33.98 - </label>
33.99 - </div>
33.100 - <div class="checkbox">
33.101 - <label>
33.102 - <input type="checkbox" checked value="breadcrumbs.less">
33.103 - Breadcrumbs
33.104 - </label>
33.105 - </div>
33.106 - <div class="checkbox">
33.107 - <label>
33.108 - <input type="checkbox" checked value="pagination.less">
33.109 - Pagination
33.110 - </label>
33.111 - </div>
33.112 - <div class="checkbox">
33.113 - <label>
33.114 - <input type="checkbox" checked value="pager.less">
33.115 - Pager
33.116 - </label>
33.117 - </div>
33.118 - <div class="checkbox">
33.119 - <label>
33.120 - <input type="checkbox" checked value="labels.less">
33.121 - Labels
33.122 - </label>
33.123 - </div>
33.124 - <div class="checkbox">
33.125 - <label>
33.126 - <input type="checkbox" checked value="badges.less">
33.127 - Badges
33.128 - </label>
33.129 - </div>
33.130 - <div class="checkbox">
33.131 - <label>
33.132 - <input type="checkbox" checked value="jumbotron.less">
33.133 - Jumbotron
33.134 - </label>
33.135 - </div>
33.136 - <div class="checkbox">
33.137 - <label>
33.138 - <input type="checkbox" checked value="thumbnails.less">
33.139 - Thumbnails
33.140 - </label>
33.141 - </div>
33.142 - <div class="checkbox">
33.143 - <label>
33.144 - <input type="checkbox" checked value="alerts.less">
33.145 - Alerts
33.146 - </label>
33.147 - </div>
33.148 - <div class="checkbox">
33.149 - <label>
33.150 - <input type="checkbox" checked value="progress-bars.less">
33.151 - Progress bars
33.152 - </label>
33.153 - </div>
33.154 - <div class="checkbox">
33.155 - <label>
33.156 - <input type="checkbox" checked value="media.less">
33.157 - Media items
33.158 - </label>
33.159 - </div>
33.160 - <div class="checkbox">
33.161 - <label>
33.162 - <input type="checkbox" checked value="list-group.less">
33.163 - List groups
33.164 - </label>
33.165 - </div>
33.166 - <div class="checkbox">
33.167 - <label>
33.168 - <input type="checkbox" checked value="panels.less">
33.169 - Panels
33.170 - </label>
33.171 - </div>
33.172 - <div class="checkbox">
33.173 - <label>
33.174 - <input type="checkbox" checked value="wells.less">
33.175 - Wells
33.176 - </label>
33.177 - </div>
33.178 - <div class="checkbox">
33.179 - <label>
33.180 - <input type="checkbox" checked value="close.less">
33.181 - Close icon
33.182 - </label>
33.183 - </div>
33.184 - </div><!-- .col-xs-6 .col-sm-4 -->
33.185 -
33.186 - <div class="col-xs-6 col-sm-4">
33.187 - <h3>JavaScript components</h3>
33.188 - <div class="checkbox">
33.189 - <label>
33.190 - <input type="checkbox" checked value="dropdowns.less">
33.191 - Dropdowns
33.192 - </label>
33.193 - </div>
33.194 - <div class="checkbox">
33.195 - <label>
33.196 - <input type="checkbox" checked value="tooltip.less">
33.197 - Tooltips
33.198 - </label>
33.199 - </div>
33.200 - <div class="checkbox">
33.201 - <label>
33.202 - <input type="checkbox" checked value="popovers.less">
33.203 - Popovers
33.204 - </label>
33.205 - </div>
33.206 - <div class="checkbox">
33.207 - <label>
33.208 - <input type="checkbox" checked value="modals.less">
33.209 - Modals
33.210 - </label>
33.211 - </div>
33.212 - <div class="checkbox">
33.213 - <label>
33.214 - <input type="checkbox" checked value="carousel.less">
33.215 - Carousel
33.216 - </label>
33.217 - </div>
33.218 -
33.219 - <h3>Utilities</h3>
33.220 - <div class="checkbox">
33.221 - <label>
33.222 - <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
33.223 - Basic utilities
33.224 - </label>
33.225 - </div>
33.226 - <div class="checkbox">
33.227 - <label>
33.228 - <input type="checkbox" checked value="responsive-utilities.less">
33.229 - Responsive utilities
33.230 - </label>
33.231 - </div>
33.232 - <div class="checkbox">
33.233 - <label>
33.234 - <input type="checkbox" checked value="component-animations.less">
33.235 - Component animations (for JS)
33.236 - </label>
33.237 - </div>
33.238 - </div><!-- .col-xs-6 .col-sm-4 -->
33.239 - </div><!-- /.row -->
33.240 - </div>
33.241 -
33.242 -
33.243 -
33.244 - <div class="bs-docs-section" id="plugin-section">
33.245 - <div class="page-header">
33.246 - <button class="btn btn-default toggle" type="button">Toggle all</button>
33.247 - <h1 id="plugins">jQuery plugins</h1>
33.248 - </div>
33.249 - <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
33.250 - <div class="row">
33.251 - <div class="col-lg-6">
33.252 - <h4>Linked to components</h4>
33.253 - <div class="checkbox">
33.254 - <label>
33.255 - <input type="checkbox" checked value="alert.js">
33.256 - Alert dismissal
33.257 - </label>
33.258 - </div>
33.259 - <div class="checkbox">
33.260 - <label>
33.261 - <input type="checkbox" checked value="button.js">
33.262 - Advanced buttons
33.263 - </label>
33.264 - </div>
33.265 - <div class="checkbox">
33.266 - <label>
33.267 - <input type="checkbox" checked value="carousel.js">
33.268 - Carousel functionality
33.269 - </label>
33.270 - </div>
33.271 - <div class="checkbox">
33.272 - <label>
33.273 - <input type="checkbox" checked value="dropdown.js">
33.274 - Dropdowns
33.275 - </label>
33.276 - </div>
33.277 - <div class="checkbox">
33.278 - <label>
33.279 - <input type="checkbox" checked value="modal.js">
33.280 - Modals
33.281 - </label>
33.282 - </div>
33.283 - <div class="checkbox">
33.284 - <label>
33.285 - <input type="checkbox" checked value="tooltip.js">
33.286 - Tooltips
33.287 - </label>
33.288 - </div>
33.289 - <div class="checkbox">
33.290 - <label>
33.291 - <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js">
33.292 - Popovers <small>(requires Tooltips)</small>
33.293 - </label>
33.294 - </div>
33.295 - <div class="checkbox">
33.296 - <label>
33.297 - <input type="checkbox" checked value="tab.js">
33.298 - Togglable tabs
33.299 - </label>
33.300 - </div>
33.301 - </div>
33.302 - <div class="col-lg-6">
33.303 - <h4>Magic</h4>
33.304 - <div class="checkbox">
33.305 - <label>
33.306 - <input type="checkbox" checked value="affix.js">
33.307 - Affix
33.308 - </label>
33.309 - </div>
33.310 - <div class="checkbox">
33.311 - <label>
33.312 - <input type="checkbox" checked value="collapse.js">
33.313 - Collapse
33.314 - </label>
33.315 - </div>
33.316 - <div class="checkbox">
33.317 - <label>
33.318 - <input type="checkbox" checked value="scrollspy.js">
33.319 - Scrollspy
33.320 - </label>
33.321 - </div>
33.322 - <div class="checkbox">
33.323 - <label>
33.324 - <input type="checkbox" checked value="transition.js">
33.325 - Transitions <small>(required for any kind of animation)</small>
33.326 - </label>
33.327 - </div>
33.328 - </div>
33.329 - </div>
33.330 -
33.331 - <div class="bs-callout bs-callout-info">
33.332 - <h4>Produces two files</h4>
33.333 - <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
33.334 - </div>
33.335 -
33.336 - <div class="bs-callout bs-callout-danger">
33.337 - <h4>jQuery required</h4>
33.338 - <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
33.339 - </div>
33.340 - </div>
33.341 -
33.342 -
33.343 -
33.344 - <div class="bs-docs-section" id="less-variables-section">
33.345 - <div class="page-header">
33.346 - <button class="btn btn-default toggle" type="button">Reset to defaults</button>
33.347 - <h1 id="less-variables">LESS variables</h1>
33.348 - </div>
33.349 - <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
33.350 -
33.351 - <h2 id="variables-basics">Basics</h2>
33.352 -
33.353 -
33.354 - <h3>Color system</h3>
33.355 - <div class="row">
33.356 - <div class="col-md-6">
33.357 - <label>@brand-primary</label>
33.358 - <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
33.359 - <label>@brand-success</label>
33.360 - <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
33.361 - <label>@brand-warning</label>
33.362 - <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
33.363 - </div>
33.364 - <div class="col-md-6">
33.365 - <label>@brand-danger</label>
33.366 - <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
33.367 - <label>@brand-info</label>
33.368 - <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
33.369 - </div>
33.370 - </div>
33.371 -
33.372 -
33.373 - <h3>Body scaffolding</h3>
33.374 - <div class="row">
33.375 - <div class="col-md-6">
33.376 - <label>@body-bg</label>
33.377 - <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
33.378 - <p class="help-block">Background color for <code><body></code>.</p>
33.379 - <label>@text-color</label>
33.380 - <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
33.381 - <p class="help-block">Global text color on <code><body></code>.</p>
33.382 - </div>
33.383 - <div class="col-md-6">
33.384 - <label>@link-color</label>
33.385 - <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
33.386 - <p class="help-block">Global textual link color</p>
33.387 - <label>@link-hover-color</label>
33.388 - <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-hover-color">
33.389 - <p class="help-block">Link hover color set via <code>darken()</code> function</p>
33.390 - </div>
33.391 - </div>
33.392 -
33.393 -
33.394 - <h3>Typography</h3>
33.395 - <div class="row">
33.396 - <div class="col-lg-6">
33.397 - <h4>Generic font variables</h4>
33.398 - <label>@font-family-sans-serif</label>
33.399 - <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
33.400 - <p class="help-block">Default sans-serif fonts.</p>
33.401 - <label>@font-family-serif</label>
33.402 - <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
33.403 - <p class="help-block">Default serif fonts.</p>
33.404 - <label>@font-family-monospace</label>
33.405 - <input type="text" class="form-control" placeholder="Menlo, Monaco, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
33.406 - <p class="help-block">Default monospace fonts for <code><code></code> and <code><pre></code>.</p>
33.407 -
33.408 - <h4>Base type styes</h4>
33.409 - <label>@font-family-base</label>
33.410 - <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
33.411 - <label>@font-size-base</label>
33.412 - <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
33.413 - <label>@line-height-base</label>
33.414 - <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
33.415 - <label>@line-height-large</label>
33.416 - <input type="text" class="form-control" placeholder="1.33" data-var="@line-height-large">
33.417 - <label>@line-height-small</label>
33.418 - <input type="text" class="form-control" placeholder="1.5" data-var="@line-height-small">
33.419 - </div>
33.420 - <div class="col-lg-6">
33.421 - <h4>Heading font sizes</h4>
33.422 - <label>@font-size-h1</label>
33.423 - <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.6)" data-var="@font-size-h1">
33.424 - <label>@font-size-h2</label>
33.425 - <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
33.426 - <label>@font-size-h3</label>
33.427 - <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.7)" data-var="@font-size-h3">
33.428 - <label>@font-size-h4</label>
33.429 - <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
33.430 - <label>@font-size-h5</label>
33.431 - <input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
33.432 - <label>@font-size-h6</label>
33.433 - <input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
33.434 - </div>
33.435 - </div>
33.436 -
33.437 -
33.438 - <h3>Headings</h3>
33.439 - <div class="row">
33.440 - <div class="col-lg-6">
33.441 - <label>@headings-font-family</label>
33.442 - <input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
33.443 - <label>@headings-font-weight</label>
33.444 - <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
33.445 - </div>
33.446 - <div class="col-lg-6">
33.447 - <label>@headings-line-height</label>
33.448 - <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
33.449 - <label>@headings-color</label>
33.450 - <input type="text" class="form-control" placeholder="inherit" data-var="@headings-color">
33.451 - </div>
33.452 - </div>
33.453 -
33.454 -
33.455 - <h3>Code blocks</h3>
33.456 - <div class="row">
33.457 - <div class="col-lg-6">
33.458 - <label>@code-color</label>
33.459 - <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
33.460 - <label>@code-bg</label>
33.461 - <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
33.462 - </div>
33.463 - <div class="col-lg-6">
33.464 - <label>@pre-color</label>
33.465 - <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
33.466 - <label>@pre-bg</label>
33.467 - <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
33.468 - <label>@pre-border-color</label>
33.469 - <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
33.470 - </div>
33.471 - </div>
33.472 -
33.473 -
33.474 - <h3>Media queries breakpoints</h3>
33.475 - <div class="row">
33.476 - <div class="col-xs-6 col-md-3">
33.477 - <label>@screen-xs-min</label>
33.478 - <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
33.479 - </div>
33.480 - <div class="col-xs-6 col-md-3">
33.481 - <label>@screen-sm-min</label>
33.482 - <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
33.483 - </div>
33.484 - <div class="col-xs-6 col-md-3">
33.485 - <label>@screen-md-min</label>
33.486 - <input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
33.487 - </div>
33.488 - <div class="col-xs-6 col-md-3">
33.489 - <label>@screen-lg-min</label>
33.490 - <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
33.491 - </div>
33.492 - </div>
33.493 -
33.494 - <h3>Layout and grid system</h3>
33.495 - <div class="row">
33.496 - <div class="col-xs-6 col-sm-4">
33.497 - <label>@container-sm</label>
33.498 - <input type="text" class="form-control" placeholder="((720px + @grid-gutter-width))" data-var="@container-sm">
33.499 - <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
33.500 - </div>
33.501 - <div class="col-xs-6 col-sm-4">
33.502 - <label>@container-md</label>
33.503 - <input type="text" class="form-control" placeholder="((940px + @grid-gutter-width))" data-var="@container-md">
33.504 - <p class="help-block">For <code>@screen-md-min</code> and up.</p>
33.505 - </div>
33.506 - <div class="clearfix visible-xs"></div>
33.507 - <div class="col-xs-6 col-sm-4">
33.508 - <label>@container-lg</label>
33.509 - <input type="text" class="form-control" placeholder="((1140px + @grid-gutter-width))" data-var="@container-lg">
33.510 - <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
33.511 - </div>
33.512 - </div>
33.513 -
33.514 - <div class="row">
33.515 - <div class="col-xs-6 col-sm-4">
33.516 - <label>@grid-columns</label>
33.517 - <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
33.518 - <p class="help-block">Number of columns in the grid.</p>
33.519 - </div>
33.520 - <div class="col-xs-6 col-sm-4">
33.521 - <label>@grid-gutter-width</label>
33.522 - <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
33.523 - <p class="help-block">Padding between columns.</p>
33.524 - </div>
33.525 - <div class="clearfix visible-xs"></div>
33.526 - <div class="col-xs-6 col-sm-4">
33.527 - <label>@grid-float-breakpoint</label>
33.528 - <input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
33.529 - <p class="help-block">Point at which the navbar stops collapsing.</p>
33.530 - </div>
33.531 - </div>
33.532 -
33.533 -
33.534 - <h3>Components</h3>
33.535 -
33.536 - <h4>Padding</h4>
33.537 - <div class="row">
33.538 - <div class="col-md-4">
33.539 - <label>@padding-base-vertical</label>
33.540 - <input type="text" class="form-control" placeholder="6px" data-var="@padding-base-vertical">
33.541 - <label>@padding-base-horizontal</label>
33.542 - <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
33.543 - </div>
33.544 - <div class="col-md-4">
33.545 - <label>@padding-large-vertical</label>
33.546 - <input type="text" class="form-control" placeholder="10px" data-var="@padding-large-vertical">
33.547 - <label>@padding-large-horizontal</label>
33.548 - <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
33.549 - </div>
33.550 - <div class="col-md-4">
33.551 - <label>@padding-small-vertical</label>
33.552 - <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
33.553 - <label>@padding-small-horizontal</label>
33.554 - <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
33.555 - </div>
33.556 - </div>
33.557 -
33.558 - <h4>Rounded corners</h4>
33.559 - <div class="row">
33.560 - <div class="col-md-4">
33.561 - <label>@border-radius-base</label>
33.562 - <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
33.563 - </div>
33.564 - <div class="col-md-4">
33.565 - <label>@border-radius-large</label>
33.566 - <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
33.567 - </div>
33.568 - <div class="col-md-4">
33.569 - <label>@border-radius-small</label>
33.570 - <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
33.571 - </div>
33.572 - </div>
33.573 -
33.574 - <h4>Component active state</h4>
33.575 - <div class="row">
33.576 - <div class="col-md-6">
33.577 - <label>@component-active-color</label>
33.578 - <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
33.579 - <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
33.580 - </div>
33.581 - <div class="col-md-6">
33.582 - <label>@component-active-bg</label>
33.583 - <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
33.584 - <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
33.585 - </div>
33.586 - </div>
33.587 -
33.588 - <h4>Carets</h4>
33.589 - <div class="row">
33.590 - <div class="col-md-6">
33.591 - <label>@caret-width-base</label>
33.592 - <input type="text" class="form-control" placeholder="4px" data-var="@caret-width-base">
33.593 - </div>
33.594 - <div class="col-md-6">
33.595 - <label>@caret-width-large</label>
33.596 - <input type="text" class="form-control" placeholder="5px" data-var="@caret-width-large">
33.597 - </div>
33.598 - </div>
33.599 -
33.600 -
33.601 - <h2 id="variables-buttons">Buttons</h2>
33.602 - <div class="row">
33.603 - <div class="col-md-6">
33.604 - <label>@btn-font-weight</label>
33.605 - <input type="text" class="form-control" placeholder="normal" data-var="@btn-font-weight">
33.606 - </div>
33.607 - <div class="col-md-6">
33.608 - <label>@btn-link-disabled-color</label>
33.609 - <input type="text" class="form-control" placeholder="@gray-light" data-var="@btn-link-disabled-color">
33.610 - </div>
33.611 - </div>
33.612 - <div class="row">
33.613 - <div class="col-md-6">
33.614 - <h4>Default</h4>
33.615 - <label>@btn-default-color</label>
33.616 - <input type="text" class="form-control" placeholder="#333" data-var="@btn-default-color">
33.617 - <label>@btn-default-bg</label>
33.618 - <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-bg">
33.619 - <label>@btn-default-border</label>
33.620 - <input type="text" class="form-control" placeholder="#ccc" data-var="@btn-default-border">
33.621 - <h4>Primary</h4>
33.622 - <label>@btn-primary-color</label>
33.623 - <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
33.624 - <label>@btn-primary-bg</label>
33.625 - <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
33.626 - <label>@btn-primary-border</label>
33.627 - <input type="text" class="form-control" placeholder="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border">
33.628 - <h4>Info</h4>
33.629 - <label>@btn-info-color</label>
33.630 - <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
33.631 - <label>@btn-info-bg</label>
33.632 - <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
33.633 - <label>@btn-info-border</label>
33.634 - <input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border">
33.635 - </div>
33.636 - <div class="col-md-6">
33.637 - <h4>Success</h4>
33.638 - <label>@btn-success-color</label>
33.639 - <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
33.640 - <label>@btn-success-bg</label>
33.641 - <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
33.642 - <label>@btn-success-border</label>
33.643 - <input type="text" class="form-control" placeholder="darken(@btn-success-bg, 5%);" data-var="@btn-success-border">
33.644 - <h4>Warning</h4>
33.645 - <label>@btn-warning-color</label>
33.646 - <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
33.647 - <label>@btn-warning-bg</label>
33.648 - <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
33.649 - <label>@btn-warning-border</label>
33.650 - <input type="text" class="form-control" placeholder=" darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border">
33.651 - <h4>Danger</h4>
33.652 - <label>@btn-danger-color</label>
33.653 - <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
33.654 - <label>@btn-danger-bg</label>
33.655 - <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
33.656 - <label>@btn-danger-border</label>
33.657 - <input type="text" class="form-control" placeholder="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border">
33.658 - </div>
33.659 - </div>
33.660 -
33.661 -
33.662 - <h2 id="variables-form-states">Form states and alerts</h2>
33.663 - <div class="row">
33.664 - <div class="col-md-6">
33.665 - <h4>Success</h4>
33.666 - <label>@state-success-text</label>
33.667 - <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
33.668 - <label>@state-success-bg</label>
33.669 - <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
33.670 - <label>@state-success-border</label>
33.671 - <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
33.672 - <h4>Warning</h4>
33.673 - <label>@state-warning-text</label>
33.674 - <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
33.675 - <label>@state-warning-bg</label>
33.676 - <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
33.677 - <label>@state-warning-border</label>
33.678 - <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
33.679 - </div>
33.680 - <div class="col-md-6">
33.681 - <h4>Danger</h4>
33.682 - <label>@state-danger-text</label>
33.683 - <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
33.684 - <label>@state-danger-bg</label>
33.685 - <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
33.686 - <label>@state-danger-border</label>
33.687 - <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
33.688 - <h4>Info</h4>
33.689 - <label>@state-info-text</label>
33.690 - <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
33.691 - <label>@state-info-bg</label>
33.692 - <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
33.693 - <label>@state-info-border</label>
33.694 - <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
33.695 - </div>
33.696 - </div>
33.697 -
33.698 -
33.699 - <h2 id="variables-alerts">Alerts</h2>
33.700 -
33.701 - <h4>Base styles</h4>
33.702 - <div class="row">
33.703 - <div class="col-md-4">
33.704 - <label>@alert-padding</label>
33.705 - <input type="text" class="form-control" placeholder="15px" data-var="@alert-padding">
33.706 - </div>
33.707 - <div class="col-md-4">
33.708 - <label>@alert-border-radius</label>
33.709 - <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@alert-border-radius">
33.710 - </div>
33.711 - <div class="col-md-4">
33.712 - <label>@alert-link-font-weight</label>
33.713 - <input type="text" class="form-control" placeholder="bold" data-var="@alert-link-font-weight">
33.714 - </div>
33.715 - </div>
33.716 -
33.717 - <div class="row">
33.718 - <div class="col-lg-6">
33.719 - <h4>Warning</h4>
33.720 - <label>@alert-warning-text</label>
33.721 - <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-warning-text">
33.722 - <label>@alert-warning-bg</label>
33.723 - <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-warning-bg">
33.724 - <label>@alert-warning-border</label>
33.725 - <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-warning-border">
33.726 -
33.727 - <h4>Success</h4>
33.728 - <label>@alert-success-text</label>
33.729 - <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
33.730 - <label>@alert-success-bg</label>
33.731 - <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
33.732 - <label>@alert-success-border</label>
33.733 - <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
33.734 - </div>
33.735 - <div class="col-lg-6">
33.736 - <h4>Danger</h4>
33.737 - <label>@alert-danger-text</label>
33.738 - <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
33.739 - <label>@alert-danger-bg</label>
33.740 - <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
33.741 - <label>@alert-danger-border</label>
33.742 - <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
33.743 -
33.744 - <h4>Info</h4>
33.745 - <label>@alert-info-text</label>
33.746 - <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
33.747 - <label>@alert-info-bg</label>
33.748 - <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
33.749 - <label>@alert-info-border</label>
33.750 - <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
33.751 - </div>
33.752 - </div>
33.753 -
33.754 -
33.755 - <h2 id="variables-navbar">Navbar</h2>
33.756 -
33.757 - <h3>Base styles</h3>
33.758 - <div class="row">
33.759 - <div class="col-md-4">
33.760 - <label>@navbar-height</label>
33.761 - <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
33.762 - <label>@navbar-margin-bottom</label>
33.763 - <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
33.764 - </div>
33.765 - <div class="col-md-4">
33.766 - <label>@navbar-padding-horizontal</label>
33.767 - <input type="text" class="form-control" placeholder="floor(@grid-gutter-width / 2)" data-var="@navbar-padding-horizontal">
33.768 - <label>@navbar-padding-vertical</label>
33.769 - <input type="text" class="form-control" placeholder="((@navbar-height - @line-height-computed) / 2)" data-var="@@navbar-padding-vertical">
33.770 - </div>
33.771 - <div class="col-md-4">
33.772 - <label>@navbar-border-radius</label>
33.773 - <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
33.774 - </div>
33.775 - </div>
33.776 -
33.777 - <div class="row">
33.778 - <div class="col-lg-6">
33.779 - <h3>Default navbar</h3>
33.780 - <h4>Basics</h4>
33.781 - <label>@navbar-default-color</label>
33.782 - <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
33.783 - <label>@navbar-default-bg</label>
33.784 - <input type="text" class="form-control" placeholder="#f8f8f8" data-var="@navbar-default-bg">
33.785 - <label>@navbar-default-border</label>
33.786 - <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border">
33.787 -
33.788 - <h4>Links</h4>
33.789 - <label>@navbar-default-link-color</label>
33.790 - <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
33.791 - <label>@navbar-default-link-hover-color</label>
33.792 - <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
33.793 - <label>@navbar-default-link-hover-bg</label>
33.794 - <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
33.795 - <label>@navbar-default-link-active-color</label>
33.796 - <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
33.797 - <label>@navbar-default-link-active-bg</label>
33.798 - <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg">
33.799 - <label>@navbar-default-link-disabled-color</label>
33.800 - <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
33.801 - <label>@navbar-default-link-disabled-bg</label>
33.802 - <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
33.803 -
33.804 - <h4>Brand</h4>
33.805 - <label>@navbar-default-brand-color</label>
33.806 - <input type="text" class="form-control" placeholder="@navbar-default-link-color" data-var="@navbar-default-brand-color">
33.807 - <label>@navbar-default-brand-hover-color</label>
33.808 - <input type="text" class="form-control" placeholder="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color">
33.809 - <label>@navbar-default-brand-hover-bg</label>
33.810 - <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
33.811 -
33.812 - <h4>Toggle</h4>
33.813 - <label>@navbar-default-toggle-hover-bg</label>
33.814 - <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
33.815 - <label>@navbar-default-toggle-icon-bar-bg</label>
33.816 - <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
33.817 - <label>@navbar-default-toggle-border-color</label>
33.818 - <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
33.819 - </div>
33.820 -
33.821 - <div class="col-lg-6">
33.822 - <h3>Inverted navbar</h3>
33.823 -
33.824 - <h4>Basics</h4>
33.825 - <label>@navbar-inverse-color</label>
33.826 - <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
33.827 - <label>@navbar-inverse-bg</label>
33.828 - <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
33.829 - <label>@navbar-inverse-border</label>
33.830 - <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border">
33.831 -
33.832 - <h4>Links</h4>
33.833 - <label>@navbar-inverse-link-color</label>
33.834 - <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
33.835 - <label>@navbar-inverse-link-hover-color</label>
33.836 - <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
33.837 - <label>@navbar-inverse-link-hover-bg</label>
33.838 - <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
33.839 - <label>@navbar-inverse-link-active-color</label>
33.840 - <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
33.841 - <label>@navbar-inverse-link-active-bg</label>
33.842 - <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
