diff --git a/README.md b/README.md
index 0395568580..47a4aa718c 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,17 @@
-TWITTER BOOTSTRAP
+[Twitter Bootstrap](http://twitter.github.com/bootstrap)
=================
-Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.
+Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it's a front-end toolkit for faster, more beautiful web development. It's created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat) at Twitter.
+
+To get started, checkout http://twitter.github.com/bootstrap!
+
+
+
+Quick start
+-----------
+
+Clone the repo, `git clone git@github.com:twitter/bootstrap.git`, or [download the latest release](https://github.com/twitter/bootstrap/zipball/master).
-To get started -- checkout http://twitter.github.com/bootstrap!
Versioning
@@ -24,6 +32,7 @@ And constructed with the following guidelines:
For more information on SemVer, please visit http://semver.org/.
+
Bug tracker
-----------
@@ -32,10 +41,12 @@ Have a bug? Please create an issue here on GitHub!
https://github.com/twitter/bootstrap/issues
+
Twitter account
---------------
-Keep up to date on announcements and more by following Bootstrap on Twitter, @TwBootstrap .
+Keep up to date on announcements and more by following Bootstrap on Twitter, [@TwBootstrap](http://twitter.com/TwBootstrap).
+
Mailing list
@@ -48,6 +59,7 @@ twitter-bootstrap@googlegroups.com
http://groups.google.com/group/twitter-bootstrap
+
IRC
---
@@ -56,6 +68,7 @@ Server: irc.freenode.net
Channel: ##twitter-bootstrap (the double ## is not a typo)
+
Developers
----------
@@ -68,6 +81,7 @@ Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
+
Authors
-------
@@ -82,6 +96,7 @@ Authors
+ http://github.com/fat
+
Copyright and license
---------------------
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 9add96d32b..10b3a62554 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index d77d97d13e..447a865c8e 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -21,6 +21,52 @@
display: none;
visibility: hidden;
}
+.visible-phone {
+ display: none;
+}
+.visible-tablet {
+ display: none;
+}
+.visible-desktop {
+ display: block;
+}
+.hidden-phone {
+ display: block;
+}
+.hidden-tablet {
+ display: block;
+}
+.hidden-desktop {
+ display: none;
+}
+@media (max-width: 767px) {
+ .visible-phone {
+ display: block;
+ }
+ .hidden-phone {
+ display: none;
+ }
+ .hidden-desktop {
+ display: block;
+ }
+ .visible-desktop {
+ display: none;
+ }
+}
+@media (min-width: 768px) and (max-width: 979px) {
+ .visible-tablet {
+ display: block;
+ }
+ .hidden-tablet {
+ display: none;
+ }
+ .hidden-desktop {
+ display: block;
+ }
+ .visible-desktop {
+ display: none;
+ }
+}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
@@ -128,6 +174,9 @@
float: left;
margin-left: 20px;
}
+ .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+ width: 724px;
+ }
.span1 {
width: 42px;
}
@@ -161,7 +210,7 @@
.span11 {
width: 662px;
}
- .span12, .container {
+ .span12 {
width: 724px;
}
.offset1 {
@@ -197,6 +246,9 @@
.offset11 {
margin-left: 702px;
}
+ .offset12 {
+ margin-left: 764px;
+ }
.row-fluid {
width: 100%;
*zoom: 1;
@@ -251,40 +303,43 @@
.row-fluid > .span12 {
width: 99.999999993%;
}
- input.span1, textarea.span1, .uneditable-input.span1 {
+ input, textarea, .uneditable-input {
+ margin-left: 0;
+ }
+ input > .span1, textarea > .span1, .uneditable-input > .span1 {
width: 32px;
}
- input.span2, textarea.span2, .uneditable-input.span2 {
+ input > .span2, textarea > .span2, .uneditable-input > .span2 {
width: 94px;
}
- input.span3, textarea.span3, .uneditable-input.span3 {
+ input > .span3, textarea > .span3, .uneditable-input > .span3 {
width: 156px;
}
- input.span4, textarea.span4, .uneditable-input.span4 {
+ input > .span4, textarea > .span4, .uneditable-input > .span4 {
width: 218px;
}
- input.span5, textarea.span5, .uneditable-input.span5 {
+ input > .span5, textarea > .span5, .uneditable-input > .span5 {
width: 280px;
}
- input.span6, textarea.span6, .uneditable-input.span6 {
+ input > .span6, textarea > .span6, .uneditable-input > .span6 {
width: 342px;
}
- input.span7, textarea.span7, .uneditable-input.span7 {
+ input > .span7, textarea > .span7, .uneditable-input > .span7 {
width: 404px;
}
- input.span8, textarea.span8, .uneditable-input.span8 {
+ input > .span8, textarea > .span8, .uneditable-input > .span8 {
width: 466px;
}
- input.span9, textarea.span9, .uneditable-input.span9 {
+ input > .span9, textarea > .span9, .uneditable-input > .span9 {
width: 528px;
}
- input.span10, textarea.span10, .uneditable-input.span10 {
+ input > .span10, textarea > .span10, .uneditable-input > .span10 {
width: 590px;
}
- input.span11, textarea.span11, .uneditable-input.span11 {
+ input > .span11, textarea > .span11, .uneditable-input > .span11 {
width: 652px;
}
- input.span12, textarea.span12, .uneditable-input.span12 {
+ input > .span12, textarea > .span12, .uneditable-input > .span12 {
width: 714px;
}
}
@@ -395,6 +450,7 @@
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
+ overflow: visible !important;
}
}
@media (min-width: 1200px) {
@@ -413,6 +469,9 @@
float: left;
margin-left: 30px;
}
+ .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+ width: 1170px;
+ }
.span1 {
width: 70px;
}
@@ -446,7 +505,7 @@
.span11 {
width: 1070px;
}
- .span12, .container {
+ .span12 {
width: 1170px;
}
.offset1 {
@@ -482,6 +541,9 @@
.offset11 {
margin-left: 1130px;
}
+ .offset12 {
+ margin-left: 1230px;
+ }
.row-fluid {
width: 100%;
*zoom: 1;
@@ -536,40 +598,43 @@
.row-fluid > .span12 {
width: 100%;
}
- input.span1, textarea.span1, .uneditable-input.span1 {
+ input, textarea, .uneditable-input {
+ margin-left: 0;
+ }
+ input > .span1, textarea > .span1, .uneditable-input > .span1 {
width: 60px;
}
- input.span2, textarea.span2, .uneditable-input.span2 {
+ input > .span2, textarea > .span2, .uneditable-input > .span2 {
width: 160px;
}
- input.span3, textarea.span3, .uneditable-input.span3 {
+ input > .span3, textarea > .span3, .uneditable-input > .span3 {
width: 260px;
}
- input.span4, textarea.span4, .uneditable-input.span4 {
+ input > .span4, textarea > .span4, .uneditable-input > .span4 {
width: 360px;
}
- input.span5, textarea.span5, .uneditable-input.span5 {
+ input > .span5, textarea > .span5, .uneditable-input > .span5 {
width: 460px;
}
- input.span6, textarea.span6, .uneditable-input.span6 {
+ input > .span6, textarea > .span6, .uneditable-input > .span6 {
width: 560px;
}
- input.span7, textarea.span7, .uneditable-input.span7 {
+ input > .span7, textarea > .span7, .uneditable-input > .span7 {
width: 660px;
}
- input.span8, textarea.span8, .uneditable-input.span8 {
+ input > .span8, textarea > .span8, .uneditable-input > .span8 {
width: 760px;
}
- input.span9, textarea.span9, .uneditable-input.span9 {
+ input > .span9, textarea > .span9, .uneditable-input > .span9 {
width: 860px;
}
- input.span10, textarea.span10, .uneditable-input.span10 {
+ input > .span10, textarea > .span10, .uneditable-input > .span10 {
width: 960px;
}
- input.span11, textarea.span11, .uneditable-input.span11 {
+ input > .span11, textarea > .span11, .uneditable-input > .span11 {
width: 1060px;
}
- input.span12, textarea.span12, .uneditable-input.span12 {
+ input > .span12, textarea > .span12, .uneditable-input > .span12 {
width: 1160px;
}
.thumbnails {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c3e0c00539..2881d6a84d 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -53,7 +53,6 @@ sub {
bottom: -0.25em;
}
img {
- max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
@@ -135,6 +134,9 @@ a:hover {
float: left;
margin-left: 20px;
}
+.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+ width: 940px;
+}
.span1 {
width: 60px;
}
@@ -168,7 +170,7 @@ a:hover {
.span11 {
width: 860px;
}
-.span12, .container {
+.span12 {
width: 940px;
}
.offset1 {
@@ -204,6 +206,9 @@ a:hover {
.offset11 {
margin-left: 900px;
}
+.offset12 {
+ margin-left: 980px;
+}
.row-fluid {
width: 100%;
*zoom: 1;
@@ -259,7 +264,6 @@ a:hover {
width: 99.99999998999999%;
}
.container {
- width: 940px;
margin-left: auto;
margin-right: auto;
*zoom: 1;
@@ -415,12 +419,14 @@ em {
.muted {
color: #999999;
}
-abbr {
- font-size: 90%;
- text-transform: uppercase;
+abbr[title] {
border-bottom: 1px dotted #ddd;
cursor: help;
}
+abbr.initialism {
+ font-size: 90%;
+ text-transform: uppercase;
+}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 18px;
@@ -478,7 +484,7 @@ code, pre {
border-radius: 3px;
}
code {
- padding: 3px 4px;
+ padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
@@ -720,40 +726,43 @@ textarea[class*="span"],
float: none;
margin-left: 0;
}
-input.span1, textarea.span1, .uneditable-input.span1 {
+input, textarea, .uneditable-input {
+ margin-left: 0;
+}
+input > .span1, textarea > .span1, .uneditable-input > .span1 {
width: 50px;
}
-input.span2, textarea.span2, .uneditable-input.span2 {
+input > .span2, textarea > .span2, .uneditable-input > .span2 {
width: 130px;
}
-input.span3, textarea.span3, .uneditable-input.span3 {
+input > .span3, textarea > .span3, .uneditable-input > .span3 {
width: 210px;
}
-input.span4, textarea.span4, .uneditable-input.span4 {
+input > .span4, textarea > .span4, .uneditable-input > .span4 {
width: 290px;
}
-input.span5, textarea.span5, .uneditable-input.span5 {
+input > .span5, textarea > .span5, .uneditable-input > .span5 {
width: 370px;
}
-input.span6, textarea.span6, .uneditable-input.span6 {
+input > .span6, textarea > .span6, .uneditable-input > .span6 {
width: 450px;
}
-input.span7, textarea.span7, .uneditable-input.span7 {
+input > .span7, textarea > .span7, .uneditable-input > .span7 {
width: 530px;
}
-input.span8, textarea.span8, .uneditable-input.span8 {
+input > .span8, textarea > .span8, .uneditable-input > .span8 {
width: 610px;
}
-input.span9, textarea.span9, .uneditable-input.span9 {
+input > .span9, textarea > .span9, .uneditable-input > .span9 {
width: 690px;
}
-input.span10, textarea.span10, .uneditable-input.span10 {
+input > .span10, textarea > .span10, .uneditable-input > .span10 {
width: 770px;
}
-input.span11, textarea.span11, .uneditable-input.span11 {
+input > .span11, textarea > .span11, .uneditable-input > .span11 {
width: 850px;
}
-input.span12, textarea.span12, .uneditable-input.span12 {
+input > .span12, textarea > .span12, .uneditable-input > .span12 {
width: 930px;
}
input[disabled],
@@ -836,6 +845,14 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
margin-bottom: 18px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
+ *zoom: 1;
+}
+.form-actions:before, .form-actions:after {
+ display: table;
+ content: "";
+}
+.form-actions:after {
+ clear: both;
}
.uneditable-input {
display: block;
@@ -852,11 +869,12 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
::-webkit-input-placeholder {
color: #999999;
}
+.help-block, .help-inline {
+ color: #555555;
+}
.help-block {
display: block;
- margin-top: 5px;
- margin-bottom: 0;
- color: #999999;
+ margin-bottom: 9px;
}
.help-inline {
display: inline-block;
@@ -864,7 +882,6 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
/* IE7 inline-block hack */
*zoom: 1;
- margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
}
@@ -884,6 +901,8 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
}
.input-prepend input,
.input-append input,
+.input-prepend select,
+.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input {
-webkit-border-radius: 0 3px 3px 0;
@@ -892,6 +911,8 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
}
.input-prepend input:focus,
.input-append input:focus,
+.input-prepend select:focus,
+.input-append select:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
position: relative;
@@ -910,7 +931,6 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
- color: #999999;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #f5f5f5;
@@ -928,7 +948,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
/* IE6-7 */
}
-.input-append input, .input-append .uneditable-input {
+.input-append input, .input-append select .uneditable-input {
float: left;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
@@ -989,18 +1009,27 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: inline-block;
}
.form-search .input-append .add-on,
-.form-inline .input-prepend .add-on,
-.form-search .input-append .add-on,
+.form-search .input-prepend .add-on,
+.form-inline .input-append .add-on,
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
.form-search .radio,
-.form-inline .radio,
.form-search .checkbox,
+.form-inline .radio,
.form-inline .checkbox {
+ padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+ float: left;
+ margin-left: 0;
+ margin-right: 3px;
+}
.control-group {
margin-bottom: 9px;
}
@@ -1028,6 +1057,10 @@ legend + .control-group {
.form-horizontal .controls {
margin-left: 160px;
}
+.form-horizontal .help-block {
+ margin-top: 9px;
+ margin-bottom: 0;
+}
.form-horizontal .form-actions {
padding-left: 160px;
}
@@ -1064,20 +1097,19 @@ table {
}
.table-bordered {
border: 1px solid #ddd;
+ border-left: 0;
border-collapse: separate;
*border-collapse: collapsed;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.table-bordered th + th,
-.table-bordered td + td,
-.table-bordered th + td,
-.table-bordered td + th {
+.table-bordered th, .table-bordered td {
border-left: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
+ border-bottom: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
@@ -1165,6 +1197,66 @@ table .span12 {
width: 924px;
margin-left: 0;
}
+table .span13 {
+ float: none;
+ width: 1004px;
+ margin-left: 0;
+}
+table .span14 {
+ float: none;
+ width: 1084px;
+ margin-left: 0;
+}
+table .span15 {
+ float: none;
+ width: 1164px;
+ margin-left: 0;
+}
+table .span16 {
+ float: none;
+ width: 1244px;
+ margin-left: 0;
+}
+table .span17 {
+ float: none;
+ width: 1324px;
+ margin-left: 0;
+}
+table .span18 {
+ float: none;
+ width: 1404px;
+ margin-left: 0;
+}
+table .span19 {
+ float: none;
+ width: 1484px;
+ margin-left: 0;
+}
+table .span20 {
+ float: none;
+ width: 1564px;
+ margin-left: 0;
+}
+table .span21 {
+ float: none;
+ width: 1644px;
+ margin-left: 0;
+}
+table .span22 {
+ float: none;
+ width: 1724px;
+ margin-left: 0;
+}
+table .span23 {
+ float: none;
+ width: 1804px;
+ margin-left: 0;
+}
+table .span24 {
+ float: none;
+ width: 1884px;
+ margin-left: 0;
+}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
@@ -1581,7 +1673,6 @@ table .span12 {
float: left;
display: none;
min-width: 160px;
- _width: 160px;
padding: 4px 0;
margin: 0;
list-style: none;
@@ -1602,14 +1693,13 @@ table .span12 {
*border-right-width: 2px;
*border-bottom-width: 2px;
}
-.dropdown-menu.bottom-up {
- top: auto;
- bottom: 100%;
- margin-bottom: 2px;
+.dropdown-menu.pull-right {
+ right: 0;
+ left: auto;
}
.dropdown-menu .divider {
height: 1px;
- margin: 5px 1px;
+ margin: 8px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -1641,6 +1731,20 @@ table .span12 {
.dropdown.open .dropdown-menu {
display: block;
}
+.pull-right .dropdown-menu {
+ left: auto;
+ right: 0;
+}
+.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
+ border-top: 0;
+ border-bottom: 4px solid #000000;
+ content: "\2191";
+}
+.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
+ top: auto;
+ bottom: 100%;
+ margin-bottom: 1px;
+}
.typeahead {
margin-top: 2px;
-webkit-border-radius: 4px;
@@ -1737,7 +1841,6 @@ table .span12 {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
*margin-left: .3em;
}
.btn:hover,
@@ -1832,7 +1935,7 @@ table .span12 {
.btn-danger.active,
.btn-success.active,
.btn-info.active,
-.btn-dark.active {
+.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
@@ -1956,16 +2059,16 @@ table .span12 {
background-color: #24748c \9;
}
.btn-inverse {
- background-color: #393939;
- background-image: -moz-linear-gradient(top, #454545, #262626);
- background-image: -ms-linear-gradient(top, #454545, #262626);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
- background-image: -webkit-linear-gradient(top, #454545, #262626);
- background-image: -o-linear-gradient(top, #454545, #262626);
- background-image: linear-gradient(top, #454545, #262626);
+ background-color: #414141;
+ background-image: -moz-linear-gradient(top, #555555, #222222);
+ background-image: -ms-linear-gradient(top, #555555, #222222);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
+ background-image: -webkit-linear-gradient(top, #555555, #222222);
+ background-image: -o-linear-gradient(top, #555555, #222222);
+ background-image: linear-gradient(top, #555555, #222222);
background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
- border-color: #262626 #262626 #000000;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
+ border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@@ -1974,10 +2077,10 @@ table .span12 {
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
- background-color: #262626;
+ background-color: #222222;
}
.btn-inverse:active, .btn-inverse.active {
- background-color: #0c0c0c \9;
+ background-color: #080808 \9;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
@@ -1987,11 +2090,11 @@ button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
-button.btn.large, input[type="submit"].btn.large {
+button.btn.btn-large, input[type="submit"].btn.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
-button.btn.small, input[type="submit"].btn.small {
+button.btn.btn-small, input[type="submit"].btn.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
@@ -2114,6 +2217,7 @@ button.btn.small, input[type="submit"].btn.small {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
+ border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
@@ -2129,10 +2233,11 @@ button.btn.small, input[type="submit"].btn.small {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-}
-.alert, .alert-heading {
color: #c09853;
}
+.alert-heading {
+ color: inherit;
+}
.alert .close {
position: relative;
top: -2px;
@@ -2142,25 +2247,16 @@ button.btn.small, input[type="submit"].btn.small {
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
-}
-.alert-success, .alert-success .alert-heading {
color: #468847;
}
.alert-danger, .alert-error {
background-color: #f2dede;
border-color: #eed3d7;
-}
-.alert-danger,
-.alert-error,
-.alert-danger .alert-heading,
-.alert-error .alert-heading {
color: #b94a48;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
-}
-.alert-info, .alert-info .alert-heading {
color: #3a87ad;
}
.alert-block {
@@ -2219,6 +2315,15 @@ button.btn.small, input[type="submit"].btn.small {
.nav-list [class^="icon-"] {
margin-right: 2px;
}
+.nav-list .divider {
+ height: 1px;
+ margin: 8px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid #ffffff;
+ *width: 100%;
+ *margin: -5px 0 5px;
+}
.nav-tabs, .nav-pills {
*zoom: 1;
}
@@ -2248,8 +2353,9 @@ button.btn.small, input[type="submit"].btn.small {
margin-bottom: -1px;
}
.nav-tabs > li > a {
- padding-top: 9px;
- padding-bottom: 9px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
@@ -2324,13 +2430,16 @@ button.btn.small, input[type="submit"].btn.small {
}
.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: #0088cc;
+ border-bottom-color: #0088cc;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
+ border-bottom-color: #005580;
}
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333;
+ border-bottom-color: #333333;
}
.nav > .dropdown.active > a:hover {
color: #000000;
@@ -2343,6 +2452,7 @@ button.btn.small, input[type="submit"].btn.small {
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
+ border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
@@ -2360,7 +2470,8 @@ button.btn.small, input[type="submit"].btn.small {
clear: both;
}
.tab-content {
- overflow: hidden;
+ display: table;
+ width: 100%;
}
.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
border-bottom: 0;
@@ -2457,6 +2568,9 @@ button.btn.small, input[type="submit"].btn.small {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
+.navbar .container {
+ width: auto;
+}
.btn-navbar {
display: none;
float: right;
@@ -2507,6 +2621,9 @@ button.btn.small, input[type="submit"].btn.small {
.nav-collapse.collapse {
height: auto;
}
+.navbar {
+ color: #999999;
+}
.navbar .brand:hover {
text-decoration: none;
}
@@ -2523,11 +2640,6 @@ button.btn.small, input[type="submit"].btn.small {
.navbar .navbar-text {
margin-bottom: 0;
line-height: 40px;
- color: #999999;
-}
-.navbar .navbar-text a:hover {
- color: #ffffff;
- background-color: transparent;
}
.navbar .btn, .navbar .btn-group {
margin-top: 5px;
@@ -2546,14 +2658,16 @@ button.btn.small, input[type="submit"].btn.small {
.navbar-form:after {
clear: both;
}
+.navbar-form input,
+.navbar-form select,
+.navbar-form .radio,
+.navbar-form .checkbox {
+ margin-top: 5px;
+}
.navbar-form input, .navbar-form select {
display: inline-block;
- margin-top: 5px;
margin-bottom: 0;
}
-.navbar-form .radio, .navbar-form .checkbox {
- margin-top: 5px;
-}
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
@@ -2612,20 +2726,29 @@ button.btn.small, input[type="submit"].btn.small {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0;
}
-.navbar-fixed-top {
+.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
- top: 0;
right: 0;
left: 0;
z-index: 1030;
+ margin-bottom: 0;
}
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
+.navbar-fixed-top .container, .navbar-fixed-bottom .container {
+ width: 940px;
+}
+.navbar-fixed-top {
+ top: 0;
+}
+.navbar-fixed-bottom {
+ bottom: 0;
+}
.navbar .nav {
position: relative;
left: 0;
@@ -2697,8 +2820,22 @@ button.btn.small, input[type="submit"].btn.small {
top: -6px;
left: 10px;
}
+.navbar-fixed-bottom .dropdown-menu:before {
+ border-top: 7px solid #ccc;
+ border-top-color: rgba(0, 0, 0, 0.2);
+ border-bottom: 0;
+ bottom: -7px;
+ top: auto;
+}
+.navbar-fixed-bottom .dropdown-menu:after {
+ border-top: 6px solid #ffffff;
+ border-bottom: 0;
+ bottom: -6px;
+ top: auto;
+}
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
+ border-bottom-color: #ffffff;
}
.navbar .nav .active .caret {
opacity: 1;
@@ -2710,21 +2847,22 @@ button.btn.small, input[type="submit"].btn.small {
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
-.navbar .nav.pull-right .dropdown-menu {
+.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
-.navbar .nav.pull-right .dropdown-menu:before {
+.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
-.navbar .nav.pull-right .dropdown-menu:after {
+.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}
.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
+ list-style: none;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
@@ -2790,7 +2928,7 @@ button.btn.small, input[type="submit"].btn.small {
color: #999999;
cursor: default;
}
-.pagination .disabled a, .pagination .disabled a:hover {
+.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {
color: #999999;
background-color: transparent;
cursor: default;
@@ -2881,7 +3019,6 @@ button.btn.small, input[type="submit"].btn.small {
top: 50%;
left: 50%;
z-index: 1050;
- max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
@@ -2920,14 +3057,17 @@ button.btn.small, input[type="submit"].btn.small {
margin-top: 2px;
}
.modal-body {
+ overflow-y: auto;
+ max-height: 400px;
padding: 15px;
}
-.modal-body .modal-form {
+.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
+ text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
@@ -2945,8 +3085,7 @@ button.btn.small, input[type="submit"].btn.small {
.modal-footer:after {
clear: both;
}
-.modal-footer .btn {
- float: right;
+.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
@@ -3160,10 +3299,12 @@ a.thumbnail:hover {
padding: 9px;
}
.label {
- padding: 2px 4px 3px;
- font-size: 11.049999999999999px;
+ padding: 1px 4px 2px;
+ font-size: 10.998px;
font-weight: bold;
+ line-height: 13px;
color: #ffffff;
+ white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 3px;
@@ -3198,6 +3339,58 @@ a.thumbnail:hover {
.label-info:hover {
background-color: #2d6987;
}
+.label-inverse {
+ background-color: #333333;
+}
+.label-inverse:hover {
+ background-color: #1a1a1a;
+}
+.badge {
+ padding: 1px 9px 2px;
+ font-size: 12.025px;
+ font-weight: bold;
+ white-space: nowrap;
+ color: #ffffff;
+ background-color: #999999;
+ -webkit-border-radius: 9px;
+ -moz-border-radius: 9px;
+ border-radius: 9px;
+}
+.badge:hover {
+ color: #ffffff;
+ text-decoration: none;
+ cursor: pointer;
+}
+.badge-error {
+ background-color: #b94a48;
+}
+.badge-error:hover {
+ background-color: #953b39;
+}
+.badge-warning {
+ background-color: #f89406;
+}
+.badge-warning:hover {
+ background-color: #c67605;
+}
+.badge-success {
+ background-color: #468847;
+}
+.badge-success:hover {
+ background-color: #356635;
+}
+.badge-info {
+ background-color: #3a87ad;
+}
+.badge-info:hover {
+ background-color: #2d6987;
+}
+.badge-inverse {
+ background-color: #333333;
+}
+.badge-inverse:hover {
+ background-color: #1a1a1a;
+}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f6a388c236..d62ce4bebc 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -79,6 +79,9 @@ hr.soften {
-moz-border-radius: 6px;
border-radius: 6px;
}
+.jumbotron .btn-large small {
+ font-size: 14px;
+}
/* Masthead (docs home) */
.masthead {
@@ -427,17 +430,17 @@ hr.soften {
.download-btn {
margin: 36px 0 108px;
}
-.download p,
-.download h4 {
+#download p,
+#download h4 {
max-width: 50%;
margin: 0 auto;
color: #999;
text-align: center;
}
-.download h4 {
+#download h4 {
margin-bottom: 0;
}
-.download p {
+#download p {
margin-bottom: 18px;
}
.download-btn .btn {
@@ -482,8 +485,7 @@ hr.soften {
/* Misc
-------------------------------------------------- */
-
-.browser-support {
+img {
max-width: 100%;
}
@@ -558,6 +560,70 @@ form.well {
background-color: #fff;
}
+/* Responsive table
+------------------------- */
+.responsive-utilities th small {
+ display: block;
+ font-weight: normal;
+ color: #999;
+}
+.responsive-utilities tbody th {
+ font-weight: normal;
+}
+.responsive-utilities td {
+ text-align: center;
+}
+.responsive-utilities td.is-visible {
+ color: #468847;
+ background-color: #dff0d8 !important;
+}
+.responsive-utilities td.is-hidden {
+ color: #ccc;
+ background-color: #f9f9f9 !important;
+}
+
+/* Responsive tests
+------------------------- */
+.responsive-utilities-test {
+ margin-top: 5px;
+ margin-left: 0;
+ list-style: none;
+ overflow: hidden; /* clear floats */
+}
+.responsive-utilities-test li {
+ position: relative;
+ float: left;
+ width: 25%;
+ height: 43px;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 43px;
+ color: #999;
+ text-align: center;
+ border: 1px solid #ddd;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.responsive-utilities-test li + li {
+ margin-left: 10px;
+}
+.responsive-utilities-test span {
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.responsive-utilities-test span {
+ color: #468847;
+ background-color: #dff0d8;
+ border: 1px solid #d6e9c6;
+}
+
/* Responsive Docs
-------------------------------------------------- */
diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js
index 810256e80a..e0091a7d0a 100644
--- a/docs/assets/js/bootstrap-carousel.js
+++ b/docs/assets/js/bootstrap-carousel.js
@@ -29,6 +29,9 @@
this.$element = $(element)
this.options = $.extend({}, $.fn.carousel.defaults, options)
this.options.slide && this.slide(this.options.slide)
+ this.options.pause == 'hover' && this.$element
+ .on('mouseenter', $.proxy(this.pause, this))
+ .on('mouseleave', $.proxy(this.cycle, this))
}
Carousel.prototype = {
@@ -83,14 +86,14 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
- if (!$next.length) return
-
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
+ if ($next.hasClass('active')) return
+
if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide')
$active.removeClass('active')
@@ -136,6 +139,7 @@
$.fn.carousel.defaults = {
interval: 5000
+ , pause: 'hover'
}
$.fn.carousel.Constructor = Carousel
diff --git a/docs/assets/js/bootstrap-tooltip.js b/docs/assets/js/bootstrap-tooltip.js
index d76e51e8c9..e7bfd09bf2 100644
--- a/docs/assets/js/bootstrap-tooltip.js
+++ b/docs/assets/js/bootstrap-tooltip.js
@@ -206,7 +206,7 @@
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
- title = title.toString().replace(/(^\s*|\s*$)/, "")
+ title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
return title
}
diff --git a/docs/base-css.html b/docs/base-css.html
index 9fad87178a..1d4dadc36f 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -166,7 +166,8 @@
Wraps abbreviations and acronyms to show the expanded version on hover
- Include optional title for expanded text
+ Include optional title attribute for expanded text
+ Use .initialism class for uppercase abbreviations.
@@ -205,8 +206,9 @@
Example abbreviations
-
Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.
-
HTML is the best thing since sliced bread.
+
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.
+
Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.
+
HTML is the best thing since sliced bread.
An abbreviation of the word attribute is attr .
@@ -569,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline.
#
First Name
Last Name
- Language
+ Username
@@ -577,19 +579,19 @@ For example, <code>section</code> should be wrapped as inline.
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry
+ the Bird
+ @twitter
@@ -614,7 +616,7 @@ For example, <code>section</code> should be wrapped as inline.
#
First Name
Last Name
- Language
+ Username
@@ -622,19 +624,19 @@ For example, <code>section</code> should be wrapped as inline.
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry
+ the Bird
+ @twitter
@@ -658,31 +660,31 @@ For example, <code>section</code> should be wrapped as inline.
#
First Name
Last Name
- Language
+ Username
- 1
- Mark Otto
- CSS
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ Mark
+ Otto
+ @TwBootstrap
2
Jacob
Thornton
- Javascript
-
-
- 3
- Stu
- Dent
+ @fat
3
- Brosef
- Stalin
- HTML
+ Larry the Bird
+ @twitter
@@ -706,7 +708,7 @@ For example, <code>section</code> should be wrapped as inline.
#
First Name
Last Name
- Language
+ Username
@@ -714,19 +716,18 @@ For example, <code>section</code> should be wrapped as inline.
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry the Bird
+ @twitter
@@ -747,37 +748,36 @@ For example, <code>section</code> should be wrapped as inline.
+
+ Full name
+
#
- First Name
- Last Name
- Language
+ First Name
+ Last Name
+ Username
+
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
-
-
- 4
- Brosef
- Stalin
- HTML
+ Larry the Bird
+ @twitter
@@ -862,6 +862,7 @@ For example, <code>section</code> should be wrapped as inline.
@@ -916,7 +917,10 @@ For example, <code>section</code> should be wrapped as inline.
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
- <button type="submit" class="btn">Go</button>
+ <label class="checkbox">
+ <input type="checkbox"> Remember me
+ </label>
+ <button type="submit" class="btn">Sign in</button>
</form>
@@ -1512,9 +1516,6 @@ For example, <code>section</code> should be wrapped as inline.
-
- Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.
-
How to use
-
With v2.0.1, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
+
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
<i class="icon-search"></i>
@@ -1536,6 +1537,10 @@ For example, <code>section</code> should be wrapped as inline.
<i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
+
+ Heads up!
+ When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
+
Use cases
diff --git a/docs/components.html b/docs/components.html
index d9b809d059..42de78cd64 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -98,6 +98,7 @@
Labels
+
Badges Typography Thumbnails Alerts
@@ -175,9 +176,8 @@
Checkbox and radio flavors
Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
Get the javascript »
-
-
Heads up
-
CSS for button groups is in a separate file, button-groups.less.
+
Dropdowns in button groups
+
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
@@ -188,12 +188,13 @@
================================================== -->
@@ -453,7 +540,7 @@
Tabs with dropdowns
<ul class="nav nav-tabs">
@@ -485,7 +582,7 @@
Pills with dropdowns
<ul class="nav nav-pills">
@@ -521,8 +628,18 @@
Application-style navigation
Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
+ With icons
Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.
+ Horizontal dividers
+ Add a horizontal divider by creating an empty list item with the class .divider, like so:
+
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+
@@ -566,6 +684,7 @@
An example of a static (not fixed to the top) navbar with project name, navigation, and search form.
-
@@ -953,9 +1092,7 @@
<li>
<a href="#">Library</a> <span class="divider">/</span>
</li>
- <li class="active">
- <a href="#">Data</a>
- </li>
+ <li class="active">Data</li>
</ul>
@@ -1144,12 +1281,116 @@
<span class="label label-info">Info</span>
+
+
+ Inverse
+
+
+ <span class="label label-inverse">Inverse</span>
+
+
+
+
+
+
+
+
About
+
Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.
+
+
+
Available classes
+
+
+
+ Name
+ Example
+ Markup
+
+
+
+
+
+ Default
+
+
+ 1
+
+
+ <span class="badge">1</span>
+
+
+
+
+ Success
+
+
+ 2
+
+
+ <span class="badge badge-success">2</span>
+
+
+
+
+ Warning
+
+
+ 4
+
+
+ <span class="badge badge-warning">4</span>
+
+
+
+
+ Error
+
+
+ 6
+
+
+ <span class="badge badge-error">1</span>
+
+
+
+
+ Info
+
+
+ 8
+
+
+ <span class="badge badge-info">8</span>
+
+
+
+
+ Inverse
+
+
+ 10
+
+
+ <span class="badge badge-inverse">10</span>
+
+
+
+
+
+
+
+
+
@@ -1188,8 +1429,11 @@
A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
+
-<div class="page-haeder">
+<div class="page-header">
<h1>Example page header</h1>
</div>
@@ -1525,7 +1769,7 @@
================================================== -->
diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html
index 3c7059f9d2..38d6f32f8f 100644
--- a/docs/examples/fluid.html
+++ b/docs/examples/fluid.html
@@ -22,14 +22,14 @@
-
-
-
-
+
+
+
+
diff --git a/docs/examples/hero.html b/docs/examples/hero.html
index ee64646f38..37a41ccdb1 100644
--- a/docs/examples/hero.html
+++ b/docs/examples/hero.html
@@ -19,14 +19,14 @@
-
-
-
-
+
+
+
+
diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html
index 31cc57cf81..eb35b189ee 100644
--- a/docs/examples/starter-template.html
+++ b/docs/examples/starter-template.html
@@ -18,14 +18,14 @@
-
-
-
-
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index a914f677fe..4ecd5c12f3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -82,7 +82,7 @@
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
View project on GitHub
- Download Bootstrap
+ Download Bootstrap (v2.0.2)
One fine body…
@@ -237,10 +237,21 @@
Tooltips in a modal
This link and that link should have tooltips on hover.
+
+ Overflowing text to show optional scrollbar
+ We set a fixed max-height on the .modal-body. Watch it overflow with all this extra lorem ipsum text we've included.
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Launch demo modal
@@ -265,7 +276,7 @@
backdrop
boolean
true
- Includes a modal-backdrop element
+ Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard
@@ -298,8 +309,8 @@
<p>One fine body…</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn">Close</a>
+ <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
@@ -464,7 +475,7 @@ $('#myModal').on('hidden', function () {
-<ul class="nav pills">
+<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
@@ -1299,10 +1310,16 @@ $('#myCollapsible').on('hidden', function () {
5000
The amount of time to delay between automatically cycling an item.
+
+ pause
+ string
+ "hover"
+ Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
+
Markup
- Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.
+ Data attributes are used for the previous and next conrols. Check out the example markup below.
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
@@ -1320,7 +1337,7 @@ $('#myCollapsible').on('hidden', function () {
.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.
-$('.myCarousel').carousel({
+$('.carousel').carousel({
interval: 2000
})
@@ -1335,7 +1352,7 @@ $('.myCarousel').carousel({
.carousel('next')
Cycles to the next item.
Events
- Bootstrap's modal class exposes a few events for hooking into modal functionality.
+ Bootstrap's carousel class exposes two events for hooking into carousel functionality.
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 525c1152fc..ea95796d54 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -81,8 +81,9 @@
Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.
+ Global styles Grid system Fluid gird system Fluid grid system Customizing Layouts Responsive design
+
+
+
+
Requires HTML5 doctype
+
Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.
+
+<!DOCTYPE html>
+<html lang="en">
+ ...
+</html>
+
+
+
+
Typography and links
+
Within the scaffolding.less file, we set basic global display, typography, and link styles. Specifically, we:
+
+ Remove margin on the body
+ Set background-color: white; on the body
+ Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
+ Set the global link color via @linkColor and apply link underlines only on :hover
+
+
+
+
Reset via Normalize
+
As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css , a project by Nicolas Gallagher that also powers the HTML5 Boilerplate .
+
The new reset can still be found in reset.less , but with many elements removed for brevity and accuracy.
+
+
+
+
+
+
@@ -133,7 +173,7 @@
The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid .
It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.
-
+
<div class="row">
@@ -141,11 +181,11 @@
<div class="span8">...</div>
</div>
-
+
As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.
-
-
+
+
<div class="row">
@@ -202,8 +242,8 @@
</div>
</div>
-
-
+
+
@@ -251,11 +291,11 @@
Percents, not pixels
The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
-
+
Fluid rows
Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.
-
+
Markup
@@ -264,8 +304,8 @@
<div class="span8">...</div>
</div>
-
-
+
+
Fluid nesting
@@ -284,7 +324,7 @@
-
+
<div class="row-fluid">
@@ -297,8 +337,8 @@
</div>
</div>
-
-
+
+
@@ -345,16 +385,16 @@
Variables in LESS
Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.
-
+
How to customize
Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile . If you're adding more columns, be sure to add the CSS for those in grid.less.
-
+
Staying responsive
Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.
-
-
+
+
@@ -381,7 +421,7 @@
</div>
</body>
-
+
Fluid layout
<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.
@@ -401,8 +441,8 @@
</div>
</div>
-
-
+
+
@@ -417,8 +457,16 @@
-
-
+
+
What they do
+
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
+
+ Modify the width of column in our grid
+ Stack elements instead of float wherever necessary
+ Resize headings and text to be more appropriate for devices
+
+
Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.
+
Supported devices
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
@@ -438,13 +486,13 @@
Fluid columns, no fixed widths
- Portrait tablets
- 480px to 768px
+ Smartphones to tablets
+ 767px and below
Fluid columns, no fixed widths
- Landscape tablets
- 768px to 979px
+ Portrait tablets
+ 768px and above
42px
20px
@@ -466,23 +514,15 @@
Requires meta tag
To ensure devices display responsive pages properly, include the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- What they do
- Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
-
- Modify the width of column in our grid
- Stack elements instead of float wherever necessary
- Resize headings and text to be more appropriate for devices
-
-
-
+
+
Using the media queries
-
+
Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:
Use the compiled responsive version, bootstrap-responsive.css
@@ -490,8 +530,8 @@
Modify and recompile responsive.less as a separate file
Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.
-
-
+
+
// Landscape phones and down
@media (max-width: 480px) { ... }
@@ -505,8 +545,93 @@
// Large desktop
@media (min-width: 1200px) { .. }
-
-
+
Responsive utility classes
+
+
+
What are they
+ For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.
+
When to use
+ Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
+
For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.
+
+
+
Support classes
+
Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.
+
+
+
+ Class
+ Phones 480px and below
+ Tablets 767px and below
+ Desktops 768px and above
+
+
+
+
+ .visible-phoneVisible
+ Hidden
+ Hidden
+
+
+ .visible-tabletHidden
+ Visible
+ Hidden
+
+
+ .visible-desktopHidden
+ Hidden
+ Visible
+
+
+ .hidden-phoneHidden
+ Visible
+ Visible
+
+
+ .hidden-tabletVisible
+ Hidden
+ Visible
+
+
+ .hidden-desktopVisible
+ Visible
+ Hidden
+
+
+
+
Test case
+
Resize your browser or load on different devices to test the above clases.
+
Visible on...
+
+ Phone✔ Phone
+ Tablet✔ Tablet
+ Desktop✔ Desktop
+
+
Hidden on...
+
+ Phone✔ Phone
+ Tablet✔ Tablet
+ Desktop✔ Desktop
+
+
+
- {{_i}}Include optional title for expanded text{{/i}}
+ {{_i}}Include optional title attribute for expanded text{{/i}}
+ {{_i}}Use .initialism class for uppercase abbreviations.{{/i}}
@@ -129,8 +130,9 @@
{{_i}}Example abbreviations{{/i}}
-
{{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}
-
{{_i}}HTML is the best thing since sliced bread.{{/i}}
+
{{_i}}Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.{{/i}}
+
{{_i}}Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.{{/i}}
+
{{_i}}HTML is the best thing since sliced bread.{{/i}}
{{_i}}An abbreviation of the word attribute is attr .{{/i}}
@@ -493,7 +495,7 @@
#
{{_i}}First Name{{/i}}
{{_i}}Last Name{{/i}}
- {{_i}}Language{{/i}}
+ {{_i}}Username{{/i}}
@@ -501,19 +503,19 @@
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry
+ the Bird
+ @twitter
@@ -538,7 +540,7 @@
#
{{_i}}First Name{{/i}}
{{_i}}Last Name{{/i}}
- {{_i}}Language{{/i}}
+ {{_i}}Username{{/i}}
@@ -546,19 +548,19 @@
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry
+ the Bird
+ @twitter
@@ -582,31 +584,31 @@
#
{{_i}}First Name{{/i}}
{{_i}}Last Name{{/i}}
- {{_i}}Language{{/i}}
+ {{_i}}Username{{/i}}
- 1
- Mark Otto
- CSS
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ Mark
+ Otto
+ @TwBootstrap
2
Jacob
Thornton
- Javascript
-
-
- 3
- Stu
- Dent
+ @fat
3
- Brosef
- Stalin
- HTML
+ Larry the Bird
+ @twitter
@@ -630,7 +632,7 @@
#
{{_i}}First Name{{/i}}
{{_i}}Last Name{{/i}}
- {{_i}}Language{{/i}}
+ {{_i}}Username{{/i}}
@@ -638,19 +640,18 @@
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
+ Larry the Bird
+ @twitter
@@ -671,37 +672,36 @@
+
+ {{_i}}Full name{{/i}}
+
#
- {{_i}}First Name{{/i}}
- {{_i}}Last Name{{/i}}
- {{_i}}Language{{/i}}
+ {{_i}}First Name{{/i}}
+ {{_i}}Last Name{{/i}}
+ {{_i}}Username{{/i}}
+
1
Mark
Otto
- CSS
+ @mdo
2
Jacob
Thornton
- Javascript
+ @fat
3
- Stu
- Dent
- HTML
-
-
- 4
- Brosef
- Stalin
- HTML
+ Larry the Bird
+ @twitter
@@ -786,6 +786,7 @@
@@ -840,7 +841,10 @@
<form class="well form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
- <button type="submit" class="btn">{{_i}}Go{{/i}}</button>
+ <label class="checkbox">
+ <input type="checkbox"> {{_i}}Remember me{{/i}}
+ </label>
+ <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>
@@ -1436,9 +1440,6 @@
-
- {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}}
-
{{_i}}How to use{{/i}}
-
{{_i}}With v2.0.1, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}
+
{{_i}}Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}
<i class="icon-search"></i>
@@ -1460,6 +1461,10 @@
<i class="icon-search icon-white"></i>
{{_i}}There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}
+
+ {{_i}}Heads up!{{/i}}
+ {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}}
+
{{_i}}Use cases{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 1887b6f770..15ebdf19ba 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,6 +22,7 @@
{{_i}}Labels{{/i}}
+
{{_i}}Badges{{/i}} {{_i}}Typography{{/i}} {{_i}}Thumbnails{{/i}} {{_i}}Alerts{{/i}}
@@ -99,9 +100,8 @@
{{_i}}Checkbox and radio flavors{{/i}}
{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}
{{_i}}Get the javascript »{{/i}}
-
-
{{_i}}Heads up{{/i}}
-
{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}
+
{{_i}}Dropdowns in button groups{{/i}}
+
{{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}
@@ -112,12 +112,13 @@
================================================== -->
@@ -377,7 +464,7 @@
{{_i}}Tabs with dropdowns{{/i}}
<ul class="nav nav-tabs">
@@ -409,7 +506,7 @@
{{_i}}Pills with dropdowns{{/i}}
<ul class="nav nav-pills">
@@ -445,8 +552,18 @@
{{_i}}Application-style navigation{{/i}}
{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}
{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}
+ {{_i}}With icons{{/i}}
{{_i}}Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.{{/i}}
+ {{_i}}Horizontal dividers{{/i}}
+ {{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}
+
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+
@@ -490,6 +608,7 @@
{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}
-
@@ -877,9 +1016,7 @@
<li>
<a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
</li>
- <li class="active">
- <a href="#">{{_i}}Data{{/i}}</a>
- </li>
+ <li class="active">{{_i}}Data{{/i}}</li>
</ul>
@@ -1068,12 +1205,116 @@
<span class="label label-info">{{_i}}Info{{/i}}</span>
+
+
+ {{_i}}Inverse{{/i}}
+
+
+ <span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
+
+
+
+
+
+
+
+
About
+
{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}
+
+
+
Available classes
+
+
+
+ {{_i}}Name{{/i}}
+ {{_i}}Example{{/i}}
+ {{_i}}Markup{{/i}}
+
+
+
+
+
+ {{_i}}Default{{/i}}
+
+
+ 1
+
+
+ <span class="badge">1</span>
+
+
+
+
+ {{_i}}Success{{/i}}
+
+
+ 2
+
+
+ <span class="badge badge-success">2</span>
+
+
+
+
+ {{_i}}Warning{{/i}}
+
+
+ 4
+
+
+ <span class="badge badge-warning">4</span>
+
+
+
+
+ {{_i}}Error{{/i}}
+
+
+ 6
+
+
+ <span class="badge badge-error">1</span>
+
+
+
+
+ {{_i}}Info{{/i}}
+
+
+ 8
+
+
+ <span class="badge badge-info">8</span>
+
+
+
+
+ {{_i}}Inverse{{/i}}
+
+
+ 10
+
+
+ <span class="badge badge-inverse">10</span>
+
+
+
+
+
+
+
+
+
@@ -1112,8 +1353,11 @@
{{_i}}A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}
+
-<div class="page-haeder">
+<div class="page-header">
<h1>{{_i}}Example page header{{/i}}</h1>
</div>
@@ -1448,7 +1692,7 @@
================================================== -->
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index c95e85362c..14983ac1d5 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -6,7 +6,7 @@
{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}
{{_i}}View project on GitHub{{/i}}
- {{_i}}Download Bootstrap{{/i}}
+ {{_i}}Download Bootstrap (v2.0.2) {{/i}}
{{_i}}One fine body…{{/i}}
@@ -161,10 +161,21 @@
{{_i}}Tooltips in a modal{{/i}}
{{_i}}This link and that link should have tooltips on hover.{{/i}}
+
+ {{_i}}Overflowing text to show optional scrollbar{{/i}}
+ {{_i}}We set a fixed max-height on the .modal-body. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
{{_i}}Launch demo modal{{/i}}
@@ -189,7 +200,7 @@
{{_i}}backdrop{{/i}}
{{_i}}boolean{{/i}}
{{_i}}true{{/i}}
- {{_i}}Includes a modal-backdrop element{{/i}}
+ {{_i}}Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.{{/i}}
{{_i}}keyboard{{/i}}
@@ -222,8 +233,8 @@
<p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
+ <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
@@ -388,7 +399,7 @@ $('#myModal').on('hidden', function () {
-<ul class="nav pills">
+<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
@@ -1223,10 +1234,16 @@ $('#myCollapsible').on('hidden', function () {
5000
{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}
+
+ {{_i}}pause{{/i}}
+ {{_i}}string{{/i}}
+ "hover"
+ {{_i}}Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.{{/i}}
+
{{_i}}Markup{{/i}}
- {{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}
+ {{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}
<div id="myCarousel" class="carousel">
<!-- {{_i}}Carousel items{{/i}} -->
@@ -1244,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () {
.carousel({{_i}}options{{/i}})
{{_i}}Initializes the carousel with an optional options object and starts cycling through items.{{/i}}
-$('.myCarousel').carousel({
+$('.carousel').carousel({
interval: 2000
})
@@ -1259,7 +1276,7 @@ $('.myCarousel').carousel({
.carousel('next')
{{_i}}Cycles to the next item.{{/i}}
{{_i}}Events{{/i}}
- {{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}
+ {{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 50c776e2de..d9a2f50d19 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -5,8 +5,9 @@
{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}
+ {{_i}}Global styles{{/i}} {{_i}}Grid system{{/i}} {{_i}}Fluid gird system{{/i}} {{_i}}Fluid grid system{{/i}} {{_i}}Customizing{{/i}} {{_i}}Layouts{{/i}} {{_i}}Responsive design{{/i}}
+
+
+
+
{{_i}}Requires HTML5 doctype{{/i}}
+
{{_i}}Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.{{/i}}
+
+<!DOCTYPE html>
+<html lang="en">
+ ...
+</html>
+
+
+
+
{{_i}}Typography and links{{/i}}
+
{{_i}}Within the scaffolding.less file, we set basic global display, typography, and link styles. Specifically, we:{{/i}}
+
+ {{_i}}Remove margin on the body{{/i}}
+ {{_i}}Set background-color: white; on the body{{/i}}
+ {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
+ {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
+
+
+
+
{{_i}}Reset via Normalize{{/i}}
+
{{_i}}As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from Normalize.css , a project by Nicolas Gallagher that also powers the HTML5 Boilerplate .{{/i}}
+
{{_i}}The new reset can still be found in reset.less , but with many elements removed for brevity and accuracy.{{/i}}
+
+
+
+
+
+
@@ -57,7 +97,7 @@
{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid .{{/i}}
{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}
-
+
<div class="row">
@@ -65,11 +105,11 @@
<div class="span8">...</div>
</div>
-
+
{{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}
-
-
+
+
<div class="row">
@@ -126,8 +166,8 @@
</div>
</div>
-
-
+
+
@@ -175,11 +215,11 @@
{{_i}}Percents, not pixels{{/i}}
{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}
-
+
{{_i}}Fluid rows{{/i}}
{{_i}}Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}
-
+
{{_i}}Markup{{/i}}
@@ -188,8 +228,8 @@
<div class="span8">...</div>
</div>
-
-
+
+
{{_i}}Fluid nesting{{/i}}
@@ -208,7 +248,7 @@
-
+
<div class="row-fluid">
@@ -221,8 +261,8 @@
</div>
</div>
-
-
+
+
@@ -269,16 +309,16 @@
{{_i}}Variables in LESS{{/i}}
{{_i}}Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.{{/i}}
-
+
{{_i}}How to customize{{/i}}
{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile . If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}
-
+
{{_i}}Staying responsive{{/i}}
{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.{{/i}}
-
-
+
+
@@ -305,7 +345,7 @@
</div>
</body>
-
+
{{_i}}Fluid layout{{/i}}
{{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
@@ -325,8 +365,8 @@
</div>
</div>
-
-
+
+
@@ -341,8 +381,16 @@
-
-
+
+
{{_i}}What they do{{/i}}
+
{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}
+
+ {{_i}}Modify the width of column in our grid{{/i}}
+ {{_i}}Stack elements instead of float wherever necessary{{/i}}
+ {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
+
+
{{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}
+
{{_i}}Supported devices{{/i}}
{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}
@@ -362,13 +410,13 @@
{{_i}}Fluid columns, no fixed widths{{/i}}
- {{_i}}Portrait tablets{{/i}}
- 480px to 768px
+ {{_i}}Smartphones to tablets{{/i}}
+ 767px and below
{{_i}}Fluid columns, no fixed widths{{/i}}
- {{_i}}Landscape tablets{{/i}}
- 768px to 979px
+ {{_i}}Portrait tablets{{/i}}
+ 768px and above
42px
20px
@@ -390,23 +438,15 @@
{{_i}}Requires meta tag{{/i}}
{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- {{_i}}What they do{{/i}}
- {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}
-
- {{_i}}Modify the width of column in our grid{{/i}}
- {{_i}}Stack elements instead of float wherever necessary{{/i}}
- {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
-
-
-
+
+
{{_i}}Using the media queries{{/i}}
-
+
{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}
{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}
@@ -414,8 +454,8 @@
{{_i}}Modify and recompile responsive.less as a separate file{{/i}}
{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}
-
-
+
+
// {{_i}}Landscape phones and down{{/i}}
@media (max-width: 480px) { ... }
@@ -429,6 +469,91 @@
// {{_i}}Large desktop{{/i}}
@media (min-width: 1200px) { .. }
-
-
+
{{_i}}Responsive utility classes{{/i}}
+
+
+
{{_i}}What are they{{/i}}
+ {{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.{{/i}}
+
{{_i}}When to use{{/i}}
+ {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}
+
{{_i}}For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.{{/i}}
+
+
+
{{_i}}Support classes{{/i}}
+
{{_i}}Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}
+
+
+
+ {{_i}}Class{{/i}}
+ {{_i}}Phones 480px and below {{/i}}
+ {{_i}}Tablets 767px and below {{/i}}
+ {{_i}}Desktops 768px and above {{/i}}
+
+
+
+
+ .visible-phone{{_i}}Visible{{/i}}
+ {{_i}}Hidden{{/i}}
+ {{_i}}Hidden{{/i}}
+
+
+ .visible-tablet{{_i}}Hidden{{/i}}
+ {{_i}}Visible{{/i}}
+ {{_i}}Hidden{{/i}}
+
+
+ .visible-desktop{{_i}}Hidden{{/i}}
+ {{_i}}Hidden{{/i}}
+ {{_i}}Visible{{/i}}
+
+
+ .hidden-phone{{_i}}Hidden{{/i}}
+ {{_i}}Visible{{/i}}
+ {{_i}}Visible{{/i}}
+
+
+ .hidden-tablet{{_i}}Visible{{/i}}
+ {{_i}}Hidden{{/i}}
+ {{_i}}Visible{{/i}}
+
+
+ .hidden-desktop{{_i}}Visible{{/i}}
+ {{_i}}Visible{{/i}}
+ {{_i}}Hidden{{/i}}
+
+
+
+
{{_i}}Test case{{/i}}
+
{{_i}}Resize your browser or load on different devices to test the above clases.{{/i}}
+
{{_i}}Visible on...{{/i}}
+
+ Phone✔ Phone
+ Tablet✔ Tablet
+ Desktop✔ Desktop
+
+
{{_i}}Hidden on...{{/i}}
+
+ Phone✔ Phone
+ Tablet✔ Tablet
+ Desktop✔ Desktop
+
+
+
-