<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="./javascript.html#dropdowns">dropdown javascript plugin</a>.</p>
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4>
<h4>Dropdowns in button groups</h4>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
...
@@ -436,9 +436,9 @@
...
@@ -436,9 +436,9 @@
</div><!-- /btn-toolbar -->
</div><!-- /btn-toolbar -->
</div>
</div>
<h3>Requires javascript</h3>
<h3>Requires JavaScript</h3>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.</p>
<hrclass="bs-docs-separator">
<hrclass="bs-docs-separator">
...
@@ -687,7 +687,7 @@
...
@@ -687,7 +687,7 @@
</pre>
</pre>
<h3>Disabled state</h3>
<h3>Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.</p>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<ulclass="nav nav-pills">
<ulclass="nav nav-pills">
<li><ahref="#">Clickable link</a></li>
<li><ahref="#">Clickable link</a></li>
...
@@ -746,7 +746,7 @@
...
@@ -746,7 +746,7 @@
<h2>Dropdowns</h2>
<h2>Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<p>Add dropdown menus with a little extra HTML and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<h3>Tabs with dropdowns</h3>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
...
@@ -911,7 +911,7 @@
...
@@ -911,7 +911,7 @@
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<h4>Requires jQuery plugin</h4>
<h4>Requires jQuery plugin</h4>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.</p>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
<h3>Tabbable in any direction</h3>
<h3>Tabbable in any direction</h3>
...
@@ -1157,7 +1157,7 @@
...
@@ -1157,7 +1157,7 @@
<p>Align nav links, 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>
<p>Align nav links, 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>Using dropdowns</h3>
<h3>Using dropdowns</h3>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav">
<ul class="nav">
<li class="dropdown">
<li class="dropdown">
...
@@ -1171,7 +1171,7 @@
...
@@ -1171,7 +1171,7 @@
</li>
</li>
</ul>
</ul>
</pre>
</pre>
<p>Visit the <ahref="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
<p>Visit the <ahref="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
<h3>Text</h3>
<h3>Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
...
@@ -1973,7 +1973,7 @@
...
@@ -1973,7 +1973,7 @@
<p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<pclass="lead"><ahref="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
<pclass="lead"><ahref="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
<pclass="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
<pclass="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>Please note that all JavaScript plugins require jQuery to be included.</p>
<p>Please note that all JavaScript plugins require jQuery to be included.</p>
...
@@ -164,11 +164,11 @@
...
@@ -164,11 +164,11 @@
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
<p>A 12-column responsive <ahref="./scaffolding.html#grid">grid</a>, dozens of components, <ahref="./javascript.html">javascript plugins</a>, typography, form controls, and even a <ahref="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
<p>A 12-column responsive <ahref="./scaffolding.html#grid">grid</a>, dozens of components, <ahref="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <ahref="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.{{/i}}</p>
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the JavaScript docs</a> for that.{{/i}}</p>
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
...
@@ -365,9 +365,9 @@
...
@@ -365,9 +365,9 @@
</div><!-- /btn-toolbar -->
</div><!-- /btn-toolbar -->
</div>{{! /example }}
</div>{{! /example }}
<h3>{{_i}}Requires javascript{{/i}}</h3>
<h3>{{_i}}Requires JavaScript{{/i}}</h3>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}</p>
<hrclass="bs-docs-separator">
<hrclass="bs-docs-separator">
...
@@ -616,7 +616,7 @@
...
@@ -616,7 +616,7 @@
</pre>
</pre>
<h3>{{_i}}Disabled state{{/i}}</h3>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p>
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.{{/i}}</p>
<p>{{_i}}Add dropdown menus with a little extra HTML and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Add dropdown menus with a little extra HTML and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
...
@@ -840,7 +840,7 @@
...
@@ -840,7 +840,7 @@
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
...
@@ -1086,7 +1086,7 @@
...
@@ -1086,7 +1086,7 @@
<p>{{_i}}Align nav links, 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>
<p>{{_i}}Align nav links, 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}}Using dropdowns{{/i}}</h3>
<h3>{{_i}}Using dropdowns{{/i}}</h3>
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav">
<ul class="nav">
<li class="dropdown">
<li class="dropdown">
...
@@ -1100,7 +1100,7 @@
...
@@ -1100,7 +1100,7 @@
</li>
</li>
</ul>
</ul>
</pre>
</pre>
<p>{{_i}}Visit the <ahref="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
<p>{{_i}}Visit the <ahref="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
<h3>{{_i}}Text{{/i}}</h3>
<h3>{{_i}}Text{{/i}}</h3>
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
...
@@ -1902,7 +1902,7 @@
...
@@ -1902,7 +1902,7 @@
<p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<pclass="lead">{{_i}}<ahref="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
<pclass="lead">{{_i}}<ahref="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
<h3>{{_i}}Javascript{{/i}}</h3>
<h3>{{_i}}JavaScript{{/i}}</h3>
<p>{{_i}}<ahref="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
<p>{{_i}}<ahref="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
<pclass="lead">{{_i}}Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.{{/i}}</p>
<pclass="lead">{{_i}}Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.{{/i}}</p>
<p>{{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}</p>
<p>{{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}</p>
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
<p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p>
<p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p>
...
@@ -93,11 +93,11 @@
...
@@ -93,11 +93,11 @@
<p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
<p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
<p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
<p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
<h2>{{_i}}List of components{{/i}}</h2>
<h2>{{_i}}List of components{{/i}}</h2>
<p>{{_i}}Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:{{/i}}</p>
<p>{{_i}}Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:{{/i}}</p>
<p>{{_i}}A 12-column responsive <ahref="./scaffolding.html#grid">grid</a>, dozens of components, <ahref="./javascript.html">javascript plugins</a>, typography, form controls, and even a <ahref="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
<p>{{_i}}A 12-column responsive <ahref="./scaffolding.html#grid">grid</a>, dozens of components, <ahref="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <ahref="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
