<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>
<p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<divclass="alert alert-info">
<strong>Heads up!</strong>
The <code>.icon-</code> class must be listed first in the class tag for proper CSS targeting.
<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 +162,6 @@
...
@@ -142,18 +162,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>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, use 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>
</label>
</label>
</div>
</div>
<divclass="span3">
<divclass="span3">
...
@@ -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>
<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>
</div>
</div>
</div>
</div>
</section>
</section>
...
@@ -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>
<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>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span6">
<divclass="span6">
Level 1 of column
Level 1 of column
...
@@ -187,6 +188,21 @@
...
@@ -187,6 +188,21 @@
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Fluid example</h3>
<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>
<divclass="row-fluid show-grid">
<divclass="span12">
Fluid 12
<divclass="row-fluid show-grid">
<divclass="span6">
Fluid 6
</div>
<divclass="span6">
Fluid 6
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="span6">
<divclass="span6">
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
...
@@ -315,7 +331,7 @@
...
@@ -315,7 +331,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>
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any angle brackets into 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>
<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>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<divclass="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}The <code>.icon-</code> class must be listed first in the class tag for proper CSS targeting.{{/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 +86,6 @@
...
@@ -66,18 +86,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>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, use 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>
</label>
</label>
</div>
</div>
<divclass="span3">
<divclass="span3">
...
@@ -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}}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>
</div>
</div>
</div>
</div>
</section>
</section>
...
@@ -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>
<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>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span6">
<divclass="span6">
{{_i}}Level 1 of column{{/i}}
{{_i}}Level 1 of column{{/i}}
...
@@ -111,6 +112,21 @@
...
@@ -111,6 +112,21 @@
</div>
</div>
</div>
</div>
</div>
</div>
<h3>{{_i}}Fluid example{{/i}}</h3>
<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>
<divclass="row-fluid show-grid">
<divclass="span12">
{{_i}}Fluid 12{{/i}}
<divclass="row-fluid show-grid">
<divclass="span6">
{{_i}}Fluid 6{{/i}}
</div>
<divclass="span6">
{{_i}}Fluid 6{{/i}}
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="span6">
<divclass="span6">
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
...
@@ -239,7 +255,7 @@
...
@@ -239,7 +255,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>
<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>
<ul>
<li>{{_i}}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>.{{/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>{{_i}}The <code>animate</code> option was renamed to <code>animation</code>.{{/i}}</li>
<li>{{_i}}The <code>html</code> option was removed, as the tooltips default to allowing HTML now.{{/i}}</li>
</ul>
<h3>{{_i}}Tooltips{{/i}}</h3>
<ul>
<li>{{_i}}Values for <code>placement</code> option changed from <code>above</code> and <code>below</code> to <code>top</code> and <code>bottom</code>. (Affects popovers, too.){{/i}}</li>
</ul>
<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>
<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>Tooltips</h3>
<ul>
<li>Values for <code>placement</code> option changed from <code>above</code> and <code>below</code> to <code>top</code> and <code>bottom</code>. (Affects popovers, too.)</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>
