<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <ahref="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <ahref="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
...
...
@@ -61,16 +59,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<spanclass="glyphicon glyphicon-star"></span> Star
<pclass="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3id="dropdowns-example">Example</h3>
...
...
@@ -173,16 +170,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<pclass="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <ahref="../javascript/#buttons">our buttons plugin</a>.</p>
<divclass="bs-callout bs-callout-info">
...
...
@@ -409,17 +405,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<pclass="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
<divclass="bs-callout bs-callout-danger">
...
...
@@ -1057,17 +1048,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<pclass="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
...
...
@@ -1246,17 +1234,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
...
...
@@ -1679,17 +1664,15 @@ body { padding-bottom: 70px; }
<pclass="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <ahref="#pagination-pager">pager alternative</a>.</p>
<p>A simple shell for an <code>h1</code> to appropriately 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 as most other components (with additional styles).</p>
<divclass="bs-example">
<divclass="page-header">
...
...
@@ -2038,16 +2012,15 @@ body { padding-bottom: 70px; }
<h1>Example page header <small>Subtext for header</small></h1>
<pclass="lead">Extend Bootstrap's <ahref="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<h3id="thumbnails-default">Default example</h3>
...
...
@@ -2137,17 +2110,15 @@ body { padding-bottom: 70px; }
<pclass="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <ahref="../javascript/#alerts">alerts jQuery plugin</a>.</p>
<h2id="alerts-examples">Examples</h2>
...
...
@@ -2229,17 +2200,15 @@ body { padding-bottom: 70px; }
<pclass="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
<h3id="media-default">Default media</h3>
...
...
@@ -2524,16 +2491,15 @@ body { padding-bottom: 70px; }
<pclass="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3id="list-group-basic">Basic example</h3>
...
...
@@ -2672,17 +2638,15 @@ body { padding-bottom: 70px; }
<pclass="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3id="overview-doctype">HTML5 doctype</h3>
...
...
@@ -60,16 +59,15 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<pclass="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <ahref="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <ahref="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3id="grid-intro">Introduction</h3>
...
...
@@ -329,7 +327,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <ahref="#responsive-utilities">responsive utility classes</a>.</p>
<divclass="bs-docs-grid">
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
...
...
@@ -344,7 +342,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
@@ -1025,15 +1019,14 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h4>Auto-truncating</h4>
<p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
...
...
@@ -1520,17 +1511,14 @@ For example, <code><section></code> should be wrapped as inline.
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
...
...
@@ -1877,7 +1865,6 @@ For example, <code><section></code> should be wrapped as inline.
</form>
{% endhighlight %}
<h2id="forms-control-focus">Input focus</h2>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<divclass="bs-example">
...
...
@@ -1885,10 +1872,10 @@ For example, <code><section></code> should be wrapped as inline.
<p>Use any of the available button classes to quickly create a styled button.</p>
...
...
@@ -2341,17 +2324,14 @@ For example, <code><section></code> should be wrapped as inline.
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
...
...
@@ -2495,7 +2473,6 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
<h3id="helper-classes-clearfix">Clearfix</h3>
<p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %}
...
...
@@ -2577,16 +2554,15 @@ For example, <code><section></code> should be wrapped as inline.
<pclass="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
...
...
@@ -2809,17 +2785,15 @@ For example, <code><section></code> should be wrapped as inline.
<spanclass="visible-sm visible-md">✔ Hidden on small and medium</span>
<pclass="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
<p>Grid variables and mixins are covered <ahref="#grid-less">within the Grid system section</a>.</p>
<pclass="lead">While Bootstrap is built on Less, it also has an <ahref="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
<pclass="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<divclass="row bs-downloads">
...
...
@@ -48,15 +47,15 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<h3id="download-bower">Install with Bower</h3>
<p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <ahref="http://bower.io">Bower</a>.</p>
<pclass="lead">Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<p>The <code>less/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
<pclass="lead">Start with this basic HTML template, or modify <ahref="#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
<p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
<pclass="lead">Build on the basic template above with Bootstrap's many components. See also <ahref="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
<h3id="examples-framework">Using the framework</h3>
...
...
@@ -304,16 +303,15 @@ bootstrap/
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
<h1id="migration"class="page-header">Migrating from 2.x to 3.0</h1>
<pclass="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <ahref="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
<h2id="migration-classes">Major class changes</h2>
...
...
@@ -749,15 +746,14 @@ bootstrap/
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
</ul>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <ahref="http://bootply.com/">Bootply</a>.</p>
<h1id="support"class="page-header">Browser and device support</h1>
<pclass="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
<h3id="support-browsers">Supported browsers</h3>
...
...
@@ -896,16 +892,14 @@ if (isAndroid) {
</script>
{% endhighlight %}
<p>Want to see an example? <ahref="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
<h1id="third-parties"class="page-header">Third party support</h1>
<pclass="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
<pclass="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessible to those using <abbrtitle="Assistive Technology"class="initialism">AT</abbr>.</p>
<pclass="lead">Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h4>It requires you to:</h4>
...
...
@@ -1026,13 +1018,11 @@ if (isAndroid) {
</ul>
<p>The full Bootstrap license is located <ahref="{{ site.repo }}/blob/master/LICENSE">in the project repository</a> for more information.</p>
<pclass="lead">Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.</p>
<p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
...
...
@@ -1103,5 +1093,4 @@ if (isAndroid) {
<h3>Removing potential bloat</h3>
<p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our <ahref="../customize/">Customizer</a>.</p>
<p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
