Shown on the left are all the default form controls we support. Here's the bulleted list:
-Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.
-Shown on the left are all the default form controls we support. Here's the bulleted list:
+Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.
<fieldset class="control-group error"> … </fieldset>-
Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.
-Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.
Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.
Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.
+Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.
Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.
To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.
:after and on hover in the docs we show a light red background color show the icon's size.
+ Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.
An example of a static (not fixed to the top) navbar with project name, navigation, and search form.
- +Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.
+<div class="navbar"> + <div class="navbar-inner"> + <div class="container"> + + <!-- .btn-navbar is used as the toggle for collapsed navbar content --> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="i-bar"></span> + <span class="i-bar"></span> + <span class="i-bar"></span> + </a> + + <!-- Be sure to leave the brand out there if you want it shown --> + <a class="brand" href="#">Project name</a> + + <!-- Everything you want hidden at 940px or less, place within here --> + <div class="nav-collapse"> + <!-- .nav, .navbar-search, .navbar-form, etc --> + </div> + + </div> + </div> +</div> ++
Nav items are simple to add via unordered lists.
@@ -763,9 +800,9 @@ </li> </ul> - -<span class="label success">New</span>
+ <span class="label label-success">New</span>
<span class="label warning">Warning</span>
+ <span class="label label-warning">Warning</span>
<span class="label important">Important</span>
+ <span class="label label-important">Important</span>
<span class="label info">Info</span>
+ <span class="label label-info">Info</span>
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.
@@ -1056,7 +1093,7 @@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.
@@ -1091,7 +1128,7 @@ <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> ... @@ -1102,7 +1139,7 @@ <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> <h5>Thumbnail label</h5> <p>Thumbnail caption right here...</p> </div> @@ -1117,32 +1154,32 @@ @@ -1270,12 +1307,12 @@Uses a gradient to create a striped effect.
-
-<div class="progress info
- striped">
+<div class="progress progress-info
+ progress-striped">
<div class="bar"
style="width: 20%;"></div>
</div>
@@ -1284,12 +1321,12 @@
Animated
Takes the striped example and animates it.
-
+
-<div class="progress danger
- striped active">
+<div class="progress progress-danger
+ progress-striped active">
<div class="bar"
style="width: 40%;"></div>
</div>
@@ -1301,18 +1338,18 @@
Additional colors
- Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
+ Progress bars utilize some of the same class names as buttons and alerts for similar styling.
- .info.success.danger.progress-info.progress-success.progress-danger
Alternatively, you can customize the LESS files and roll your own colors and sizes.
Behavior
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
- If you use the .active class, your .striped progress bars will animate the stripes left to right.
+ If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
Browser support
@@ -1361,10 +1398,6 @@
-
-
-
-
diff --git a/docs/examples.html b/docs/examples.html
index 70a1a54dda..7d79fc0a0a 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -82,20 +82,50 @@
-
-
-
-
- Examples from 1.x
-
-
-
-
-
-
-
-
+
+ -
+
+
+
+ Basic marketing site
+
+
+ -
+
+
+
+
Fluid layout
+
+
+ -
+
+
+
+
Fluid layout reversed
+
+
+ -
+
+
+
+
Container application
+
+
+ -
+
+
+
+
Fullscreen
+
+
+ -
+
+
+
+
Simple layout
+
+
+
- Bootstrap variables
+ Bootstrap variables LESS variables, their values, and usage guidelines
- Hyperlinks
-
-
-
- Variable
- Value
- Usage
-
-
-
-
- @linkColor#08c
- Default link text color
-
-
- @linkColorHoverdarken(@linkColor, 15%)Default link text hover color
-
-
-
-
- Grayscale colors
+ Hyperlinks
-
-
- Variable
- Value
-
-
- @black#000
+ @linkColor#08c
+ Default link text color
+
- @grayDarker#222
-
-
- @grayDark#333
-
-
- @gray#555
-
-
- @grayLight#999
-
-
- @grayLighter#eee
-
-
- @white#fff
+ @linkColorHoverdarken(@linkColor, 15%)Default link text hover color
+
-
-
- Accent colors
-
-
-
- Variable
- Value
-
-
-
-
- @blue#049cdb
-
-
- @green#46a546
-
-
- @red#9d261d
-
-
- @yellow#ffc40d
-
-
- @orange#f89406
-
-
- @pink#c3325f
-
-
- @purple#7a43b6
-
-
-
-
-
-
-
Grid system
-
-
- Variable
- Value
-
-
- @gridColumns@gridColumns12
@@ -273,19 +177,11 @@
-
-
Typography
-
-
- Variable
- Value
-
-
- @baseFontSize@baseFontSize13px
@@ -300,6 +196,88 @@
+
+ Grayscale colors
+
+
+
+ @black#000
+
+
+ @grayDarker#222
+
+
+ @grayDark#333
+
+
+ @gray#555
+
+
+ @grayLight#999
+
+
+ @grayLighter#eee
+
+
+ @white#fff
+
+
+
+ Accent colors
+
+
+
+ @blue#049cdb
+
+
+ @green#46a546
+
+
+ @red#9d261d
+
+
+ @yellow#ffc40d
+
+
+ @orange#f89406
+
+
+ @pink#c3325f
+
+
+ @purple#7a43b6
+
+
+
+
Components
@@ -311,6 +289,7 @@
@primaryButtonBackground@linkColor
@@ -320,6 +299,7 @@
@placeholderText@grayLight
@@ -329,26 +309,32 @@
@navbarHeight40px
+
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark
@navbarText@grayLight
@navbarLinkColor@grayLight
@navbarLinkColorHover@white
@@ -360,50 +346,42 @@
@warningText#f3edd2
+
@warningBackground#c09853
-
-
- @warningBorder#f3edd2
+
@errorText#b94a48
+
@errorBackground#f2dede
-
-
- @errorBorder#e9c7c7
+
@successText#468847
+
@successBackground#dff0d8
-
-
- @successBorder#cfe8c4
+
@infoText#3a87ad
+
@infoBackground#d9edf7
-
-
- @infoBorder#bfe1f2
+
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 14da044bba..b00f5630b5 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -124,7 +124,6 @@
12
-
The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.
@@ -390,7 +389,7 @@
@media (min-width: 768px) and (max-width: 940px) { ... }
// Large desktop
- @media (min-width: 1210px) { .. }
+ @media (min-width: 1200px) { .. }
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6cbb111acb..2b9a459c80 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -880,22 +880,20 @@
-
- {{_i}}What's included{{/i}}
- {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}
-
- - {{_i}}text inputs (text, password, email, etc){{/i}}
- - {{_i}}checkbox{{/i}}
- - {{_i}}radio{{/i}}
- - {{_i}}select{{/i}}
- - {{_i}}multiple select{{/i}}
- - {{_i}}file input{{/i}}
- - {{_i}}textarea{{/i}}
-
-
- {{_i}}New defaults with v2.0{{/i}}
- {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}
-
+ {{_i}}What's included{{/i}}
+ {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}
+
+ - {{_i}}text inputs (text, password, email, etc){{/i}}
+ - {{_i}}checkbox{{/i}}
+ - {{_i}}radio{{/i}}
+ - {{_i}}select{{/i}}
+ - {{_i}}multiple select{{/i}}
+ - {{_i}}file input{{/i}}
+ - {{_i}}textarea{{/i}}
+
+
+ {{_i}}New defaults with v2.0{{/i}}
+ {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}
@@ -975,19 +973,17 @@
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}
<fieldset class="control-group error"> … </fieldset>-
{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}
-{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}
{{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}
{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}
+{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}
{{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}
{{_i}}To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.{{/i}}
:after and on hover in the docs we show a light red background color show the icon's size.{{/i}}
+ {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}
- +{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
+<div class="navbar">
+ <div class="navbar-inner">
+ <div class="container">
+
+ <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="i-bar"></span>
+ <span class="i-bar"></span>
+ <span class="i-bar"></span>
+ </a>
+
+ <!-- Be sure to leave the brand out there if you want it shown -->
+ <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
+
+ <!-- Everything you want hidden at 940px or less, place within here -->
+ <div class="nav-collapse">
+ <!-- .nav, .navbar-search, .navbar-form, etc -->
+ </div>
+
+ </div>
+ </div>
+</div>
+
+ {{_i}}Nav items are simple to add via unordered lists.{{/i}}
@@ -691,9 +728,9 @@ </li> </ul> - -{{_i}}Get the javascript →{{/i}}
+ + @@ -898,34 +935,34 @@<span class="label success">{{/_i}}New{{/i}}</span>
+ <span class="label label-success">{{/_i}}New{{/i}}</span>
<span class="label warning">{{_i}}Warning{{/i}}</span>
+ <span class="label label-warning">{{_i}}Warning{{/i}}</span>
<span class="label important">{{_i}}Important{{/i}}</span>
+ <span class="label label-important">{{_i}}Important{{/i}}</span>
<span class="label info">{{_i}}Info{{/i}}</span>
+ <span class="label label-info">{{_i}}Info{{/i}}</span>
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.
@@ -984,7 +1021,7 @@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.
@@ -1019,7 +1056,7 @@ <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> ... @@ -1030,7 +1067,7 @@ <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> <h5>{{_i}}Thumbnail label{{/i}}</h5> <p>{{_i}}Thumbnail caption right here...{{/i}}</p> </div> @@ -1045,32 +1082,32 @@ @@ -1198,12 +1235,12 @@{{_i}}Uses a gradient to create a striped effect.{{/i}}
-
-<div class="progress info
- striped">
+<div class="progress progress-info
+ progress-striped">
<div class="bar"
style="width: 20%;"></div>
</div>
@@ -1212,12 +1249,12 @@
{{_i}}Animated{{/i}}
{{_i}}Takes the striped example and animates it.{{/i}}
-
+
-<div class="progress danger
- striped active">
+<div class="progress progress-danger
+ progress-striped active">
<div class="bar"
style="width: 40%;"></div>
</div>
@@ -1229,18 +1266,18 @@
{{_i}}Additional colors{{/i}}
- {{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}
+ {{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}
- .info.success.danger.progress-info.progress-success.progress-danger
{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}
{{_i}}Behavior{{/i}}
{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}
- {{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}
+ {{_i}}If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.{{/i}}
{{_i}}Browser support{{/i}}
@@ -1287,7 +1324,3 @@
-
-
-
-
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index dccc5fbb66..34f8130ac1 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -63,12 +63,8 @@
-
+
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 3c102bef21..850ac0fa69 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -10,17 +10,47 @@
-
-
-
-
- {{_i}}Examples from 1.x{{/i}}
-
-
-
-
-
-
-
-
+| {{_i}}Variable{{/i}} | -{{_i}}Value{{/i}} | -{{_i}}Usage{{/i}} | -
|---|---|---|
@linkColor |
- #08c | -{{_i}}Default link text color{{/i}} | -
@linkColorHover |
- darken(@linkColor, 15%) |
- {{_i}}Default link text hover color{{/i}} | -
| {{_i}}Variable{{/i}} | -{{_i}}Value{{/i}} | -||||
|---|---|---|---|---|---|
@black |
- #000 | +@linkColor |
+ #08c | +{{_i}}Default link text color{{/i}} | +|
@grayDarker |
- #222 | -||||
@grayDark |
- #333 | -||||
@gray |
- #555 | -||||
@grayLight |
- #999 | -||||
@grayLighter |
- #eee | -||||
@white |
- #fff | +@linkColorHover |
+ darken(@linkColor, 15%) |
+ {{_i}}Default link text hover color{{/i}} | +
| {{_i}}Variable{{/i}} | -{{_i}}Value{{/i}} | -
|---|---|
@blue |
- #049cdb | -
@green |
- #46a546 | -
@red |
- #9d261d | -
@yellow |
- #ffc40d | -
@orange |
- #f89406 | -
@pink |
- #c3325f | -
@purple |
- #7a43b6 | -
| {{_i}}Variable{{/i}} | -{{_i}}Value{{/i}} | -|
|---|---|---|
@gridColumns |
+ @gridColumns |
12 |
| {{_i}}Variable{{/i}} | -{{_i}}Value{{/i}} | -|
|---|---|---|
@baseFontSize |
+ @baseFontSize |
13px |
@black |
+ #000 | ++ |
@grayDarker |
+ #222 | ++ |
@grayDark |
+ #333 | ++ |
@gray |
+ #555 | ++ |
@grayLight |
+ #999 | ++ |
@grayLighter |
+ #eee | ++ |
@white |
+ #fff | ++ |
@blue |
+ #049cdb | ++ |
@green |
+ #46a546 | ++ |
@red |
+ #9d261d | ++ |
@yellow |
+ #ffc40d | ++ |
@orange |
+ #f89406 | ++ |
@pink |
+ #c3325f | ++ |
@purple |
+ #7a43b6 | ++ |
@primaryButtonBackground@linkColor@placeholderText@grayLight@navbarHeight@navbarBackground@grayDarker@navbarBackgroundHighlight@grayDark@navbarText@grayLight@navbarLinkColor@grayLight@navbarLinkColorHover@white@warningText@warningBackground@warningBorder@errorText@errorBackground@errorBorder@successText@successBackground@successBorder@infoText@infoBackground@infoBorder{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}
@@ -318,7 +317,7 @@ @media (min-width: 768px) and (max-width: 940px) { ... } // {{_i}}Large desktop{{/i}} - @media (min-width: 1210px) { .. } + @media (min-width: 1200px) { .. }.topbar to .navbar{{/i}}.navbar-fixed-top (previously only supported fixed){{/i}}.navbar-form to properly scope styles to only the intended forms.{{/i}}.navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.{{/i}}.dropdown-menu to tighten up spacing{{/i}}.topbar to .navbar.navbar-fixed-top (previously only supported fixed).navbar-form to properly scope styles to only the intended forms..navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right..dropdown-menu to tighten up spacing