@@ -956,10 +984,26 @@ For example, <code>section</code> should be wrapped as inline.
-
+
+
Example markup
+
Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.
@@ -1014,9 +1058,9 @@ For example, <code>section</code> should be wrapped as inline.
-
+
-
+
Something may have gone wrong
@@ -1028,9 +1072,9 @@ For example, <code>section</code> should be wrapped as inline.
-
+
-
+
Woohoo!
@@ -1049,14 +1093,14 @@ For example, <code>section</code> should be wrapped as inline.
-
+
Redesigned browser states
-
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
+
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.
Form validation
It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.
@@ -1077,7 +1121,7 @@ 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 hightlight the icon's size.
+ Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.
@@ -1460,7 +1527,7 @@ For example, <code>section</code> should be wrapped as inline.
How to use
-
With v2.0.0, 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:
+
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 class="icon-search"></i>
@@ -1495,7 +1562,7 @@ For example, <code>section</code> should be wrapped as inline.
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
+
Fixed navbar
+
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.
<div class="navbar navbar-fixed-top">
...
</div>
+
In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
Brand name
A simple link to show your brand or project name only requires an anchor tag.
@@ -827,14 +843,14 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
-
+
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
-
+
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
@@ -864,8 +880,18 @@
<li><a href="#">Link</a></li>
</ul>
+
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
+
The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
Typographic components Page header and hero unit for segmenting content
+
+
Hero unit
+
+
+
Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
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).
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
+
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
Single alert message
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
@@ -1294,24 +1369,24 @@
Example alerts
Wrap your message and an optional close icon in a div with simple class.
- ×
+ ×Warning! Best check yo self, you're not looking too good.
<div class="alert">
- <a class="close">×</a>
+ <a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
+
Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
@@ -636,7 +642,7 @@ $('#myModal').on('hidden', function () {
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
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.
@@ -827,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
placement
-
string
+
string|function
'right'
how to position the popover - top | bottom | left | right
@@ -917,13 +926,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
@@ -932,7 +941,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
.alert('close')
Closes an alert.
-
$(".alert-message").alert('close')
+
$(".alert").alert('close')
Events
Bootstrap's alert class exposes a few events for hooking into alert functionality.
@@ -1042,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
Methods
$().button('toggle')
-
Toggles push state. Gives btn the look that it's been activated.
+
Toggles push state. Gives btn the look that it hass been activated.
Heads up!
You can enable auto toggling of a button by using the data-toggle attribute.
@@ -1145,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
parent
selector
false
-
If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
+
If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle
@@ -1295,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
Markup
Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.
Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.
+
Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.
What's included?
@@ -123,7 +123,7 @@
Operations
-
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.
@@ -348,13 +348,13 @@
@warningText
-
#f3edd2
-
+
#c09853
+
@warningBackground
-
#c09853
-
+
#f3edd2
+
@errorText
@@ -604,7 +604,7 @@
.scale()
@ratio
-
Scale an element to n times it's original size
+
Scale an element to n times its original size
.translate()
@@ -614,7 +614,7 @@
.background-clip()
@clip
-
Crop the backgroud of an element (useful for border-radius)
+
Crop the background of an element (useful for border-radius)
.background-size()
@@ -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).
Default grid system 12 columns with a responsive twist
-
Default 940px grid
1
1
@@ -173,7 +174,8 @@
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,7 +189,7 @@
-
+
<div class="row">
@@ -202,8 +204,112 @@
+
-
Grid customization
+
+
+
+
+
+
Fluid grid system 12 responsive, percent-based columns
+
+
+
Fluid columns
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+
+
+
+
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.
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.
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.
+
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
@@ -265,8 +371,8 @@
Fixed layout
The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.
-
-
+
+
<body>
@@ -279,9 +385,9 @@
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.
-
-
-
+
+
+
<div class="container-fluid">
@@ -315,7 +421,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:
@@ -338,8 +444,8 @@
Landscape tablets
-
768px to 980px
-
44px
+
768px to 979px
+
42px
20px
@@ -357,6 +463,10 @@
+
Requires meta tag
+
To ensure devices display responsive pages properly, include the viewport meta tag.
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.
@@ -377,7 +487,7 @@
Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
-
Modify and recompile responsive.less as a separate
+
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.
{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.{{/i}}
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
+
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.{{/i}}
{{_i}}Form validation{{/i}}
{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.{{/i}}
{{_i}}Indicates a dangerous or potentially negative action{{/i}}
+
+
+
+
.btn-inverse
+
{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
@@ -1173,50 +1231,63 @@
{{_i}}Buttons for actions{{/i}}
{{_i}}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.{{/i}}
+
{{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}
+
{{_i}}Cross browser compatibility{{/i}}
+
{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}
-
-
{{_i}}For anchors and forms{{/i}}
-
{{_i}}Button styles can be applied to anything with the .btn applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}
-
-
-
{{_i}}Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.{{/i}}
-
-
-
-
{{_i}}Multiple sizes{{/i}}
-
{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}
+
{{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}
{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}
- {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
+ {{_i}}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}}
@@ -1384,7 +1451,7 @@
{{_i}}How to use{{/i}}
-
{{_i}}With v2.0.0, 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}}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}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
+
{{_i}}Fixed navbar{{/i}}
+
{{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.{{/i}}
<div class="navbar navbar-fixed-top">
...
</div>
+
{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
{{_i}}Brand name{{/i}}
{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
@@ -751,14 +767,14 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
-
+
<!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
-
+
<!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} -->
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
@@ -788,8 +804,18 @@
<li><a href="#">{{_i}}Link{{/i}}</a></li>
</ul>
+
{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
{{_i}}To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
{{_i}}Adding dropdowns{{/i}}
-
{{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
+
{{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}
+
{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}
{{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}
+
+
{{_i}}Hero unit{{/i}}
+
+
+
{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}
{{_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}}
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
{{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.{{/i}}
+
{{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.{{/i}}
{{_i}}Single alert message{{/i}}
{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}
@@ -1218,24 +1293,24 @@
{{_i}}Example alerts{{/i}}
{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}
- ×
+ ×{{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
<div class="alert">
- <a class="close">×</a>
+ <a class="close" data-dismiss="alert">×</a>
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
{{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}
{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}
+
{{_i}}Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}
@@ -133,4 +132,4 @@
-
+
\ No newline at end of file
diff --git a/templates/pages/javascript.mustache b/templates/pages/javascript.mustache
index f5152cdf..ac989f3e 100644
--- a/templates/pages/javascript.mustache
+++ b/templates/pages/javascript.mustache
@@ -58,7 +58,7 @@
@@ -197,6 +197,12 @@
{{_i}}true{{/i}}
{{_i}}Closes the modal when escape key is pressed{{/i}}
{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}
@@ -560,7 +566,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/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}}
@@ -751,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}placement{{/i}}
-
{{_i}}string{{/i}}
+
{{_i}}string|function{{/i}}
'right'
{{_i}}how to position the popover{{/i}} - top | bottom | left | right
@@ -841,13 +850,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Oh snap! You got an error!{{/i}}
{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}
@@ -856,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}
.alert('close')
{{_i}}Closes an alert.{{/i}}
-
$(".alert-message").alert('close')
+
$(".alert").alert('close')
{{_i}}Events{{/i}}
{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}
@@ -966,7 +975,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}Methods{{/i}}
$().button('toggle')
-
{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}
+
{{_i}}Toggles push state. Gives btn the look that it hass been activated.{{/i}}
{{_i}}Heads up!{{/i}}
{{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
@@ -1069,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}parent{{/i}}
{{_i}}selector{{/i}}
false
-
{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}
+
{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
{{_i}}toggle{{/i}}
@@ -1219,10 +1228,12 @@ $('#myCollapsible').on('hidden', function () {
{{_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}}This event is fired when the carousel has completed it's slide transition.{{/i}}
+
{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}
@@ -1346,7 +1357,7 @@ $('.myCarousel').carousel({
{{_i}}Methods{{/i}}
.typeahead({{_i}}options{{/i}})
-
{{_i}}Initializes an input with a typahead.{{/i}}
+
{{_i}}Initializes an input with a typeahead.{{/i}}
-
+
\ No newline at end of file
diff --git a/templates/pages/less.mustache b/templates/pages/less.mustache
index 0ae3db99..742b166d 100644
--- a/templates/pages/less.mustache
+++ b/templates/pages/less.mustache
@@ -24,7 +24,7 @@
{{_i}}Why LESS?{{/i}}
-
{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}
+
{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}
{{_i}}What's included?{{/i}}
@@ -47,7 +47,7 @@
{{_i}}Operations{{/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}}
@@ -210,7 +210,7 @@
{{_i}}Components{{/i}}
-
Buttons
+
{{_i}}Buttons{{/i}}
@@ -220,7 +220,7 @@
-
Forms
+
{{_i}}Forms{{/i}}
@@ -230,7 +230,7 @@
-
Navbar
+
{{_i}}Navbar{{/i}}
@@ -272,13 +272,13 @@
@warningText
-
#f3edd2
-
+
#c09853
+
@warningBackground
-
#c09853
-
+
#f3edd2
+
@errorText
@@ -399,7 +399,7 @@
-
{{_i}}Forms{{/i}}
+
Forms
@@ -416,7 +416,7 @@
-
{{_i}}Typography{{/i}}
+
Typography
@@ -463,7 +463,7 @@
-
{{_i}}Grid system{{/i}}
+
Grid system
@@ -528,7 +528,7 @@
.scale()
@ratio
-
{{_i}}Scale an element to n times it's original size{{/i}}
+
{{_i}}Scale an element to n times its original size{{/i}}
.translate()
@@ -538,7 +538,7 @@
.background-clip()
@clip
-
{{_i}}Crop the backgroud of an element (useful for border-radius){{/i}}
+
{{_i}}Crop the background of an element (useful for border-radius){{/i}}
.background-size()
@@ -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}}Grid system 12 columns with a responsive twist{{/i}}
+
{{_i}}Default grid system 12 columns with a responsive twist{{/i}}
-
{{_i}}Default 940px grid{{/i}}
1
1
@@ -97,7 +98,8 @@
{{_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,7 +113,7 @@
-
+
<div class="row">
@@ -126,8 +128,112 @@
+
-
{{_i}}Grid customization{{/i}}
+
+
+
+
+
+
{{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}
+
+
+
{{_i}}Fluid columns{{/i}}
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+
+
+
+
{{_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}}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}}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}}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}}
@@ -189,8 +295,8 @@
{{_i}}Fixed layout{{/i}}
{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
-
-
+
+
<body>
@@ -203,9 +309,9 @@
{{_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}}
-
-
-
+
+
+
<div class="container-fluid">
@@ -239,7 +345,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}}
@@ -262,8 +368,8 @@
{{_i}}Landscape tablets{{/i}}
-
768px to 980px
-
44px
+
768px to 979px
+
42px
20px
@@ -281,6 +387,10 @@
+
{{_i}}Requires meta tag{{/i}}
+
{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/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}}
@@ -301,7 +411,7 @@
{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}
{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
-
{{_i}}Modify and recompile responsive.less as a separate{{/i}}
+
{{_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}}Media queries added for basic support across mobile and tablet devices{{/i}}
{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}
-
+
@@ -76,12 +76,14 @@
{{_i}}IE9: removed gradients and added rounded corners{{/i}}
{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}
{{_i}}New mixin, .buttonBackground, to set button gradients{{/i}}
+
{{_i}}The .secondary class was removed from modal examples in our docs as it never had associated styles.{{/i}}
{{_i}}Forms{{/i}}
{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}
{{_i}}Form classes standardized with .form- required as a prefix{{/i}}
{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}
+
{{_i}}For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.{{/i}}
{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the label{{/i}}
{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}
@@ -109,7 +111,7 @@
{{_i}}Navigation{{/i}}
-
{{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul>{{/i}}
+
{{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.{{/i}}
{{_i}}New nav list variation added that uses the same base class, .nav{{/i}}
{{_i}}Vertical tabs and pills have been added—just add .nav-stacked to the <ul>{{/i}}
{{_i}}Pills were restyled to be less rounded by default{{/i}}
@@ -128,6 +130,7 @@
{{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
{{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
+
{{_i}}Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior{{/i}}
{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
{{_i}}Labels{{/i}}
@@ -144,7 +147,7 @@
{{_i}}New base class: .alert instead of .alert-message{{/i}}
{{_i}}Class names standardized for other options, now all starting with .alert-{{/i}}
-
{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}
+
{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}
{{_i}}Block level alert class changed: .alert-block instead of .block-message{{/i}}
{{_i}}Progress bars{{/i}}
@@ -167,11 +170,19 @@
{{_i}}Javascript plugins{{/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}}Popovers{{/i}}
{{_i}}Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.{{/i}}
+
{{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
Media queries added for basic support across mobile and tablet devices
Responsive CSS is compiled separately, as bootstrap-responsive.css
-
+
@@ -152,12 +152,14 @@
IE9: removed gradients and added rounded corners
Updated active state to make styling clearer in button groups (new) and look better with custom transition
New mixin, .buttonBackground, to set button gradients
+
The .secondary class was removed from modal examples in our docs as it never had associated styles.
Forms
Default form style is now vertical (stacked) to use less CSS and add greater flexibility
Form classes standardized with .form- required as a prefix
New built-in form defaults for search, inline, and horizontal forms
+
For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.
More flexible horizontal form markup with classes for all styling, including new optional class for the label
Form states: colors updated and customizable via new LESS variables
@@ -185,7 +187,7 @@
Navigation
-
Tabs and pills now require the use of a new base class, .nav, on their <ul>
+
Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.
New nav list variation added that uses the same base class, .nav
Vertical tabs and pills have been added—just add .nav-stacked to the <ul>
Pills were restyled to be less rounded by default
@@ -204,6 +206,7 @@
Updated the .dropdown-menu to tighten up spacing
Now requires you to add a <span class="caret"></span> to show the dropdown arrow
+
Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior
The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
Labels
@@ -220,7 +223,7 @@
New base class: .alert instead of .alert-message
Class names standardized for other options, now all starting with .alert-
-
Redesigned base alert styles to combine the deafult alerts and block-level alerts into one
+
Redesigned base alert styles to combine the default alerts and block-level alerts into one
Block level alert class changed: .alert-block instead of .block-message
Progress bars
@@ -243,11 +246,19 @@
Javascript plugins
- 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.
+
Popovers
Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
+
The placement option value that was below is now bottom, and above is now top.
diff --git a/javascript.html b/javascript.html
index db694839..3667903c 100644
--- a/javascript.html
+++ b/javascript.html
@@ -7,17 +7,17 @@
-
-
-
+
+
+
@@ -134,7 +134,7 @@
@@ -273,6 +273,12 @@