</div>
<h2>Example</h2>
- <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.</p>
+ <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<h4>Checkbox and radio flavors</h4>
- <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 <a href="./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 <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4>
<p><span class="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>
</div><!-- /btn-toolbar -->
</div>
- <h3>Requires javascript</h3>
+ <h3>Requires JavaScript</h3>
<p>Button dropdowns require the <a href="./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>
<hr class="bs-docs-separator">
</pre>
<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>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li><a href="#">Clickable link</a></li>
<h2>Dropdowns</h2>
- <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
+ <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-docs-example">
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<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 <a href="./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 <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
<h3>Tabbable in any direction</h3>
<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>
- <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
+ <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<pre class="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
</li>
</ul>
</pre>
- <p>Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
+ <p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
<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>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>
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
- <h3>Dismiss alerts via javascript</h3>
+ <h3>Dismiss alerts via JavaScript</h3>
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Customize and download</h1>
- <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
+ <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
</div>
</header>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
- <h3>Javascript</h3>
+ <h3>JavaScript</h3>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
<pre class="prettyprint">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<h3>Setup file structure</h3>
<p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
-<pre class="prettyprint">
- app/
- ├── layouts/
- └── templates/
- public/
- ├── css/
- │ ├── bootstrap.min.css
- ├── js/
- │ ├── bootstrap.min.js
- └── img/
- ├── glyphicons-halflings.png
- └── glyphicons-halflings-white.png
+<pre>
+ <span class="icon-folder-open"></span> app/
+ <span class="icon-folder-open"></span> layouts/
+ <span class="icon-folder-open"></span> templates/
+ <span class="icon-folder-open"></span> public/
+ <span class="icon-folder-open"></span> css/
+ <span class="icon-file"></span> bootstrap.min.css
+ <span class="icon-folder-open"></span> js/
+ <span class="icon-file"></span> bootstrap.min.js
+ <span class="icon-folder-open"></span> img/
+ <span class="icon-file"></span> glyphicons-halflings.png
+ <span class="icon-file"></span> glyphicons-halflings-white.png
</pre>
<h3>Utilize starter template</h3>
</div>
<p class="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>
-<pre class="prettyprint">
- bootstrap/
- ├── css/
- │ ├── bootstrap.css
- │ ├── bootstrap.min.css
- ├── js/
- │ ├── bootstrap.js
- │ ├── bootstrap.min.js
- ├── img/
- │ ├── glyphicons-halflings.png
- │ ├── glyphicons-halflings-white.png
- └── README.md
+<pre>
+ <span class="icon-folder-open"></span> bootstrap/
+ <span class="icon-folder-open"></span> css/
+ <span class="icon-file"></span> bootstrap.css
+ <span class="icon-file"></span> bootstrap.min.css
+ <span class="icon-folder-open"></span> js/
+ <span class="icon-file"></span> bootstrap.js
+ <span class="icon-file"></span> bootstrap.min.js
+ <span class="icon-folder-open"></span> img/
+ <span class="icon-file"></span> glyphicons-halflings.png
+ <span class="icon-file"></span> glyphicons-halflings-white.png
+ <span class="icon-file"></span> README.md
</pre>
<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 <a href="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>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
<h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
<p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.</p>
- <h4><a href="http://twitter.github.com/bootstrap/javascript.html">Javascript plugins</a></h4>
- <p>Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
+ <h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
+ <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
<h2>List of components</h2>
- <p>Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:</p>
+ <p>Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:</p>
<ul>
<li>Button groups</li>
<li>Button dropdowns</li>
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
</a>
<h4>Starter template</h4>
- <p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
+ <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
</li>
</ul>
</section>
<div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
- <p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">
javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
+ <p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">
JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
</div>
</div>
</div>
<h2>{{_i}}Example{{/i}}</h2>
- <p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p>
+ <p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.{{/i}}</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
- <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 <a href="./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 <a href="./javascript.html#buttons">the JavaScript docs</a> for that.{{/i}}</p>
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<p><span class="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>
</div><!-- /btn-toolbar -->
</div>{{! /example }}
- <h3>{{_i}}Requires javascript{{/i}}</h3>
+ <h3>{{_i}}Requires JavaScript{{/i}}</h3>
<p>{{_i}}Button dropdowns require the <a href="./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>
<hr class="bs-docs-separator">
</pre>
<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>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
<h2>{{_i}}Dropdowns{{/i}}</h2>
- <p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
+ <p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<div class="bs-docs-example">
<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>
- <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./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 <a href="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<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>
- <p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./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 <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
<pre class="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
</li>
</ul>
</pre>
- <p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
+ <p>{{_i}}Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
<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}}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>
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
- <h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3>
+ <h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3>
<p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>{{_i}}Customize and download{{/i}}</h1>
- <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
+ <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
</div>
</header>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<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}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
<pre class="prettyprint">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<h3>{{_i}}Setup file structure{{/i}}</h3>
<p>{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}</p>
-<pre class="prettyprint">
- app/
- ├── layouts/
- └── templates/
- public/
- ├── css/
- │ ├── bootstrap.min.css
- ├── js/
- │ ├── bootstrap.min.js
- └── img/
- ├── glyphicons-halflings.png
- └── glyphicons-halflings-white.png
+<pre>
+ <span class="icon-folder-open"></span> app/
+ <span class="icon-folder-open"></span> layouts/
+ <span class="icon-folder-open"></span> templates/
+ <span class="icon-folder-open"></span> public/
+ <span class="icon-folder-open"></span> css/
+ <span class="icon-file"></span> bootstrap.min.css
+ <span class="icon-folder-open"></span> js/
+ <span class="icon-file"></span> bootstrap.min.js
+ <span class="icon-folder-open"></span> img/
+ <span class="icon-file"></span> glyphicons-halflings.png
+ <span class="icon-file"></span> glyphicons-halflings-white.png
</pre>
<h3>{{_i}}Utilize starter template{{/i}}</h3>
</div>
<p class="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>
-<pre class="prettyprint">
- bootstrap/
- ├── css/
- │ ├── bootstrap.css
- │ ├── bootstrap.min.css
- ├── js/
- │ ├── bootstrap.js
- │ ├── bootstrap.min.js
- ├── img/
- │ ├── glyphicons-halflings.png
- │ ├── glyphicons-halflings-white.png
- └── README.md
+<pre>
+ <span class="icon-folder-open"></span> bootstrap/
+ <span class="icon-folder-open"></span> css/
+ <span class="icon-file"></span> bootstrap.css
+ <span class="icon-file"></span> bootstrap.min.css
+ <span class="icon-folder-open"></span> js/
+ <span class="icon-file"></span> bootstrap.js
+ <span class="icon-file"></span> bootstrap.min.js
+ <span class="icon-folder-open"></span> img/
+ <span class="icon-file"></span> glyphicons-halflings.png
+ <span class="icon-file"></span> glyphicons-halflings-white.png
+ <span class="icon-file"></span> README.md
</pre>
<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 <a href="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}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
<h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4>
<p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p>
- <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}Javascript plugins{{/i}}</a></h4>
- <p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
+ <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4>
+ <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>
- <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>
<ul>
<li>{{_i}}Button groups{{/i}}</li>
<li>{{_i}}Button dropdowns{{/i}}</li>
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
</a>
<h4>{{_i}}Starter template{{/i}}</h4>
- <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
+ <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
</li>
</ul>
</section>
<div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png">
<h2>{{_i}}Packed with features.{{/i}}</h2>
- <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">
javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
+ <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">
JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
</div>
</div>
projects / thirdparty / bootstrap.git / commitdiff
