We have included a makefile with convenience methods for working with the Bootstrap library.
We have included a makefile with convenience methods for working with the Bootstrap library.
+**build** - `make`
+**build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir.
Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <ahref="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs »</a>
The lessc compiler is required for this command to run.
+**watch** - `make watch`
+**watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
<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>
<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>
<hr>
<h3>Form validation</h3>
<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>
<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 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1077,7 +1121,7 @@ For example, <code>section</code> should be wrapped as inline.
<pclass="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>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
...
@@ -1249,50 +1307,63 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1249,50 +1307,63 @@ For example, <code>section</code> should be wrapped as inline.
<divclass="span4">
<divclass="span4">
<h3>Buttons for actions</h3>
<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>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><a></code> and <code><button></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>
<divclass="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><a></code> and <code><button></code> elements.</p>
</div>
<divclass="span4">
<p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p>
</div>
</div>
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>Multiple sizes</h3>
<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>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.</p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
</p>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>Cross browser compatibility</h3>
<h3>One class, multiple tags</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>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow—unfortunately we can't fix this.</p>
<form>
<aclass="btn"href="">Link</a>
<buttonclass="btn"type="submit">Button</button>
<inputclass="btn"type="button"value="Input">
<inputclass="btn"type="submit"value="Submit">
</form>
<preclass="prettyprint linenums">
<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">
</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><input type="submit"></code> for your button.</p>
</div>
</div>
</div>
</div>
<br>
</section>
</section>
...
@@ -1305,148 +1376,144 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1305,148 +1376,144 @@ For example, <code>section</code> should be wrapped as inline.
<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>
</div>
<br>
<br>
...
@@ -1495,7 +1562,7 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1495,7 +1562,7 @@ For example, <code>section</code> should be wrapped as inline.
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<h3>Best practices</h3>
<divclass="btn-toolbar"style="margin-top: 18px;">
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<divclass="btn-group">
<ul>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></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><spanclass="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>
<divclass="span4">
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<aclass="btn"href="#">Left</a>
<aclass="btn"href="#">Left</a>
<aclass="btn"href="#">Middle</a>
<aclass="btn"href="#">Middle</a>
<aclass="btn"href="#">Right</a>
<aclass="btn"href="#">Right</a>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<h3>Toolbar example</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<divclass="btn-toolbar">
<divclass="btn-toolbar">
<divclass="btn-group">
<divclass="btn-group">
<aclass="btn"href="#">1</a>
<aclass="btn"href="#">1</a>
...
@@ -142,18 +163,6 @@
...
@@ -142,18 +163,6 @@
<aclass="btn"href="#">8</a>
<aclass="btn"href="#">8</a>
</div>
</div>
</div>
</div>
</div>
<divclass="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<p>And with a toolbar for multiple groups:</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
...
@@ -239,7 +248,9 @@
...
@@ -239,7 +248,9 @@
<li><ahref="#">Separated link</a></li>
<li><ahref="#">Separated link</a></li>
</ul>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><spanclass="label label-info">Heads up!</span> Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
</div>
<divclass="span8">
<divclass="span8">
<h3>Example markup</h3>
<h3>Example markup</h3>
...
@@ -354,9 +365,10 @@
...
@@ -354,9 +365,10 @@
<divclass="span4">
<divclass="span4">
<h3>Powerful base class</h3>
<h3>Powerful base class</h3>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<h3>Why tabs and pills</h3>
<h3>When to use</h3>
<p>Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<p>Both options are great for sub-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>
<divclass="span4">
<divclass="span4">
<h3>Basic tabs</h3>
<h3>Basic tabs</h3>
...
@@ -762,7 +774,9 @@
...
@@ -762,7 +774,9 @@
<li><ahref="#">Another action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<liclass="divider"></li>
<liclass="nav-header">Nav header</li>
<li><ahref="#">Separated link</a></li>
<li><ahref="#">Separated link</a></li>
<li><ahref="#">One more separated link</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
...
@@ -801,12 +815,14 @@
...
@@ -801,12 +815,14 @@
</div>
</div>
</div>
</div>
</pre>
</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><body></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>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-fixed-top">
...
...
</div>
</div>
</pre>
</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><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>Component alignment</h3>
<p>To align a nav, search form, or text, 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>
<h3>Adding dropdowns</h3>
<h3>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdown">our javascript plugin</a>.</p>
<p>Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav">
<ul class="nav">
<li class="dropdown">
<li class="dropdown">
...
@@ -881,7 +907,7 @@
...
@@ -881,7 +907,7 @@
</li>
</li>
</ul>
</ul>
</pre>
</pre>
<p><aclass="btn"href="./javascript.html#dropdown">Get the javascript →</a></p>
<p><aclass="btn"href="./javascript.html#dropdowns">Get the javascript →</a></p>
</div><!-- /.span -->
</div><!-- /.span -->
</div><!-- /.row -->
</div><!-- /.row -->
...
@@ -1021,7 +1047,7 @@
...
@@ -1021,7 +1047,7 @@
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>About pager</h3>
<h3>About pager</h3>
<p>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.</p>
<p>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.</p>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<divclass="row">
<divclass="span4">
<p>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.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<preclass="prettyprint linenums">
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
</pre>
</div>
<divclass="span8">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.</p>
<h3>Single alert message</h3>
<h3>Single alert message</h3>
<p>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 <code>.alert-block</code>.</p>
<p>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 <code>.alert-block</code>.</p>
<hr>
<hr>
...
@@ -1294,24 +1369,24 @@
...
@@ -1294,24 +1369,24 @@
<h3>Example alerts</h3>
<h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<divclass="alert">
<divclass="alert">
<aclass="close">×</a>
<aclass="close"data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
<strong>Warning!</strong> Best check yo self, you're not looking too good.
<strong>Warning!</strong> Best check yo self, you're not looking too good.
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</pre>
</pre>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<divclass="alert alert-block">
<divclass="alert alert-block">
<aclass="close">×</a>
<aclass="close"data-dismiss="alert">×</a>
<h4class="alert-heading">Warning!</h4>
<h4class="alert-heading">Warning!</h4>
<p>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.</p>
<p>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.</p>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<p>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.</p>
<p>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.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
@@ -630,11 +630,11 @@ $('#myModal').on('hidden', function () {
...
@@ -630,11 +630,11 @@ $('#myModal').on('hidden', function () {
<h3>Markup</h3>
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
@@ -700,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -700,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<divclass="row">
<divclass="row">
<divclass="span3 columns">
<divclass="span3 columns">
<h3>About Tooltips</h3>
<h3>About Tooltips</h3>
<p>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.</p>
<p>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.</p>
@@ -833,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -833,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
</tr>
<tr>
<tr>
<td>placement</td>
<td>placement</td>
<td>string</td>
<td>string|function</td>
<td>'right'</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td>
<td>how to position the popover - top | bottom | left | right</td>
</tr>
</tr>
...
@@ -923,11 +926,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -923,11 +926,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4class="alert-heading">Oh snap! You got an error!</h4>
<h4class="alert-heading">Oh snap! You got an error!</h4>
<p>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.</p>
<p>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.</p>
<p>
<p>
<aclass="btn btn-danger small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
<aclass="btn btn-danger"href="#">Take this action</a><aclass="btn"href="#">Or do this</a>
</p>
</p>
</div>
</div>
<hr>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<h2>Using bootstrap-alert.js</h2>
<p>Enable dismissal of an alert via javascript:</p>
<p>Enable dismissal of an alert via javascript:</p>
@@ -1048,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
...
@@ -1048,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
</pre>
</pre>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>$().button('toggle')</h4>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives btn the look that it's been activated.</p>
<p>Toggles push state. Gives btn the look that it hass been activated.</p>
<divclass="alert alert-info">
<divclass="alert alert-info">
<strong>Heads up!</strong>
<strong>Heads up!</strong>
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
...
@@ -1151,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
...
@@ -1151,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
<td>parent</td>
<td>parent</td>
<td>selector</td>
<td>selector</td>
<td>false</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
</tr>
</tr>
<tr>
<tr>
<td>toggle</td>
<td>toggle</td>
...
@@ -1301,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
...
@@ -1301,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
<h3>Markup</h3>
<h3>Markup</h3>
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<p>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.</p>
<p>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.</p>
<td>Scale an element to <em>n</em> times it's original size</td>
<td>Scale an element to <em>n</em> times its original size</td>
</tr>
</tr>
<tr>
<tr>
<td><code>.translate()</code></td>
<td><code>.translate()</code></td>
...
@@ -614,7 +614,7 @@
...
@@ -614,7 +614,7 @@
<tr>
<tr>
<td><code>.background-clip()</code></td>
<td><code>.background-clip()</code></td>
<td><code>@clip</code></td>
<td><code>@clip</code></td>
<td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
<td>Crop the background of an element (useful for <code>border-radius</code>)</td>
</tr>
</tr>
<tr>
<tr>
<td><code>.background-size()</code></td>
<td><code>.background-size()</code></td>
...
@@ -717,8 +717,8 @@
...
@@ -717,8 +717,8 @@
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>Node with makefile</h3>
<h3>Node with makefile</h3>
<p>Install the LESS command line compiler with npm by running the following command:</p>
<p>Install the LESS command line compiler globally with npm by running the following command:</p>
<pre>$ npm install less</pre>
<pre>$ npm install -g less</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <ahref="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
<p>Additionally, if you have <ahref="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
</div>
<h2>Default 940px grid</h2>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
...
@@ -173,7 +174,8 @@
...
@@ -173,7 +174,8 @@
<divclass="row">
<divclass="row">
<divclass="span6">
<divclass="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h4>Example</h4>
<h3>Example</h3>
<p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
<divclass="row">
<divclass="span4">
<h3>Percents, not pixels</h3>
<p>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.</p>
</div>
<divclass="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<divclass="span4">
<h3>Markup</h3>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<divclass="row">
<divclass="span6">
<p>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.</p>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <ahref="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <ahref="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>Staying responsive</h3>
<h3>Staying responsive</h3>
...
@@ -265,8 +371,8 @@
...
@@ -265,8 +371,8 @@
<divclass="span6">
<divclass="span6">
<h2>Fixed layout</h2>
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<divclass="minicon-layout">
<divclass="mini-layout">
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -279,9 +385,9 @@
...
@@ -279,9 +385,9 @@
<divclass="span6">
<divclass="span6">
<h2>Fluid layout</h2>
<h2>Fluid layout</h2>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<divclass="minicon-layout fluid">
<divclass="mini-layout fluid">
<divclass="minicon-layout-sidebar"></div>
<divclass="mini-layout-sidebar"></div>
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="container-fluid">
<div class="container-fluid">
...
@@ -315,7 +421,7 @@
...
@@ -315,7 +421,7 @@
</div>
</div>
<divclass="span8">
<divclass="span8">
<h2>Supported devices</h2>
<h2>Supported devices</h2>
<p>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:</p>
<p>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:</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
...
@@ -338,8 +444,8 @@
...
@@ -338,8 +444,8 @@
</tr>
</tr>
<tr>
<tr>
<td>Landscape tablets</td>
<td>Landscape tablets</td>
<td>768px to 980px</td>
<td>768px to 979px</td>
<td>44px</td>
<td>42px</td>
<td>20px</td>
<td>20px</td>
</tr>
</tr>
<tr>
<tr>
...
@@ -357,6 +463,10 @@
...
@@ -357,6 +463,10 @@
</tbody>
</tbody>
</table>
</table>
<h3>Requires meta tag</h3>
<p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<ul>
...
@@ -377,7 +487,7 @@
...
@@ -377,7 +487,7 @@
<ol>
<ol>
<li>Use the compiled responsive version, bootstrap-responsive.css</li>
<li>Use the compiled responsive version, bootstrap-responsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Modify and recompile responsive.less as a separate</li>
<li>Modify and recompile responsive.less as a separate file</li>
</ol>
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
<pre>
<pre>
<p>{{_i}}Sample text here...{{/i}}</p>
<p>{{_i}}Sample text here...{{/i}}</p>
</pre>
</pre>
...
@@ -309,6 +309,7 @@
...
@@ -309,6 +309,7 @@
</pre>
</pre>
</pre>
</pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
</div><!--/span-->
</div><!--/span-->
<divclass="span4">
<divclass="span4">
<h2>Google Prettify</h2>
<h2>Google Prettify</h2>
...
@@ -454,7 +455,7 @@
...
@@ -454,7 +455,7 @@
<td>
<td>
<code>.table-bordered</code>
<code>.table-bordered</code>
</td>
</td>
<td>{{_i}}Rounds corners and adds outter border{{/i}}</td>
<td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>{{_i}}Zebra-stripe{{/i}}</td>
<td>{{_i}}Zebra-stripe{{/i}}</td>
...
@@ -776,9 +777,9 @@
...
@@ -776,9 +777,9 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h3>{{_i}}Basic form{{/i}}</h3>
<divclass="row">
<divclass="row">
<divclass="span3">
<divclass="span3">
<h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
<p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<p>{{_i}}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>.{{/i}}</p>
<p>{{_i}}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>.{{/i}}</p>
<hr>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
...
@@ -1001,7 +1045,7 @@
...
@@ -1001,7 +1045,7 @@
<fieldset>
<fieldset>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<pclass="help-block">{{_i}}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>).{{/i}}</p>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
...
@@ -1173,50 +1231,63 @@
...
@@ -1173,50 +1231,63 @@
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Buttons for actions{{/i}}</h3>
<h3>{{_i}}Buttons for actions{{/i}}</h3>
<p>{{_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}}</p>
<p>{{_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}}</p>
<p>{{_i}}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><a></code> and <code><button></code> elements.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
</div>
</div>
<divclass="span4">
<h3>{{_i}}For anchors and forms{{/i}}</h3>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements.{{/i}}</p>
</div>
<divclass="span4">
<p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.{{/i}}</p>
</div>
</div>
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.{{/i}}</p>
<p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.{{/i}}</p>
{{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
</p>
</p>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>Cross browser compatibility</h3>
<h3>{{_i}}One class, multiple tags{{/i}}</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>{{_i}}Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.{{/i}}</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow—unfortunately we can't fix this.</p>
<p>{{_i}}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><input type="submit"></code> for your button.{{/i}}</p>
{{_i}}<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.{{/i}}
{{_i}}<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.{{/i}}
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
<p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
<h3>{{_i}}Best practices{{/i}}</h3>
<divclass="btn-toolbar"style="margin-top: 18px;">
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<divclass="btn-group">
<ul>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
</ul>
<p>{{_i}}<spanclass="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.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<aclass="btn"href="#">{{_i}}Left{{/i}}</a>
<aclass="btn"href="#">{{_i}}Left{{/i}}</a>
<aclass="btn"href="#">{{_i}}Middle{{/i}}</a>
<aclass="btn"href="#">{{_i}}Middle{{/i}}</a>
<aclass="btn"href="#">{{_i}}Right{{/i}}</a>
<aclass="btn"href="#">{{_i}}Right{{/i}}</a>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<divclass="btn-toolbar">
<divclass="btn-toolbar">
<divclass="btn-group">
<divclass="btn-group">
<aclass="btn"href="#">1</a>
<aclass="btn"href="#">1</a>
...
@@ -66,18 +87,6 @@
...
@@ -66,18 +87,6 @@
<aclass="btn"href="#">8</a>
<aclass="btn"href="#">8</a>
</div>
</div>
</div>
</div>
</div>
<divclass="span4">
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<p>{{_i}}And with a toolbar for multiple groups:{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
</div>
</div>
<divclass="span8">
<divclass="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
<h3>{{_i}}Example markup{{/i}}</h3>
...
@@ -278,9 +289,10 @@
...
@@ -278,9 +289,10 @@
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Powerful base class{{/i}}</h3>
<h3>{{_i}}Powerful base class{{/i}}</h3>
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<h3>{{_i}}Why tabs and pills{{/i}}</h3>
<h3>{{_i}}When to use{{/i}}</h3>
<p>{{_i}}Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.{{/i}}</p>
<p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
<p>{{_i}}Both options are great for sub-sections of content or navigating between pages of related content.{{/i}}</p>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<li><ahref="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
...
@@ -725,12 +739,14 @@
...
@@ -725,12 +739,14 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
<p>{{_i}}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><body></code>.{{/i}}</p>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-fixed-top">
...
...
</div>
</div>
</pre>
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
...
@@ -752,17 +768,17 @@
...
@@ -752,17 +768,17 @@
<div class="navbar-inner">
<div class="navbar-inner">
<div class="container">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} -->
<p>{{_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}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdown">our javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav">
<ul class="nav">
<li class="dropdown">
<li class="dropdown">
...
@@ -805,7 +831,7 @@
...
@@ -805,7 +831,7 @@
</li>
</li>
</ul>
</ul>
</pre>
</pre>
<p><aclass="btn"href="./javascript.html#dropdown">{{_i}}Get the javascript →{{/i}}</a></p>
<p><aclass="btn"href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/i}}</a></p>
</div><!-- /.span -->
</div><!-- /.span -->
</div><!-- /.row -->
</div><!-- /.row -->
...
@@ -945,7 +971,7 @@
...
@@ -945,7 +971,7 @@
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>{{_i}}About pager{{/i}}</h3>
<h3>{{_i}}About pager{{/i}}</h3>
<p>{{_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}}</p>
<p>{{_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}}</p>
<h1>{{_i}}Typographic components{{/i}}<small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<divclass="row">
<divclass="span4">
<p>{{_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}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<preclass="prettyprint linenums">
<div class="hero-unit">
<h1>{{_i}}Heading{{/i}}</h1>
<p>{{_i}}Tagline{{/i}}</p>
<p>
<a class="btn btn-primary btn-large">
{{_i}}Learn more{{/i}}
</a>
</p>
</div>
</pre>
</div>
<divclass="span8">
<divclass="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.{{/i}}</p>
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.{{/i}}</p>
<h3>{{_i}}Single alert message{{/i}}</h3>
<h3>{{_i}}Single alert message{{/i}}</h3>
<p>{{_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 <code>.alert-block</code>.{{/i}}</p>
<p>{{_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 <code>.alert-block</code>.{{/i}}</p>
<hr>
<hr>
...
@@ -1218,24 +1293,24 @@
...
@@ -1218,24 +1293,24 @@
<h3>{{_i}}Example alerts{{/i}}</h3>
<h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<divclass="alert">
<divclass="alert">
<aclass="close">×</a>
<aclass="close"data-dismiss="alert">×</a>
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
</div>
</pre>
</pre>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<p>{{_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.</p>
<p>{{_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.</p>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<p>{{_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}}</p>
<p>{{_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}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
@@ -554,11 +554,11 @@ $('#myModal').on('hidden', function () {
...
@@ -554,11 +554,11 @@ $('#myModal').on('hidden', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
<p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
@@ -624,14 +624,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -624,14 +624,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<divclass="row">
<divclass="row">
<divclass="span3 columns">
<divclass="span3 columns">
<h3>{{_i}}About Tooltips{{/i}}</h3>
<h3>{{_i}}About Tooltips{{/i}}</h3>
<p>{{_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}}</p>
<p>{{_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}}</p>
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<divclass="tooltip-demo well">
<divclass="tooltip-demo well">
<pclass="muted"style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <ahref="#"rel='tooltip'title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <ahref="#"rel='tooltip'title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <ahref="#"rel='tooltip'title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <ahref="#"rel='tooltip'title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
<pclass="muted"style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <ahref="#"rel="tooltip"title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <ahref="#"rel="tooltip"title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <ahref="#"rel="tooltip"title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <ahref="#"rel="tooltip"title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
</p>
</p>
</div>
</div>
<hr>
<hr>
...
@@ -657,7 +657,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -657,7 +657,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
</tr>
<tr>
<tr>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>{{_i}}string|function{{/i}}</td>
<td>'top'</td>
<td>'top'</td>
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
</tr>
</tr>
...
@@ -697,6 +697,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -697,6 +697,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
</div>
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<preclass="prettyprint linenums">
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
...
@@ -725,7 +728,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -725,7 +728,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<divclass="span3 columns">
<divclass="span3 columns">
<h3>{{_i}}About popovers{{/i}}</h3>
<h3>{{_i}}About popovers{{/i}}</h3>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
<pclass="muted"><strong>*</strong>{{_i}}Requires <ahref="#tooltip">Tooltip</a> to be included{{/i}}</p>
<pclass="muted"><strong>*</strong>{{_i}}Requires <ahref="#tooltips">Tooltip</a> to be included{{/i}}</p>
@@ -757,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -757,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
</tr>
<tr>
<tr>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>{{_i}}string|function{{/i}}</td>
<td>'right'</td>
<td>'right'</td>
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
</tr>
</tr>
...
@@ -847,11 +850,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -847,11 +850,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<h4class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_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}}</p>
<p>{{_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}}</p>
<p>
<p>
<aclass="btn btn-danger small"href="#">{{_i}}Take this action{{/i}}</a><aclass="btn small"href="#">{{_i}}Or do this{{/i}}</a>
<aclass="btn btn-danger"href="#">{{_i}}Take this action{{/i}}</a><aclass="btn"href="#">{{_i}}Or do this{{/i}}</a>
</p>
</p>
</div>
</div>
<hr>
<hr>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
@@ -1075,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
...
@@ -1075,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
<td>{{_i}}parent{{/i}}</td>
<td>{{_i}}parent{{/i}}</td>
<td>{{_i}}selector{{/i}}</td>
<td>{{_i}}selector{{/i}}</td>
<td>false</td>
<td>false</td>
<td>{{_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}}</td>
<td>{{_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}}</td>
</tr>
</tr>
<tr>
<tr>
<td>{{_i}}toggle{{/i}}</td>
<td>{{_i}}toggle{{/i}}</td>
...
@@ -1225,12 +1228,14 @@ $('#myCollapsible').on('hidden', function () {
...
@@ -1225,12 +1228,14 @@ $('#myCollapsible').on('hidden', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
<p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
<p>{{_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}}</p>
<p>{{_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}}</p>
<td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td>
<td>{{_i}}Scale an element to <em>n</em> times its original size{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td><code>.translate()</code></td>
<td><code>.translate()</code></td>
...
@@ -538,7 +538,7 @@
...
@@ -538,7 +538,7 @@
<tr>
<tr>
<td><code>.background-clip()</code></td>
<td><code>.background-clip()</code></td>
<td><code>@clip</code></td>
<td><code>@clip</code></td>
<td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td>
<td>{{_i}}Crop the background of an element (useful for <code>border-radius</code>){{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td><code>.background-size()</code></td>
<td><code>.background-size()</code></td>
...
@@ -567,7 +567,7 @@
...
@@ -567,7 +567,7 @@
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<h3>Backgrounds and gradients</h3>
<h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
...
@@ -641,8 +641,8 @@
...
@@ -641,8 +641,8 @@
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Node with makefile{{/i}}</h3>
<h3>{{_i}}Node with makefile{{/i}}</h3>
<p>{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}</p>
<p>{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install less</pre>
<pre>$ npm install -g less</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Additionally, if you have <ahref="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
<p>{{_i}}Additionally, if you have <ahref="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div>
</div>
<h2>Default 940px grid</h2>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
...
@@ -72,7 +73,7 @@
...
@@ -72,7 +73,7 @@
<br>
<br>
<h2>Offsetting columns</h2>
<h2>{{_i}}Offsetting columns{{/i}}</h2>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4 offset4">4 offset 4</div>
<divclass="span4 offset4">4 offset 4</div>
...
@@ -97,7 +98,8 @@
...
@@ -97,7 +98,8 @@
<divclass="row">
<divclass="row">
<divclass="span6">
<divclass="span6">
<p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
<p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
<h4>{{_i}}Example{{/i}}</h4>
<h3>{{_i}}Example{{/i}}</h3>
<p>{{_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 <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
<h2>{{_i}}Fluid columns{{/i}}</h2>
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_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}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<divclass="row">
<divclass="span6">
<p>{{_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}}</p>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <ahref="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <ahref="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Staying responsive{{/i}}</h3>
<h3>{{_i}}Staying responsive{{/i}}</h3>
...
@@ -189,8 +295,8 @@
...
@@ -189,8 +295,8 @@
<divclass="span6">
<divclass="span6">
<h2>{{_i}}Fixed layout{{/i}}</h2>
<h2>{{_i}}Fixed layout{{/i}}</h2>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<divclass="minicon-layout">
<divclass="mini-layout">
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -203,9 +309,9 @@
...
@@ -203,9 +309,9 @@
<divclass="span6">
<divclass="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<divclass="minicon-layout fluid">
<divclass="mini-layout fluid">
<divclass="minicon-layout-sidebar"></div>
<divclass="mini-layout-sidebar"></div>
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="container-fluid">
<div class="container-fluid">
...
@@ -239,7 +345,7 @@
...
@@ -239,7 +345,7 @@
</div>
</div>
<divclass="span8">
<divclass="span8">
<h2>{{_i}}Supported devices{{/i}}</h2>
<h2>{{_i}}Supported devices{{/i}}</h2>
<p>{{_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}}</p>
<p>{{_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}}</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
...
@@ -262,8 +368,8 @@
...
@@ -262,8 +368,8 @@
</tr>
</tr>
<tr>
<tr>
<td>{{_i}}Landscape tablets{{/i}}</td>
<td>{{_i}}Landscape tablets{{/i}}</td>
<td>768px to 980px</td>
<td>768px to 979px</td>
<td>44px</td>
<td>42px</td>
<td>20px</td>
<td>20px</td>
</tr>
</tr>
<tr>
<tr>
...
@@ -281,6 +387,10 @@
...
@@ -281,6 +387,10 @@
</tbody>
</tbody>
</table>
</table>
<h3>{{_i}}Requires meta tag{{/i}}</h3>
<p>{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}</p>
<p>{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
<p>{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
<ul>
<ul>
...
@@ -301,7 +411,7 @@
...
@@ -301,7 +411,7 @@
<ol>
<ol>
<li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
<li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
<li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
<li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate file{{/i}}</li>
</ol>
</ol>
<p>{{_i}}<strong>Why not just include it?</strong> 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}}</p>
<p>{{_i}}<strong>Why not just include it?</strong> 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}}</p>
<li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
<li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
<li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
<li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
<li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
<li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
<li>{{_i}}The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.{{/i}}</li>
</ul>
</ul>
<h3>{{_i}}Forms{{/i}}</h3>
<h3>{{_i}}Forms{{/i}}</h3>
<ul>
<ul>
<li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
<li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
<li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
<li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
<li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
<li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
<li>{{_i}}For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.{{/i}}</li>
<li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
<li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
<li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
<li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
</ul>
</ul>
...
@@ -109,7 +111,7 @@
...
@@ -109,7 +111,7 @@
</ul>
</ul>
<h3>{{_i}}Navigation{{/i}}</h3>
<h3>{{_i}}Navigation{{/i}}</h3>
<ul>
<ul>
<li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code>{{/i}}</li>
<li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.{{/i}}</li>
<li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
<li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
<li>{{_i}}Vertical tabs and pills have been added—just add <code>.nav-stacked</code> to the <code><ul></code>{{/i}}</li>
<li>{{_i}}Vertical tabs and pills have been added—just add <code>.nav-stacked</code> to the <code><ul></code>{{/i}}</li>
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
...
@@ -128,6 +130,7 @@
...
@@ -128,6 +130,7 @@
<ul>
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
<li>{{_i}}Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow{{/i}}</li>
<li>{{_i}}Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow{{/i}}</li>
<li>{{_i}}Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior{{/i}}</li>
<li>{{_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}}</li>
<li>{{_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}}</li>
</ul>
</ul>
<h3>{{_i}}Labels{{/i}}</h3>
<h3>{{_i}}Labels{{/i}}</h3>
...
@@ -144,7 +147,7 @@
...
@@ -144,7 +147,7 @@
<ul>
<ul>
<li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
<li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
<li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
<li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
<li>{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}</li>
<li>{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}</li>
<li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
<li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
</ul>
</ul>
<h3>{{_i}}Progress bars{{/i}}</h3>
<h3>{{_i}}Progress bars{{/i}}</h3>
...
@@ -167,7 +170,7 @@
...
@@ -167,7 +170,7 @@
<h1>{{_i}}Javascript plugins{{/i}}</h1>
<h1>{{_i}}Javascript plugins{{/i}}</h1>
</div>
</div>
<divclass="alert alert-info">
<divclass="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}}We're rewritten just about everything for our plugins, so head on over to <ahref="./javascript.html">the Javascript page</a> to learn more.{{/i}}
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}}We've rewritten just about everything for our plugins, so head on over to <ahref="./javascript.html">the Javascript page</a> to learn more.{{/i}}
</div>
</div>
<h3>{{_i}}Tooltips{{/i}}</h3>
<h3>{{_i}}Tooltips{{/i}}</h3>
<ul>
<ul>
...
@@ -179,6 +182,7 @@
...
@@ -179,6 +182,7 @@
<h3>{{_i}}Popovers{{/i}}</h3>
<h3>{{_i}}Popovers{{/i}}</h3>
<ul>
<ul>
<li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
<li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
<li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
<li>IE9: removed gradients and added rounded corners</li>
<li>IE9: removed gradients and added rounded corners</li>
<li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li>
<li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li>
<li>New mixin, <code>.buttonBackground</code>, to set button gradients</li>
<li>New mixin, <code>.buttonBackground</code>, to set button gradients</li>
<li>The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.</li>
</ul>
</ul>
<h3>Forms</h3>
<h3>Forms</h3>
<ul>
<ul>
<li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li>
<li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li>
<li>Form classes standardized with <code>.form-</code> required as a prefix</li>
<li>Form classes standardized with <code>.form-</code> required as a prefix</li>
<li>New built-in form defaults for search, inline, and horizontal forms</li>
<li>New built-in form defaults for search, inline, and horizontal forms</li>
<li>For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.</li>
<li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li>
<li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li>
<li>Form states: colors updated and customizable via new LESS variables</li>
<li>Form states: colors updated and customizable via new LESS variables</li>
</ul>
</ul>
...
@@ -185,7 +187,7 @@
...
@@ -185,7 +187,7 @@
</ul>
</ul>
<h3>Navigation</h3>
<h3>Navigation</h3>
<ul>
<ul>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code></li>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.</li>
<li>New nav list variation added that uses the same base class, <code>.nav</code></li>
<li>New nav list variation added that uses the same base class, <code>.nav</code></li>
<li>Vertical tabs and pills have been added—just add <code>.nav-stacked</code> to the <code><ul></code></li>
<li>Vertical tabs and pills have been added—just add <code>.nav-stacked</code> to the <code><ul></code></li>
<li>Pills were restyled to be less rounded by default</li>
<li>Pills were restyled to be less rounded by default</li>
...
@@ -204,6 +206,7 @@
...
@@ -204,6 +206,7 @@
<ul>
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
<li>Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior</li>
<li>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.</li>
<li>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.</li>
</ul>
</ul>
<h3>Labels</h3>
<h3>Labels</h3>
...
@@ -220,7 +223,7 @@
...
@@ -220,7 +223,7 @@
<ul>
<ul>
<li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li>
<li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li>
<li>Class names standardized for other options, now all starting with <code>.alert-</code></li>
<li>Class names standardized for other options, now all starting with <code>.alert-</code></li>
<li>Redesigned base alert styles to combine the deafult alerts and block-level alerts into one</li>
<li>Redesigned base alert styles to combine the default alerts and block-level alerts into one</li>
<li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li>
<li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li>
</ul>
</ul>
<h3>Progress bars</h3>
<h3>Progress bars</h3>
...
@@ -243,11 +246,19 @@
...
@@ -243,11 +246,19 @@
<h1>Javascript plugins</h1>
<h1>Javascript plugins</h1>
</div>
</div>
<divclass="alert alert-info">
<divclass="alert alert-info">
<strong>Heads up!</strong> We're rewritten just about everything for our plugins, so head on over to <ahref="./javascript.html">the Javascript page</a> to learn more.
<strong>Heads up!</strong> We've rewritten just about everything for our plugins, so head on over to <ahref="./javascript.html">the Javascript page</a> to learn more.
</div>
</div>
<h3>Tooltips</h3>
<ul>
<li>The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
<li>The <code>animate</code> option was renamed to <code>animation</code>.</li>
<li>The <code>html</code> option was removed, as the tooltips default to allowing HTML now.</li>
</ul>
<h3>Popovers</h3>
<h3>Popovers</h3>
<ul>
<ul>
<li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li>
<li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
...
@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
Options should be sparse and add universal value. We should pick the right defaults.
Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
$.fn.modal.defaults = { … }
...
@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
...
@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
### CONSTRUCTORS
### CONSTRUCTORS
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
