kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Formatting and docs changes

This commit is contained in:
Mark Otto 2014-01-12 00:04:24 -08:00
parent 36aa3afb4f
commit 4b1ff7fa49
5 changed files with 4582 additions and 4666 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/assets/css/docs.css
View File

@ -290,6 +290,7 @@ body {
/* Page headers */
.bs-header {
margin-bottom: 40px;
padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
font-size: 20px;
text-align: center;
@ -534,8 +535,6 @@ body {
.bs-sidenav {
margin-top: 20px;
margin-bottom: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/* All levels of nav */
@ -630,8 +629,8 @@ body {
margin-bottom: 60px;
}
/* Janky fix for preventing navbar from overlapping */
h1[id] {
margin-top: 0;
padding-top: 20px;
}

2
docs/assets/css/pack.min.css vendored
View File

File diff suppressed because one or more lines are too long

262
docs/components.html
View File

@ -6,12 +6,10 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
---
<!-- Glyphicons
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="glyphicons">Glyphicons</h1>
</div>
<!-- Glyphicons
================================================== -->
<div class="bs-docs-section">
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
<h2 id="glyphicons-glyphs">Available glyphs</h2>
<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="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 <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
@ -61,16 +59,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<span class="glyphicon glyphicon-star"></span> Star
</button>
{% endhighlight %}
</div>
</div>
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="dropdowns">Dropdowns</h1>
</div>
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section">
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3 id="dropdowns-example">Example</h3>
@ -173,16 +170,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>
</div>
<!-- Button Groups
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="btn-groups">Button groups</h1>
</div>
<!-- Button Groups
================================================== -->
<div class="bs-docs-section">
<h1 id="btn-groups" class="page-header">Button groups</h1>
<p class="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 <a href="../javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-info">
@ -409,17 +405,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
...
</div>
{% endhighlight %}
</div>
</div>
<!-- Split button dropdowns
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="btn-dropdowns">Button dropdowns</h1>
</div>
<!-- Split button dropdowns
================================================== -->
<div class="bs-docs-section">
<h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1>
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="bs-callout bs-callout-danger">
@ -737,18 +731,15 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
</ul>
</div>
{% endhighlight %}
</div>
</div>
<!-- Input groups
================================================== -->
<div class="bs-docs-section">
<h1 id="input-groups" class="page-header">Input groups</h1>
<!-- Input groups
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="input-groups">Input groups</h1>
</div>
<p class="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>
<div class="bs-callout bs-callout-danger">
@ -1057,17 +1048,14 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
</div>
</div>
{% endhighlight %}
</div>
<!-- Navs
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="nav">Navs</h1>
</div>
<!-- Navs
================================================== -->
<div class="bs-docs-section">
<h1 id="nav" class="page-header">Navs</h1>
<p class="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,
...
</ul>
{% endhighlight %}
</div>
</div>
<!-- Navbar
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<!-- Navbar
================================================== -->
<div class="bs-docs-section">
<h1 id="navbar" class="page-header">Navbar</h1>
<h2 id="navbar-default">Default navbar</h2>
<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; }
...
</nav>
{% endhighlight %}
</div>
</div>
<!-- Breadcrumbs
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="breadcrumbs">Breadcrumbs <small></small></h1>
</div>
<!-- Breadcrumbs
================================================== -->
<div class="bs-docs-section">
<h1 id="breadcrumbs" class="page-header">Breadcrumbs</h1>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
<div class="bs-example">
@ -1713,16 +1696,15 @@ body { padding-bottom: 70px; }
<li class="active">Data</li>
</ol>
{% endhighlight %}
</div>
</div>
<!-- Pagination
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="pagination">Pagination</h1>
</div>
<!-- Pagination
================================================== -->
<div class="bs-docs-section">
<h1 id="pagination" class="page-header">Pagination</h1>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
<h2 id="pagination-default">Default pagination</h2>
@ -1872,17 +1854,14 @@ body { padding-bottom: 70px; }
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
{% endhighlight %}
</div>
</div>
<!-- Labels
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="labels">Labels</h1>
</div>
<p class="lead"></p>
<!-- Labels
================================================== -->
<div class="bs-docs-section">
<h1 id="labels" class="page-header">Labels</h1>
<h3>Example</h3>
<div class="bs-example">
@ -1915,17 +1894,15 @@ body { padding-bottom: 70px; }
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
{% endhighlight %}
</div>
</div>
<!-- Badges
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="badges">Badges</h1>
</div>
<!-- Badges
================================================== -->
<div class="bs-docs-section">
<h1 id="badges" class="page-header">Badges</h1>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-example">
@ -1983,16 +1960,15 @@ body { padding-bottom: 70px; }
...
</ul>
{% endhighlight %}
</div>
</div>
<!-- Jumbotron
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="jumbotron">Jumbotron</h1>
</div>
<!-- Jumbotron
================================================== -->
<div class="bs-docs-section">
<h1 id="jumbotron" class="page-header">Jumbotron</h1>
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
<div class="bs-example">
<div class="jumbotron">
@ -2016,17 +1992,15 @@ body { padding-bottom: 70px; }
</div>
</div>
{% endhighlight %}
</div>
</div>
<!-- Page header
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="page-header">Page header</h1>
</div>
<!-- Page header
================================================== -->
<div class="bs-docs-section">
<h1 id="page-header" class="page-header">Page header</h1>
<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>
<div class="bs-example">
<div class="page-header">
@ -2038,16 +2012,15 @@ body { padding-bottom: 70px; }
<h1>Example page header <small>Subtext for header</small></h1>
</div>
{% endhighlight %}
</div>
</div>
<!-- Thumbnails
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="thumbnails">Thumbnails</h1>
</div>
<!-- Thumbnails
================================================== -->
<div class="bs-docs-section">
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<h3 id="thumbnails-default">Default example</h3>
@ -2137,17 +2110,15 @@ body { padding-bottom: 70px; }
</div>
</div>
{% endhighlight %}
</div>
</div>
<!-- Alerts
================================================== -->
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alerts</h1>
<!-- Alerts
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="alerts">Alerts</h1>
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
<h2 id="alerts-examples">Examples</h2>
@ -2229,17 +2200,15 @@ body { padding-bottom: 70px; }
<a href="#" class="alert-link">...</a>
</div>
{% endhighlight %}
</div>
</div>
<!-- Progress bars
================================================== -->
<div class="bs-docs-section">
<h1 id="progress" class="page-header">Progress bars</h1>
<!-- Progress bars
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="progress">Progress bars</h1>
</div>
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<div class="bs-callout bs-callout-danger">
@ -2401,17 +2370,15 @@ body { padding-bottom: 70px; }
</div>
</div>
{% endhighlight %}
</div>
</div>
<!-- Media object
================================================== -->
<div class="bs-docs-section">
<h1 id="media" class="page-header">Media object</h1>
<!-- Media object
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="media">Media object</h1>
</div>
<p class="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>
<h3 id="media-default">Default media</h3>
@ -2524,16 +2491,15 @@ body { padding-bottom: 70px; }
</li>
</ul>
{% endhighlight %}
</div>
</div>
<!-- List group
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="list-group">List group</h1>
</div>
<!-- List group
================================================== -->
<div class="bs-docs-section">
<h1 id="list-group" class="page-header">List group</h1>
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3 id="list-group-basic">Basic example</h3>
@ -2672,17 +2638,15 @@ body { padding-bottom: 70px; }
</a>
</div>
{% endhighlight %}
</div>
</div>
<!-- Panels
================================================== -->
<div class="bs-docs-section">
<h1 id="panels" class="page-header">Panels</h1>
<!-- Panels
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="panels">Panels</h1>
</div>
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h3 id="panels-basic">Basic example</h3>
@ -2919,7 +2883,6 @@ body { padding-bottom: 70px; }
{% endhighlight %}
<h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example">
@ -2958,19 +2921,14 @@ body { padding-bottom: 70px; }
</ul>
</div>
{% endhighlight %}
</div>
</div>
<!-- Wells
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="wells">Wells</h1>
</div>
<!-- Wells
================================================== -->
<div class="bs-docs-section">
<h1 id="wells" class="page-header">Wells</h1>
<h3>Default well</h3>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
@ -3001,4 +2959,4 @@ body { padding-bottom: 70px; }
{% highlight html %}
<div class="well well-sm">...</div>
{% endhighlight %}
</div>
</div>

170
docs/css.html
View File

@ -6,12 +6,11 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
---
<!-- Global Bootstrap settings
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="overview">Overview</h1>
</div>
<!-- Global Bootstrap settings
================================================== -->
<div class="bs-docs-section">
<h1 id="overview" class="page-header">Overview</h1>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3 id="overview-doctype">HTML5 doctype</h3>
@ -60,16 +59,15 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
...
</div>
{% endhighlight %}
</div>
</div>
<!-- Grid system
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="grid">Grid system</h1>
</div>
<!-- Grid system
================================================== -->
<div class="bs-docs-section">
<h1 id="grid" class="page-header">Grid system</h1>
<p class="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 <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-intro">Introduction</h3>
@ -329,7 +327,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h3 id="grid-responsive-resets">Responsive column resets</h3>
<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 <a href="#responsive-utilities">responsive utility classes</a>.</p>
<div class="bs-docs-grid">
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="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
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
@ -613,18 +611,14 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="content-secondary">...</div>
</div>
{% endhighlight %}
</div>
</div>
<!-- Typography
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="type">Typography</h1>
</div>
<!-- Typography
================================================== -->
<div class="bs-docs-section">
<h1 id="type" class="page-header">Typography</h1>
<!-- Headings -->
<h2 id="type-headings">Headings</h2>
@ -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>
</div>
</div>
</div>
<!-- Code
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="code">Code</h1>
</div>
<!-- Code
================================================== -->
<div class="bs-docs-section">
<h1 id="code" class="page-header">Code</h1>
<h2 id="code-inline">Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
@ -1063,16 +1056,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</div>
</div>
<!-- Tables
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="tables">Tables</h1>
</div>
<!-- Tables
================================================== -->
<div class="bs-docs-section">
<h1 id="tables" class="page-header">Tables</h1>
<h2 id="tables-example">Basic example</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</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>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div>
{% endhighlight %}
</div>
</div>
<!-- Forms
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="forms">Forms</h1>
</div>
<!-- Forms
================================================== -->
<div class="bs-docs-section">
<h1 id="forms" class="page-header">Forms</h1>
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</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>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
<h2 id="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>
<div class="bs-example">
@ -1885,10 +1872,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info">
<h4>Demo <code>:focus</code> state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state on a <code>.form-control</code>.</p>
</div>
</div>
<h2 id="forms-control-disabled">Disabled inputs</h2>
@ -2078,7 +2065,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-control-sizes">Control sizing</h2>
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
@ -2155,17 +2141,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</div>
</div>
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="buttons">Buttons</h1>
</div>
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<h1 id="buttons" class="page-header">Buttons</h1>
<h2 id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
@ -2341,17 +2324,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <a href="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>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div>
</div>
</div>
<!-- Images
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="images">Images</h1>
</div>
<!-- Images
================================================== -->
<div class="bs-docs-section">
<h1 id="images" class="page-header">Images</h1>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<div class="bs-callout bs-callout-danger">
@ -2373,16 +2353,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Responsive images</h4>
<p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div>
</div>
</div>
<!-- Helpers
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="helper-classes">Helper classes</h1>
</div>
<!-- Helpers
================================================== -->
<div class="bs-docs-section">
<h1 id="helper-classes" class="page-header">Helper classes</h1>
<h3 id="helper-classes-colors">Contextual colors</h3>
<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>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="helper-classes-clearfix">Clearfix</h3>
<p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="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>&lt;section&gt;</code> should be wrapped as inline.
.text-hide();
}
{% endhighlight %}
</div>
</div>
<!-- Responsive utilities
================================================== -->
<div class="bs-docs-section" id="responsive-utilities">
<div class="page-header">
<h1>Responsive utilities</h1>
</div>
<!-- Responsive utilities
================================================== -->
<div class="bs-docs-section">
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
<p class="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>&lt;section&gt;</code> should be wrapped as inline.
<span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
</div>
</div>
</div>
</div>
<!-- Using Less
================================================== -->
<div class="bs-docs-section" id="less">
<div class="page-header">
<h1>Using Less</h1>
</div>
<!-- Using Less
================================================== -->
<div class="bs-docs-section">
<h1 id="less" class="page-header">Using Less</h1>
<p class="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 <a href="#grid-less">within the Grid system section</a>.</p>
@ -3307,16 +3281,14 @@ a {
.retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
{% endhighlight %}
</div>
</div>
<!-- Using Sass
================================================== -->
<div class="bs-docs-section" id="sass">
<div class="page-header">
<h1>Using Sass</h1>
</div>
<!-- Using Sass
================================================== -->
<div class="bs-docs-section">
<h1 id="sass" class="page-header">Using Sass</h1>
<p class="lead">While Bootstrap is built on Less, it also has an <a href="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
<h2 id="sass-contents">What's included</h2>
@ -3511,6 +3483,4 @@ app/assets/stylesheets/bootstrap-custom.scss
//= require bootstrap/modal
//= require bootstrap/dropdown
{% endhighlight %}
</div>
</div>

145
docs/getting-started.html
View File

@ -6,12 +6,11 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
---
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="download">Download</h1>
</div>
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<h1 id="download" class="page-header">Download</h1>
<p class="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>
<div class="row bs-downloads">
@ -48,15 +47,15 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<h3 id="download-bower">Install with Bower</h3>
<p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>.</p>
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
</div>
<!-- File structure
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="whats-included">What's included</h1>
</div>
<!-- File structure
================================================== -->
<div class="bs-docs-section">
<h1 id="whats-included" class="page-header">What's included</h1>
<p class="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>
<div class="bs-callout bs-callout-warning" id="jquery-required">
@ -102,15 +101,15 @@ bootstrap/
└── examples/
{% endhighlight %}
<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>
</div>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="template">Basic template</h1>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<h1 id="template" class="page-header">Basic template</h1>
<p class="lead">Start with this basic HTML template, or modify <a href="#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>
@ -140,15 +139,15 @@ bootstrap/
</body>
</html>
{% endhighlight %}
</div>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="examples">Examples</h1>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<h1 id="examples" class="page-header">Examples</h1>
<p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
<h3 id="examples-framework">Using the framework</h3>
@ -304,16 +303,15 @@ bootstrap/
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>
</div>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="disable-responsive">Disabling responsiveness</h1>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<h1 id="disable-responsive" class="page-header">Disabling responsiveness</h1>
<p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
Here's how to disable this feature so your page works like in <a href="../examples/non-responsive/">this non-responsive example</a>.</p>
@ -332,15 +330,14 @@ bootstrap/
<p>
<a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
</p>
</div>
</div>
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1>
</div>
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<h1 id="migration" class="page-header">Migrating from 2.x to 3.0</h1>
<p class="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 <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
<h2 id="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 <a href="http://bootply.com/">Bootply</a>.</p>
</div>
</div>
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="support">Browser and device support</h1>
</div>
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
<h1 id="support" class="page-header">Browser and device support</h1>
<p class="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>
<h3 id="support-browsers">Supported browsers</h3>
@ -896,16 +892,14 @@ if (isAndroid) {
</script>
{% endhighlight %}
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
</div>
</div>
<!-- Third party support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="third-parties">Third party support</h1>
</div>
<!-- Third party support
================================================== -->
<div class="bs-docs-section">
<h1 id="third-parties" class="page-header">Third party support</h1>
<p class="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>
<h3>Box-sizing</h3>
@ -954,15 +948,14 @@ if (isAndroid) {
.reset-box-sizing();
}
{% endhighlight %}
</div>
</div>
<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="accessibility">Accessibility</h1>
</div>
<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
<h1 id="accessibility" class="page-header">Accessibility</h1>
<p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
<h3>Skip navigation</h3>
@ -986,15 +979,14 @@ if (isAndroid) {
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
</ul>
</div>
</div>
<!-- License FAQs
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="license-faqs">License FAQs</h1>
</div>
<!-- License FAQs
================================================== -->
<div class="bs-docs-section">
<h1 id="license-faqs" class="page-header">License FAQs</h1>
<p class="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 <a href="{{ site.repo }}/blob/master/LICENSE">in the project repository</a> for more information.</p>
</div><!-- /.bs-docs-section -->
</div><!-- /.bs-docs-section -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="customizing">Customizing Bootstrap</h1>
</div>
<div class="bs-docs-section">
<h1 id="customizing" class="page-header">Customizing Bootstrap</h1>
<p class="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 <a href="../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>
</div>
</div>