Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch '2.0.1-wip'

  • Loading branch information...
commit 03e6dc66c2fe14e756723395752feefb687b6526 2 parents 9143d8e + 0916226
@fat fat authored
Showing with 1,730 additions and 906 deletions.
  1. +2 −4 README.md
  2. BIN  docs/assets/bootstrap.zip
  3. +42 −28 docs/assets/css/bootstrap-responsive.css
  4. +195 −64 docs/assets/css/bootstrap.css
  5. +4 −22 docs/assets/css/docs.css
  6. +7 −4 docs/assets/js/bootstrap-alert.js
  7. +2 −2 docs/assets/js/bootstrap-button.js
  8. +4 −1 docs/assets/js/bootstrap-carousel.js
  9. +1 −1  docs/assets/js/bootstrap-collapse.js
  10. +1 −1  docs/assets/js/bootstrap-dropdown.js
  11. +2 −2 docs/assets/js/bootstrap-modal.js
  12. +1 −1  docs/assets/js/bootstrap-popover.js
  13. +1 −1  docs/assets/js/bootstrap-scrollspy.js
  14. +1 −1  docs/assets/js/bootstrap-tab.js
  15. +1 −1  docs/assets/js/bootstrap-tooltip.js
  16. +2 −2 docs/assets/js/bootstrap-transition.js
  17. +1 −1  docs/assets/js/bootstrap-typeahead.js
  18. +252 −185 docs/base-css.html
  19. +116 −41 docs/components.html
  20. +6 −6 docs/download.html
  21. +5 −5 docs/examples.html
  22. +5 −5 docs/examples/fluid.html
  23. +5 −5 docs/examples/hero.html
  24. +5 −5 docs/examples/starter-template.html
  25. +10 −11 docs/index.html
  26. +28 −23 docs/javascript.html
  27. +14 −14 docs/less.html
  28. +132 −22 docs/scaffolding.html
  29. +5 −5 docs/templates/layout.mustache
  30. +247 −180 docs/templates/pages/base-css.mustache
  31. +116 −41 docs/templates/pages/components.mustache
  32. +1 −1  docs/templates/pages/download.mustache
  33. +7 −8 docs/templates/pages/index.mustache
  34. +29 −24 docs/templates/pages/javascript.mustache
  35. +14 −14 docs/templates/pages/less.mustache
  36. +128 −18 docs/templates/pages/scaffolding.mustache
  37. +8 −4 docs/templates/pages/upgrading.mustache
  38. +20 −9 docs/upgrading.html
  39. +2 −2 js/README.md
  40. +7 −4 js/bootstrap-alert.js
  41. +2 −2 js/bootstrap-button.js
  42. +4 −1 js/bootstrap-carousel.js
  43. +1 −1  js/bootstrap-collapse.js
  44. +1 −1  js/bootstrap-dropdown.js
  45. +2 −2 js/bootstrap-modal.js
  46. +1 −1  js/bootstrap-popover.js
  47. +1 −1  js/bootstrap-scrollspy.js
  48. +1 −1  js/bootstrap-tab.js
  49. +1 −1  js/bootstrap-tooltip.js
  50. +2 −2 js/bootstrap-transition.js
  51. +1 −1  js/bootstrap-typeahead.js
  52. +1 −1  js/tests/unit/bootstrap-button.js
  53. +1 −1  less/breadcrumbs.less
  54. +2 −1  less/button-groups.less
  55. +25 −7 less/buttons.less
  56. +13 −0 less/code.less
  57. +1 −2  less/dropdowns.less
  58. +48 −41 less/forms.less
  59. +23 −7 less/labels.less
  60. +78 −25 less/mixins.less
  61. +11 −0 less/modals.less
  62. +11 −4 less/navbar.less
  63. +20 −11 less/navs.less
  64. +1 −1  less/reset.less
  65. +8 −4 less/responsive.less
  66. +7 −5 less/sprites.less
  67. +14 −3 less/tables.less
  68. +2 −2 less/thumbnails.less
  69. +3 −2 less/type.less
  70. +15 −7 less/variables.less
