@@ -1514,10 +1518,6 @@ 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!
- The .icon- class must be listed first in the class tag for proper CSS targeting.
-
@@ -700,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
About Tooltips
-
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.
+
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.
+
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.
@@ -717,8 +717,8 @@
Node with makefile
-
Install the LESS command line compiler with npm by running the following command:
-
$ npm install less
+
Install the LESS command line compiler globally with npm by running the following command:
+
$ npm install -g less
Once installed just run make from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.
-
Example
+
Example
+
Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.
Level 1 of column
@@ -187,6 +188,21 @@
+
Fluid example
+
Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.
+
+
+ Fluid 12
+
+
+ Fluid 6
+
+
+ Fluid 6
+
+
+
+
@@ -315,7 +331,7 @@
Supported devices
-
Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
+
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}}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}}The .icon- class must be listed first in the class tag for proper CSS targeting.{{/i}}
-
{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}
-
{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}
-
-
+
{{_i}}Best practices{{/i}}
+
{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}
+
+
{{_i}}Always use the same element in a single button group, <a> or <button>.{{/i}}
+
{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
+
{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}
+
+
{{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}
+
+
+
{{_i}}Default example{{/i}}
+
{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}
@@ -624,14 +624,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}About Tooltips{{/i}}
-
{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}
+
{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}
+
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}
@@ -641,8 +641,8 @@
{{_i}}Node with makefile{{/i}}
-
{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}
-
$ npm install less
+
{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}
+
$ npm install -g less
{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}
{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}
-
{{_i}}Example{{/i}}
+
{{_i}}Example{{/i}}
+
{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.{{/i}}
{{_i}}Level 1 of column{{/i}}
@@ -111,6 +112,21 @@
+
{{_i}}Fluid example{{/i}}
+
{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}
+
+
+ {{_i}}Fluid 12{{/i}}
+
+
+ {{_i}}Fluid 6{{/i}}
+
+
+ {{_i}}Fluid 6{{/i}}
+
+
+
+
@@ -239,7 +255,7 @@
{{_i}}Supported devices{{/i}}
-
{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/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}}
- {{_i}}Heads up!{{/i}} {{_i}}We're rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}}
+ {{_i}}Heads up!{{/i}} {{_i}}We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}}
+
{{_i}}Tooltips{{/i}}
+
+
{{_i}}The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.{{/i}}
+
{{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
+
{{_i}}The animate option was renamed to animation.{{/i}}
+
{{_i}}The html option was removed, as the tooltips default to allowing HTML now.{{/i}}
+
+
{{_i}}Tooltips{{/i}}
+
+
{{_i}}Values for placement option changed from above and below to top and bottom. (Affects popovers, too.){{/i}}
+
{{_i}}Popovers{{/i}}
{{_i}}Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.{{/i}}
- Heads up! We're rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.
+ Heads up! We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.
+
Tooltips
+
+
The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.
+
The placement option value that was below is now bottom, and above is now top.
+
The animate option was renamed to animation.
+
The html option was removed, as the tooltips default to allowing HTML now.
+
+
Tooltips
+
+
Values for placement option changed from above and below to top and bottom. (Affects popovers, too.)
+
Popovers
Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
diff --git a/less/buttons.less b/less/buttons.less
index 880d1f64a4..0dc9e374bb 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -53,7 +53,6 @@
.box-shadow(@shadow);
background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9");
- color: rgba(0,0,0,.5);
outline: 0;
}
diff --git a/less/code.less b/less/code.less
index e75cfa00d6..35a8ae6b82 100644
--- a/less/code.less
+++ b/less/code.less
@@ -11,12 +11,16 @@ pre {
color: @grayDark;
.border-radius(3px);
}
+
+// Inline code
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
+
+// Blocks of code
pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
@@ -44,3 +48,9 @@ pre {
border: 0;
}
}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+ max-height: 340px;
+ overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/less/forms.less b/less/forms.less
index 5bce4cebd4..81833b0646 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -28,6 +28,12 @@ legend {
color: @grayDark;
border: 0;
border-bottom: 1px solid #eee;
+
+ // Small
+ small {
+ font-size: @baseLineHeight * .75;
+ color: @grayLight;
+ }
}
// Set font for forms
@@ -116,6 +122,11 @@ input[type="file"] {
line-height: 28px;
}
+// Reset line-height for IE
+input[type="file"] {
+ line-height: 18px \9;
+}
+
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -196,7 +207,7 @@ textarea:focus {
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
outline: 0;
- outline: thin dotted \9; /* IE6-8 */
+ outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
input[type="radio"]:focus,
@@ -453,21 +464,30 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+ margin-bottom: 0;
+ vertical-align: middle;
+}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+ margin-top: @baseLineHeight;
+ -webkit-margin-top-collapse: separate;
+}
+
// Horizontal-specific styles
// --------------------------
.form-horizontal {
- // Legend collapses margin, so we're relegated to padding
- legend + .control-group {
- margin-top: @baseLineHeight;
- -webkit-margin-top-collapse: separate;
- }
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
diff --git a/less/navs.less b/less/navs.less
index a29cb712bb..0d37ea388e 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -249,6 +249,9 @@
.tabbable {
.clearfix();
}
+.tab-content {
+ overflow: hidden; // prevent content from running below tabs
+}
// Remove border on bottom, left, right
.tabs-below .nav-tabs,
diff --git a/less/responsive.less b/less/responsive.less
index 7ed58bb4e0..1e3bf371cc 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -56,7 +56,7 @@
.uneditable-input {
display: block;
width: 100%;
- height: 28px; /* Make inputs at least the height of their button counterpart */
+ min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
diff --git a/less/sprites.less b/less/sprites.less
index ce76688443..a7741661ea 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -14,7 +14,8 @@
// For the white version of the icons, just add the .icon-white class:
//
-[class^="icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
diff --git a/less/tables.less b/less/tables.less
index cbc013aca7..3a4066d715 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -25,14 +25,15 @@ table {
padding: 8px;
line-height: @baseLineHeight;
text-align: left;
+ vertical-align: top;
border-top: 1px solid #ddd;
}
th {
font-weight: bold;
- vertical-align: bottom;
}
- td {
- vertical-align: top;
+ // Bottom align for column headings
+ thead th {
+ vertical-align: bottom;
}
// Remove top border from thead by default
thead:first-child tr th,
diff --git a/less/type.less b/less/type.less
index 7841bb0906..6ba83bc3a3 100644
--- a/less/type.less
+++ b/less/type.less
@@ -110,7 +110,8 @@ ol {
li {
line-height: @baseLineHeight;
}
-ul.unstyled {
+ul.unstyled,
+ol.unstyled {
margin-left: 0;
list-style: none;
}
@@ -137,7 +138,7 @@ dd {
hr {
margin: @baseLineHeight 0;
border: 0;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid @hrBorder;
border-bottom: 1px solid @white;
}
diff --git a/less/variables.less b/less/variables.less
index 9f58d730ee..ced64d7cd6 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -61,6 +61,9 @@
// Input placeholder text color
@placeholderText: @grayLight;
+// Hr border color
+@hrBorder: @grayLighter;
+
// Navbar
@navbarHeight: 40px;
@navbarBackground: @grayDarker;