View
6 README.md
@@ -62,12 +62,10 @@ Developers
We have included a makefile with convenience methods for working with the Bootstrap library.
+ **build** - `make`
-This will run the less compiler on the bootstrap lib and regenerate the docs dir.
-The lessc compiler is required for this command to run.
+Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+ **watch** - `make watch`
-This is a convenience method for watching your less files and automatically building them whenever you save.
-Watchr is required for this command to run.
+This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
Authors
View
BIN  docs/assets/bootstrap.zip
Binary file not shown
View
70 docs/assets/css/bootstrap-responsive.css
@@ -7,6 +7,16 @@
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
+.clearfix {
+ *zoom: 1;
+}
+.clearfix:before, .clearfix:after {
+ display: table;
+ content: "";
+}
+.clearfix:after {
+ clear: both;
+}
.hidden {
display: none;
visibility: hidden;
@@ -25,7 +35,7 @@
.uneditable-input {
display: block;
width: 100%;
- height: 28px;
+ min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
@@ -84,7 +94,7 @@
position: static;
}
}
-@media (max-width: 768px) {
+@media (max-width: 767px) {
.container {
width: auto;
padding: 0 20px;
@@ -102,7 +112,7 @@
margin: 0;
}
}
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
@@ -205,40 +215,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
- .row-fluid .span1 {
+ .row-fluid > .span1 {
width: 5.801104972%;
}
- .row-fluid .span2 {
+ .row-fluid > .span2 {
width: 14.364640883%;
}
- .row-fluid .span3 {
+ .row-fluid > .span3 {
width: 22.928176794%;
}
- .row-fluid .span4 {
+ .row-fluid > .span4 {
width: 31.491712705%;
}
- .row-fluid .span5 {
+ .row-fluid > .span5 {
width: 40.055248616%;
}
- .row-fluid .span6 {
+ .row-fluid > .span6 {
width: 48.618784527%;
}
- .row-fluid .span7 {
+ .row-fluid > .span7 {
width: 57.182320438000005%;
}
- .row-fluid .span8 {
+ .row-fluid > .span8 {
width: 65.74585634900001%;
}
- .row-fluid .span9 {
+ .row-fluid > .span9 {
width: 74.30939226%;
}
- .row-fluid .span10 {
+ .row-fluid > .span10 {
width: 82.87292817100001%;
}
- .row-fluid .span11 {
+ .row-fluid > .span11 {
width: 91.436464082%;
}
- .row-fluid .span12 {
+ .row-fluid > .span12 {
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
@@ -278,7 +288,7 @@
width: 714px;
}
}
-@media (max-width: 980px) {
+@media (max-width: 979px) {
body {
padding-top: 0;
}
@@ -314,6 +324,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
+ .navbar .nav .nav-header {
+ color: #999999;
+ text-shadow: none;
+ }
.navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
@@ -486,40 +500,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
- .row-fluid .span1 {
+ .row-fluid > .span1 {
width: 5.982905983%;
}
- .row-fluid .span2 {
+ .row-fluid > .span2 {
width: 14.529914530000001%;
}
- .row-fluid .span3 {
+ .row-fluid > .span3 {
width: 23.076923077%;
}
- .row-fluid .span4 {
+ .row-fluid > .span4 {
width: 31.623931624%;
}
- .row-fluid .span5 {
+ .row-fluid > .span5 {
width: 40.170940171000005%;
}
- .row-fluid .span6 {
+ .row-fluid > .span6 {
width: 48.717948718%;
}
- .row-fluid .span7 {
+ .row-fluid > .span7 {
width: 57.264957265%;
}
- .row-fluid .span8 {
+ .row-fluid > .span8 {
width: 65.81196581200001%;
}
- .row-fluid .span9 {
+ .row-fluid > .span9 {
width: 74.358974359%;
}
- .row-fluid .span10 {
+ .row-fluid > .span10 {
width: 82.905982906%;
}
- .row-fluid .span11 {
+ .row-fluid > .span11 {
width: 91.45299145300001%;
}
- .row-fluid .span12 {
+ .row-fluid > .span12 {
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
View
259 docs/assets/css/bootstrap.css
@@ -33,7 +33,7 @@ html {
-ms-text-size-adjust: 100%;
}
a:focus {
- outline: thin dotted;
+ outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -94,6 +94,16 @@ textarea {
overflow: auto;
vertical-align: top;
}
+.clearfix {
+ *zoom: 1;
+}
+.clearfix:before, .clearfix:after {
+ display: table;
+ content: "";
+}
+.clearfix:after {
+ clear: both;
+}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -212,40 +222,40 @@ a:hover {
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
-.row-fluid .span1 {
+.row-fluid > .span1 {
width: 6.382978723%;
}
-.row-fluid .span2 {
+.row-fluid > .span2 {
width: 14.89361702%;
}
-.row-fluid .span3 {
+.row-fluid > .span3 {
width: 23.404255317%;
}
-.row-fluid .span4 {
+.row-fluid > .span4 {
width: 31.914893614%;
}
-.row-fluid .span5 {
+.row-fluid > .span5 {
width: 40.425531911%;
}
-.row-fluid .span6 {
+.row-fluid > .span6 {
width: 48.93617020799999%;
}
-.row-fluid .span7 {
+.row-fluid > .span7 {
width: 57.446808505%;
}
-.row-fluid .span8 {
+.row-fluid > .span8 {
width: 65.95744680199999%;
}
-.row-fluid .span9 {
+.row-fluid > .span9 {
width: 74.468085099%;
}
-.row-fluid .span10 {
+.row-fluid > .span10 {
width: 82.97872339599999%;
}
-.row-fluid .span11 {
+.row-fluid > .span11 {
width: 91.489361693%;
}
-.row-fluid .span12 {
+.row-fluid > .span12 {
width: 99.99999998999999%;
}
.container {
@@ -374,7 +384,7 @@ ol {
li {
line-height: 18px;
}
-ul.unstyled {
+ul.unstyled, ol.unstyled {
margin-left: 0;
list-style: none;
}
@@ -393,7 +403,7 @@ dd {
hr {
margin: 18px 0;
border: 0;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
}
strong {
@@ -488,13 +498,20 @@ pre {
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
+ word-wrap: break-word;
}
pre.prettyprint {
margin-bottom: 18px;
}
pre code {
padding: 0;
+ color: inherit;
background-color: transparent;
+ border: 0;
+}
+.pre-scrollable {
+ max-height: 340px;
+ overflow-y: scroll;
}
form {
margin: 0 0 18px;
@@ -515,16 +532,25 @@ legend {
border: 0;
border-bottom: 1px solid #eee;
}
+legend small {
+ font-size: 13.5px;
+ color: #999999;
+}
label,
input,
button,
select,
textarea {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
+input,
+button,
+select,
+textarea {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
label {
display: block;
margin-bottom: 5px;
@@ -563,13 +589,19 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
/* IE7 */
line-height: normal;
- border: 0;
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
+ border: 0 \9;
+ /* IE9 and down */
+
+}
+input[type="image"] {
+ border: 0;
}
input[type="file"] {
+ width: auto;
padding: initial;
line-height: initial;
border: initial;
@@ -592,6 +624,9 @@ select, input[type="file"] {
line-height: 28px;
}
+input[type="file"] {
+ line-height: 18px \9;
+}
select {
width: 220px;
background-color: #ffffff;
@@ -622,15 +657,13 @@ input[type="hidden"] {
}
.radio.inline, .checkbox.inline {
display: inline-block;
+ padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
-.controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child {
- padding-top: 0;
-}
input, textarea {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -648,14 +681,17 @@ input:focus, textarea:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
- /* IE6-8 */
+ /* IE6-9 */
}
-input[type="file"]:focus, input[type="checkbox"]:focus, select:focus {
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
- outline: thin dotted;
+ outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -817,6 +853,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
color: #999999;
}
.help-block {
+ display: block;
margin-top: 5px;
margin-bottom: 0;
color: #999999;
@@ -898,6 +935,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
+ border-left-color: #eee;
border-right-color: #ccc;
}
.input-append .add-on {
@@ -939,6 +977,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: inline-block;
margin-bottom: 0;
}
+.form-search .hide, .form-inline .hide, .form-horizontal .hide {
+ display: none;
+}
.form-search label,
.form-inline label,
.form-search .input-append,
@@ -953,10 +994,17 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+ margin-bottom: 0;
+ vertical-align: middle;
+}
.control-group {
margin-bottom: 9px;
}
-.form-horizontal legend + .control-group {
+legend + .control-group {
margin-top: 18px;
-webkit-margin-top-collapse: separate;
}
@@ -971,7 +1019,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.form-horizontal .control-group:after {
clear: both;
}
-.form-horizontal .control-group > label {
+.form-horizontal .control-label {
float: left;
width: 140px;
padding-top: 5px;
@@ -996,14 +1044,14 @@ table {
padding: 8px;
line-height: 18px;
text-align: left;
+ vertical-align: top;
border-top: 1px solid #ddd;
}
.table th {
font-weight: bold;
- vertical-align: bottom;
}
-.table td {
- vertical-align: top;
+.table thead th {
+ vertical-align: bottom;
}
.table thead:first-child tr th, .table thead:first-child tr td {
border-top: 0;
@@ -1054,6 +1102,9 @@ table {
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
+.table tbody tr:hover td, .table tbody tr:hover th {
+ background-color: #f5f5f5;
+}
table .span1 {
float: none;
width: 44px;
@@ -1114,21 +1165,22 @@ table .span12 {
width: 924px;
margin-left: 0;
}
-[class^="icon-"] {
+[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
+ line-height: 14px;
vertical-align: text-top;
- background-image: url(../img/glyphicons-halflings.png);
+ background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
-[class^="icon-"]:last-child {
+[class^="icon-"]:last-child, [class*=" icon-"]:last-child {
*margin-left: 0;
}
.icon-white {
- background-image: url(../img/glyphicons-halflings-white.png);
+ background-image: url("../img/glyphicons-halflings-white.png");
}
.icon-glass {
background-position: 0 0;
@@ -1529,7 +1581,6 @@ table .span12 {
float: left;
display: none;
min-width: 160px;
- max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0;
@@ -1658,20 +1709,25 @@ table .span12 {
.btn {
display: inline-block;
padding: 4px 10px 4px;
+ margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
- background-color: #fafafa;
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
- background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
- background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
- background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
- background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
- background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
- background-repeat: no-repeat;
+ vertical-align: middle;
+ background-color: #f5f5f5;
+ background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+ background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: linear-gradient(top, #ffffff, #e6e6e6);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+ border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+ 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);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@@ -1681,8 +1737,19 @@ 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,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+ background-color: #e6e6e6;
+}
+.btn:active, .btn.active {
+ background-color: #cccccc \9;
+}
.btn:first-child {
*margin-left: 0;
}
@@ -1698,7 +1765,7 @@ table .span12 {
transition: background-position 0.1s linear;
}
.btn:focus {
- outline: thin dotted;
+ outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -1709,7 +1776,6 @@ table .span12 {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
- color: rgba(0, 0, 0, 0.5);
outline: 0;
}
.btn.disabled, .btn[disabled] {
@@ -1730,7 +1796,7 @@ table .span12 {
-moz-border-radius: 5px;
border-radius: 5px;
}
-.btn-large .icon {
+.btn-large [class^="icon-"] {
margin-top: 1px;
}
.btn-small {
@@ -1738,9 +1804,14 @@ table .span12 {
font-size: 11px;
line-height: 16px;
}
-.btn-small .icon {
+.btn-small [class^="icon-"] {
margin-top: -1px;
}
+.btn-mini {
+ padding: 2px 6px;
+ font-size: 11px;
+ line-height: 14px;
+}
.btn-primary,
.btn-primary:hover,
.btn-warning,
@@ -1750,7 +1821,9 @@ table .span12 {
.btn-success,
.btn-success:hover,
.btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
@@ -1758,7 +1831,8 @@ table .span12 {
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
@@ -1881,6 +1955,30 @@ table .span12 {
.btn-info:active, .btn-info.active {
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-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
+ border-color: #262626 #262626 #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);
+}
+.btn-inverse:hover,
+.btn-inverse:active,
+.btn-inverse.active,
+.btn-inverse.disabled,
+.btn-inverse[disabled] {
+ background-color: #262626;
+}
+.btn-inverse:active, .btn-inverse.active {
+ background-color: #0c0c0c \9;
+}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
@@ -2013,7 +2111,8 @@ button.btn.small, input[type="submit"].btn.small {
.btn-primary .caret,
.btn-danger .caret,
.btn-info .caret,
-.btn-success .caret {
+.btn-success .caret,
+.btn-inverse .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
@@ -2086,27 +2185,31 @@ button.btn.small, input[type="submit"].btn.small {
text-decoration: none;
background-color: #eeeeee;
}
+.nav .nav-header {
+ display: block;
+ padding: 3px 15px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 18px;
+ color: #999999;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-transform: uppercase;
+}
+.nav li + .nav-header {
+ margin-top: 9px;
+}
.nav-list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav-list > li > a, .nav-list .nav-header {
- display: block;
- padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
-.nav-list .nav-header {
- font-size: 11px;
- font-weight: bold;
- line-height: 18px;
- color: #999999;
- text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
- margin-top: 9px;
+.nav-list > li > a {
+ padding: 3px 15px;
}
.nav-list .active > a, .nav-list .active > a:hover {
color: #ffffff;
@@ -2256,6 +2359,9 @@ button.btn.small, input[type="submit"].btn.small {
.tabbable:after {
clear: both;
}
+.tab-content {
+ overflow: hidden;
+}
.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
border-bottom: 0;
}
@@ -2451,6 +2557,13 @@ button.btn.small, input[type="submit"].btn.small {
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
+.navbar-form .input-append, .navbar-form .input-prepend {
+ margin-top: 6px;
+ white-space: nowrap;
+}
+.navbar-form .input-append input, .navbar-form .input-prepend input {
+ margin-top: 0;
+}
.navbar-search {
position: relative;
float: left;
@@ -2544,7 +2657,6 @@ button.btn.small, input[type="submit"].btn.small {
color: #ffffff;
text-decoration: none;
background-color: #222222;
- background-color: rgba(0, 0, 0, 0.5);
}
.navbar .divider-vertical {
height: 40px;
@@ -2631,7 +2743,7 @@ button.btn.small, input[type="submit"].btn.small {
box-shadow: inset 0 1px 0 #ffffff;
}
.breadcrumb li {
- display: inline;
+ display: inline-block;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
@@ -2810,6 +2922,9 @@ button.btn.small, input[type="submit"].btn.small {
.modal-body {
padding: 15px;
}
+.modal-body .modal-form {
+ margin-bottom: 0;
+}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
@@ -3045,28 +3160,44 @@ a.thumbnail:hover {
padding: 9px;
}
.label {
- padding: 1px 3px 2px;
- font-size: 9.75px;
+ padding: 2px 4px 3px;
+ font-size: 11.049999999999999px;
font-weight: bold;
color: #ffffff;
- text-transform: uppercase;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
+.label:hover {
+ color: #ffffff;
+ text-decoration: none;
+}
.label-important {
background-color: #b94a48;
}
+.label-important:hover {
+ background-color: #953b39;
+}
.label-warning {
background-color: #f89406;
}
+.label-warning:hover {
+ background-color: #c67605;
+}
.label-success {
background-color: #468847;
}
+.label-success:hover {
+ background-color: #356635;
+}
.label-info {
background-color: #3a87ad;
}
+.label-info:hover {
+ background-color: #2d6987;
+}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0;
View
26 docs/assets/css/docs.css
@@ -181,7 +181,7 @@ hr.soften {
top: 40px;
left: 0;
right: 0;
- z-index: 1030;
+ z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0;
@@ -190,6 +190,7 @@ hr.soften {
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;
@@ -481,9 +482,6 @@ hr.soften {
/* Misc
-------------------------------------------------- */
-pre.prettyprint {
- overflow: hidden;
-}
.browser-support {
max-width: 100%;
@@ -546,28 +544,12 @@ form.well {
/* Icons
------------------------- */
.the-icons {
- margin-bottom: 18px;
-}
-.the-icons i {
- display: block;
- margin-bottom: 5px;
+ margin-left: 0;
+ list-style: none;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25);
}
-.the-icons i:after {
- display: block;
- content: attr(class);
- font-style: normal;
- margin-left: 20px;
- width: 140px;
-}
-#javascript input[type=checkbox] {
- position: relative;
- top: -1px;
- display: inline;
- margin-left: 6px;
-}
/* Eaxmples page
------------------------- */
View
11 docs/assets/js/bootstrap-alert.js
@@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
- $parent.removeClass('in')
+ $parent
+ .trigger('close')
+ .removeClass('in')
function removeElement() {
- $parent.remove()
- $parent.trigger('closed')
+ $parent
+ .trigger('closed')
+ .remove()
}
$.support.transition && $parent.hasClass('fade') ?
@@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
-}( window.jQuery )
+}( window.jQuery );
View
4 docs/assets/js/bootstrap-button.js
@@ -91,8 +91,8 @@
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
- $(e.target).button('toggle')
+ $(e.currentTarget).button('toggle')
})
})
-}( window.jQuery )
+}( window.jQuery );
View
5 docs/assets/js/bootstrap-carousel.js
@@ -61,6 +61,7 @@
, pause: function () {
clearInterval(this.interval)
+ this.interval = null
return this
}
@@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
+ if (!$next.length) return
+
this.sliding = true
isCycling && this.pause()
@@ -151,4 +154,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-collapse.js
@@ -133,4 +133,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-dropdown.js
@@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
-}( window.jQuery )
+}( window.jQuery );
View
4 docs/assets/js/bootstrap-modal.js
@@ -177,7 +177,7 @@
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
- , options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option)
+ , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
@@ -207,4 +207,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-popover.js
@@ -92,4 +92,4 @@
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-scrollspy.js
@@ -122,4 +122,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-tab.js
@@ -127,4 +127,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-tooltip.js
@@ -267,4 +267,4 @@
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
}
-}( window.jQuery )
+}( window.jQuery );
View
4 docs/assets/js/bootstrap-transition.js
@@ -47,5 +47,5 @@
})()
})
-
-}( window.jQuery )
+
+}( window.jQuery );
View
2  docs/assets/js/bootstrap-typeahead.js
@@ -268,4 +268,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
View
437 docs/base-css.html
@@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -375,7 +375,7 @@
</div><!--/span-->
<div class="span4">
<h2>Basic block</h2>
- <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
+ <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
@@ -385,6 +385,7 @@
&lt;/pre&gt;
</pre>
<p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
+ <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>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify</h2>
@@ -530,7 +531,7 @@
<td>
<code>.table-bordered</code>
</td>
- <td>Rounds corners and adds outter border</td>
+ <td>Rounds corners and adds outer border</td>
</tr>
<tr>
<td>Zebra-stripe</td>
@@ -852,9 +853,9 @@
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
- <h3>Basic form</h3>
<div class="row">
<div class="span3">
+ <h3>Basic form</h3>
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
</div>
<div class="span9">
@@ -866,11 +867,22 @@
</label>
<button type="submit" class="btn">Submit</button>
</form>
+<pre class="prettyprint linenums">
+&lt;form class="well"&gt;
+ &lt;label&gt;Label name&lt;/label&gt;
+ &lt;input type="text" class="span3" placeholder="Type something…"&gt;
+ &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+ &lt;label class="checkbox"&gt;
+ &lt;input type="checkbox"&gt; Check me out
+ &lt;/label&gt;
+ &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
</div>
</div> <!-- /row -->
- <h3>Search form</h3>
<div class="row">
<div class="span3">
+ <h3>Search form</h3>
<p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
</div>
<div class="span9">
@@ -878,19 +890,35 @@
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-search"&gt;
+ &lt;input type="text" class="input-medium search-query"&gt;
+ &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
+&lt;/form&gt;
+</pre>
</div>
</div> <!-- /row -->
- <h3>Inline form</h3>
<div class="row">
<div class="span3">
+ <h3>Inline form</h3>
<p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
</div>
<div class="span9">
- <form class="well form-search">
+ <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?
+ </label>
+ <button type="submit" class="btn">Sign in</button>
</form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+ &lt;input type="text" class="input-small" placeholder="Email"&gt;
+ &lt;input type="password" class="input-small" placeholder="Password"&gt;
+ &lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
+&lt;/form&gt;
+</pre>
</div>
</div><!-- /row -->
@@ -956,10 +984,26 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
- <button type="reset" class="btn">Cancel</button>
+ <button class="btn">Cancel</button>
</div>
</fieldset>
</form>
+ <h3>Example markup</h3>
+ <p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
+<pre class="prettyprint linenums">
+&lt;form class="form-horizontal"&gt;
+ &lt;fieldset&gt;
+ &lt;legend&gt;Legend text&lt;/legend&gt;
+ &lt;div class="control-group"&gt;
+ &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
+ &lt;div class="controls"&gt;
+ &lt;input type="text" class="input-xlarge" id="input01"&gt;
+ &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
</div>
<div class="span4">
<h3>What's included</h3>
@@ -1049,14 +1093,14 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
- <button type="reset" class="btn">Cancel</button>
+ <button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
<div class="span4">
<h3>Redesigned browser states</h3>
- <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
+ <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
@@ -1077,7 +1121,7 @@
<fieldset>
<legend>Extending form controls</legend>
<div class="control-group">
- <label class="control-label">Form sizes</label>
+ <label class="control-label">Form grid sizes</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@@ -1107,6 +1151,15 @@
</div>
</div>
<div class="control-group">
+ <label class="control-label">Alternate sizes</label>
+ <div class="controls docs-input-sizes">
+ <input class="input-mini" type="text" placeholder=".input-mini">
+ <input class="input-small" type="text" placeholder=".input-small">
+ <input class="input-medium" type="text" placeholder=".input-medium">
+ <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
+ </div>
+ </div>
+ <div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
@@ -1173,7 +1226,7 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
- <button type="reset" class="btn">Cancel</button>
+ <button class="btn">Cancel</button>
</div>
</fieldset>
</form>
@@ -1213,35 +1266,40 @@
</thead>
<tbody>
<tr>
- <td><a class="btn" href="#">Default</a></td>
+ <td><button class="btn" href="#">Default</button></td>
<td><code>.btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
- <td><a class="btn btn-primary" href="#">Primary</a></td>
+ <td><button class="btn btn-primary" href="#">Primary</button></td>
<td><code>.btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
- <td><a class="btn btn-info" href="#">Info</a></td>
+ <td><button class="btn btn-info" href="#">Info</button></td>
<td><code>.btn-info</code></td>
<td>Used as an alternate to the default styles</td>
</tr>
<tr>
- <td><a class="btn btn-success" href="#">Success</a></td>
+ <td><button class="btn btn-success" href="#">Success</button></td>
<td><code>.btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
- <td><a class="btn btn-warning" href="#">Warning</a></td>
+ <td><button class="btn btn-warning" href="#">Warning</button></td>
<td><code>.btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
- <td><a class="btn btn-danger" href="#">Danger</a></td>
+ <td><button class="btn btn-danger" href="#">Danger</button></td>
<td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
+ <tr>
+ <td><button class="btn btn-inverse" href="#">Inverse</button></td>
+ <td><code>.btn-inverse</code></td>
+ <td>Alternate dark gray button, not tied to a semantic action or use</td>
+ </tr>
</tbody>
</table>
@@ -1249,50 +1307,63 @@
<div class="span4">
<h3>Buttons for actions</h3>
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
+ <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
+ <h3>Cross browser compatibility</h3>
+ <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
</div>
<div class="span4">
- <h3>For anchors and forms</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
- </div>
- <div class="span4">
- <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
- </div>
- </div>
-
- <div class="row">
- <div class="span4">
<h3>Multiple sizes</h3>
- <p>Fancy larger or smaller buttons? Have at it!</p>
+ <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>
- <a href="#" class="btn btn-large btn-primary">Primary action</a>
- <a href="#" class="btn btn-large">Action</a>
+ <button class="btn btn-large btn-primary">Primary action</button>
+ <button class="btn btn-large">Action</button>
</p>
<p>
- <a href="#" class="btn btn-small btn-primary">Primary action</a>
- <a href="#" class="btn btn-small">Action</a>
+ <button class="btn btn-small btn-primary">Primary action</button>
+ <button class="btn btn-small">Action</button>
</p>
- </div>
- <div class="span4">
+ <p>
+ <button class="btn btn-mini btn-primary">Primary action</button>
+ <button class="btn btn-mini">Action</button>
+ </p>
+ <br>
<h3>Disabled state</h3>
- <p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
+ <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>
<p>
- <a href="#" class="btn btn-large btn-primary disabled">Primary action</a>
- <a href="#" class="btn btn-large disabled">Action</a>
+ <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+ <a href="#" class="btn btn-large disabled">Link</a>
+ </p>
+ <p style="margin-bottom: 18px;">
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+ <button class="btn btn-large" disabled>Button</button>
</p>
<p>
- <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary action</button>
- <button class="btn btn-large" disabled>Action</button>
+ <span class="label label-info">Heads up!</span>
+ We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
</div>
<div class="span4">
- <h3>Cross browser compatibility</h3>
- <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
- <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+ <h3>One class, multiple tags</h3>
+ <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+<form>
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">Button</button>
+<input class="btn" type="button" value="Input">
+<input class="btn" type="submit" value="Submit">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+ Button
+&lt;/button&gt;
+&lt;input class="btn" type="button"
+ value="Input"&gt;
+&lt;input class="btn" type="submit"
+ value="Submit"&gt;
+</pre>
+ <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
</div>
</div>
-
- <br>
-
</section>
@@ -1305,148 +1376,144 @@
</div>
<div class="row">
<div class="span3">
- <div class="the-icons">
- <i class="icon-glass"></i>
- <i class="icon-music"></i>
- <i class="icon-search"></i>
- <i class="icon-envelope"></i>
- <i class="icon-heart"></i>
- <i class="icon-star"></i>
- <i class="icon-star-empty"></i>
- <i class="icon-user"></i>
- <i class="icon-film"></i>
- <i class="icon-th-large"></i>
- <i class="icon-th"></i>
- <i class="icon-th-list"></i>
- <i class="icon-ok"></i>
- <i class="icon-remove"></i>
- <i class="icon-zoom-in"></i>
- <i class="icon-zoom-out"></i>
- <i class="icon-off"></i>
- <i class="icon-signal"></i>
- <i class="icon-cog"></i>
- <i class="icon-trash"></i>
-
- <i class="icon-home"></i>
- <i class="icon-file"></i>
- <i class="icon-time"></i>
- <i class="icon-road"></i>
- <i class="icon-download-alt"></i>
- <i class="icon-download"></i>
- <i class="icon-upload"></i>
- <i class="icon-inbox"></i>
- <i class="icon-play-circle"></i>
- <i class="icon-repeat"></i>
- </div>
+ <ul class="the-icons">
+ <li><i class="icon-glass"></i> icon-glass</li>
+ <li><i class="icon-music"></i> icon-music</li>
+ <li><i class="icon-search"></i> icon-search</li>
+ <li><i class="icon-envelope"></i> icon-envelope</li>
+ <li><i class="icon-heart"></i> icon-heart</li>
+ <li><i class="icon-star"></i> icon-star</li>
+ <li><i class="icon-star-empty"></i> icon-star-empty</li>
+ <li><i class="icon-user"></i> icon-user</li>
+ <li><i class="icon-film"></i> icon-film</li>
+ <li><i class="icon-th-large"></i> icon-th-large</li>
+ <li><i class="icon-th"></i> icon-th</li>
+ <li><i class="icon-th-list"></i> icon-th-list</li>
+ <li><i class="icon-ok"></i> icon-ok</li>
+ <li><i class="icon-remove"></i> icon-remove</li>
+ <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
+ <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
+ <li><i class="icon-off"></i> icon-off</li>
+ <li><i class="icon-signal"></i> icon-signal</li>
+ <li><i class="icon-cog"></i> icon-cog</li>
+ <li><i class="icon-trash"></i> icon-trash</li>
+ <li><i class="icon-home"></i> icon-home</li>
+ <li><i class="icon-file"></i> icon-file</li>
+ <li><i class="icon-time"></i> icon-time</li>
+ <li><i class="icon-road"></i> icon-road</li>
+ <li><i class="icon-download-alt"></i> icon-download-alt</li>
+ <li><i class="icon-download"></i> icon-download</li>
+ <li><i class="icon-upload"></i> icon-upload</li>
+ <li><i class="icon-inbox"></i> icon-inbox</li>
+ <li><i class="icon-play-circle"></i> icon-play-circle</li>
+ <li><i class="icon-repeat"></i> icon-repeat</li>
+ </ul>
</div>
<div class="span3">
- <div class="the-icons">
- <i class="icon-refresh"></i>
- <i class="icon-list-alt"></i>
- <i class="icon-lock"></i>
- <i class="icon-flag"></i>
- <i class="icon-headphones"></i>
- <i class="icon-volume-off"></i>
- <i class="icon-volume-down"></i>
- <i class="icon-volume-up"></i>
- <i class="icon-qrcode"></i>
- <i class="icon-barcode"></i>
-
- <i class="icon-tag"></i>
- <i class="icon-tags"></i>
- <i class="icon-book"></i>
- <i class="icon-bookmark"></i>
- <i class="icon-print"></i>
- <i class="icon-camera"></i>
- <i class="icon-font"></i>
- <i class="icon-bold"></i>
- <i class="icon-italic"></i>
- <i class="icon-text-height"></i>
- <i class="icon-text-width"></i>
- <i class="icon-align-left"></i>
- <i class="icon-align-center"></i>
- <i class="icon-align-right"></i>
- <i class="icon-align-justify"></i>
- <i class="icon-list"></i>
- <i class="icon-indent-left"></i>
- <i class="icon-indent-right"></i>
- <i class="icon-facetime-video"></i>
- <i class="icon-picture"></i>
- </div>
+ <ul class="the-icons">
+ <li><i class="icon-refresh"></i> icon-refresh</li>
+ <li><i class="icon-list-alt"></i> icon-list-alt</li>
+ <li><i class="icon-lock"></i> icon-lock</li>
+ <li><i class="icon-flag"></i> icon-flag</li>
+ <li><i class="icon-headphones"></i> icon-headphones</li>
+ <li><i class="icon-volume-off"></i> icon-volume-off</li>
+ <li><i class="icon-volume-down"></i> icon-volume-down</li>
+ <li><i class="icon-volume-up"></i> icon-volume-up</li>
+ <li><i class="icon-qrcode"></i> icon-qrcode</li>
+ <li><i class="icon-barcode"></i> icon-barcode</li>
+ <li><i class="icon-tag"></i> icon-tag</li>
+ <li><i class="icon-tags"></i> icon-tags</li>
+ <li><i class="icon-book"></i> icon-book</li>
+ <li><i class="icon-bookmark"></i> icon-bookmark</li>
+ <li><i class="icon-print"></i> icon-print</li>
+ <li><i class="icon-camera"></i> icon-camera</li>
+ <li><i class="icon-font"></i> icon-font</li>
+ <li><i class="icon-bold"></i> icon-bold</li>
+ <li><i class="icon-italic"></i> icon-italic</li>
+ <li><i class="icon-text-height"></i> icon-text-height</li>
+ <li><i class="icon-text-width"></i> icon-text-width</li>
+ <li><i class="icon-align-left"></i> icon-align-left</li>
+ <li><i class="icon-align-center"></i> icon-align-center</li>
+ <li><i class="icon-align-right"></i> icon-align-right</li>
+ <li><i class="icon-align-justify"></i> icon-align-justify</li>
+ <li><i class="icon-list"></i> icon-list</li>
+ <li><i class="icon-indent-left"></i> icon-indent-left</li>
+ <li><i class="icon-indent-right"></i> icon-indent-right</li>
+ <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
+ <li><i class="icon-picture"></i> icon-picture</li>
+ </ul>
</div>
<div class="span3">
- <div class="the-icons">
- <i class="icon-pencil"></i>
- <i class="icon-map-marker"></i>
- <i class="icon-adjust"></i>
- <i class="icon-tint"></i>
- <i class="icon-edit"></i>
- <i class="icon-share"></i>
- <i class="icon-check"></i>
- <i class="icon-move"></i>
- <i class="icon-step-backward"></i>
- <i class="icon-fast-backward"></i>
- <i class="icon-backward"></i>
- <i class="icon-play"></i>
- <i class="icon-pause"></i>
- <i class="icon-stop"></i>
- <i class="icon-forward"></i>
- <i class="icon-fast-forward"></i>
- <i class="icon-step-forward"></i>
- <i class="icon-eject"></i>
- <i class="icon-chevron-left"></i>
- <i class="icon-chevron-right"></i>
-
- <i class="icon-plus-sign"></i>
- <i class="icon-minus-sign"></i>
- <i class="icon-remove-sign"></i>
- <i class="icon-ok-sign"></i>
- <i class="icon-question-sign"></i>
- <i class="icon-info-sign"></i>
- <i class="icon-screenshot"></i>
- <i class="icon-remove-circle"></i>
- <i class="icon-ok-circle"></i>
- <i class="icon-ban-circle"></i>
- </div>
+ <ul class="the-icons">
+ <li><i class="icon-pencil"></i> icon-pencil</li>
+ <li><i class="icon-map-marker"></i> icon-map-marker</li>
+ <li><i class="icon-adjust"></i> icon-adjust</li>
+ <li><i class="icon-tint"></i> icon-tint</li>
+ <li><i class="icon-edit"></i> icon-edit</li>
+ <li><i class="icon-share"></i> icon-share</li>
+ <li><i class="icon-check"></i> icon-check</li>
+ <li><i class="icon-move"></i> icon-move</li>
+ <li><i class="icon-step-backward"></i> icon-step-backward</li>
+ <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+ <li><i class="icon-backward"></i> icon-backward</li>
+ <li><i class="icon-play"></i> icon-play</li>
+ <li><i class="icon-pause"></i> icon-pause</li>
+ <li><i class="icon-stop"></i> icon-stop</li>
+ <li><i class="icon-forward"></i> icon-forward</li>
+ <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
+ <li><i class="icon-step-forward"></i> icon-step-forward</li>
+ <li><i class="icon-eject"></i> icon-eject</li>
+ <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
+ <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
+ <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
+ <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
+ <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
+ <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+ <li><i class="icon-question-sign"></i> icon-question-sign</li>
+ <li><i class="icon-info-sign"></i> icon-info-sign</li>
+ <li><i class="icon-screenshot"></i> icon-screenshot</li>
+ <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
+ <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
+ <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
+ </ul>
</div>
<div class="span3">
- <div class="the-icons">
- <i class="icon-arrow-left"></i>
- <i class="icon-arrow-right"></i>
- <i class="icon-arrow-up"></i>
- <i class="icon-arrow-down"></i>
- <i class="icon-share-alt"></i>
- <i class="icon-resize-full"></i>
- <i class="icon-resize-small"></i>
- <i class="icon-plus"></i>
- <i class="icon-minus"></i>
- <i class="icon-asterisk"></i>
-
- <i class="icon-exclamation-sign"></i>
- <i class="icon-gift"></i>
- <i class="icon-leaf"></i>
- <i class="icon-fire"></i>
- <i class="icon-eye-open"></i>
- <i class="icon-eye-close"></i>
- <i class="icon-warning-sign"></i>
- <i class="icon-plane"></i>
- <i class="icon-calendar"></i>
- <i class="icon-random"></i>
- <i class="icon-comment"></i>
- <i class="icon-magnet"></i>
- <i class="icon-chevron-up"></i>
- <i class="icon-chevron-down"></i>
- <i class="icon-retweet"></i>
- <i class="icon-shopping-cart"></i>
- <i class="icon-folder-close"></i>
- <i class="icon-folder-open"></i>
- <i class="icon-resize-vertical"></i>
- <i class="icon-resize-horizontal"></i>
- </div>
+ <ul class="the-icons">
+ <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
+ <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
+ <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
+ <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
+ <li><i class="icon-share-alt"></i> icon-share-alt</li>
+ <li><i class="icon-resize-full"></i> icon-resize-full</li>
+ <li><i class="icon-resize-small"></i> icon-resize-small</li>
+ <li><i class="icon-plus"></i> icon-plus</li>
+ <li><i class="icon-minus"></i> icon-minus</li>
+ <li><i class="icon-asterisk"></i> icon-asterisk</li>
+ <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
+ <li><i class="icon-gift"></i> icon-gift</li>
+ <li><i class="icon-leaf"></i> icon-leaf</li>
+ <li><i class="icon-fire"></i> icon-fire</li>
+ <li><i class="icon-eye-open"></i> icon-eye-open</li>
+ <li><i class="icon-eye-close"></i> icon-eye-close</li>
+ <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
+ <li><i class="icon-plane"></i> icon-plane</li>
+ <li><i class="icon-calendar"></i> icon-calendar</li>
+ <li><i class="icon-random"></i> icon-random</li>
+ <li><i class="icon-comment"></i> icon-comment</li>
+ <li><i class="icon-magnet"></i> icon-magnet</li>
+ <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
+ <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
+ <li><i class="icon-retweet"></i> icon-retweet</li>
+ <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
+ <li><i class="icon-folder-close"></i> icon-folder-close</li>
+ <li><i class="icon-folder-open"></i> icon-folder-open</li>
+ <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
+ <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+ </ul>
</div>
</div>
<div class="alert alert-info">
- <strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.
+ <strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.
</div>
<br>
@@ -1495,7 +1562,7 @@
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
+ <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
View
157 docs/components.html
@@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
+ <li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
@@ -118,14 +119,34 @@
<div class="span4">
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
- <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
- <div class="btn-toolbar" style="margin-top: 18px;">
- <div class="btn-group">
+ <h3>Best practices</h3>
+ <p>We recommend the following guidelines for using button groups and toolbars:</p>
+ <ul>
+ <li>Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.</li>
+ <li>Don't mix buttons of different colors in the same button group.</li>
+ <li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
+ </ul>
+ <p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
+ </div>
+ <div class="span4">
+ <h3>Default example</h3>
+ <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
+ <div class="">
+ <div class="btn-group" style="margin: 9px 0;">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+ &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
+ &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
+ &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+ <h3>Toolbar example</h3>
+ <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
@@ -142,18 +163,6 @@
<a class="btn" href="#">8</a>
</div>
</div>
- </div>
- <div class="span4">
- <h3>Example markup</h3>
- <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
- &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
- &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
- &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
-&lt;/div&gt;
-</pre>
- <p>And with a toolbar for multiple groups:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
@@ -239,7 +248,9 @@ <h4 class="muted">Heads up</h4>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- </div>
+ </div><!-- /btn-toolbar -->
+ <hr>
+ <p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
<div class="span8">
<h3>Example markup</h3>
@@ -354,9 +365,10 @@ <h4 class="muted">Heads up</h4>
<div class="span4">
<h3>Powerful base class</h3>
<p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
- <h3>Why tabs and pills</h3>
- <p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
- <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
+ <h3>When to use</h3>
+ <p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
+ <h3>Component alignment</h3>
+ <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
</div>
<div class="span4">
<h3>Basic tabs</h3>
@@ -762,7 +774,9 @@ <h4 class="muted">Heads up</h4>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
+ <li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
@@ -801,12 +815,14 @@ <h4 class="muted">Heads up</h4>
&lt;/div&gt;
&lt;/div&gt;
</pre>
- <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
+ <h3>Fixed navbar</h3>
+ <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
+ <p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
@@ -827,14 +843,14 @@ <h4 class="muted">Heads up</h4>
&lt;div class="navbar"&gt;