aboutsummaryrefslogtreecommitdiff
path: root/css.html
diff options
context:
space:
mode:
Diffstat (limited to 'css.html')
-rw-r--r--css.html810
1 files changed, 513 insertions, 297 deletions
diff --git a/css.html b/css.html
index 6c760dd03..dd576df06 100644
--- a/css.html
+++ b/css.html
@@ -15,7 +15,7 @@ base_url: "../"
</div>
<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 required</h3>
+ <h3 id="overview-doctype">HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
{% highlight html %}
<!DOCTYPE html>
@@ -30,6 +30,10 @@ base_url: "../"
{% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endhighlight %}
+ <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+{% endhighlight %}
<h3 id="overview-responsive-images">Responsive images</h3>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
@@ -47,10 +51,10 @@ base_url: "../"
</ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
- <h3 id="overview-normalize">Normalize reset</h3>
+ <h3 id="overview-normalize">Normalize</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
- <h3 id="overview-container">Centering with container</h3>
+ <h3 id="overview-container">Containers</h3>
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
{% highlight html %}
<div class="container">
@@ -83,6 +87,29 @@ base_url: "../"
</div>
<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-media-queries">Media queries</h3>
+ <p>We use the following media queries to create the key breakpoints in our grid system.</p>
+{% highlight css %}
+/* Extra small devices (phones, up to 480px) */
+/* No media query since this is the default in Bootstrap */
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: @screen-tablet) { ... }
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: @screen-desktop) { ... }
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: @screen-large-desktop) { ... }
+{% endhighlight %}
+ <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
+{% highlight css %}
+@media (max-width: @screen-phone-max) { ... }
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
+@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... }
+@media (min-width: @screen-large-desktop) { ... }
+{% endhighlight %}
+
<h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="bs-table-scrollable">
@@ -96,15 +123,15 @@ base_url: "../"
</th>
<th>
Small devices
- <small>Tablets (&gt;768px)</small>
+ <small>Tablets (&ge;768px)</small>
</th>
<th>
Medium devices
- <small>Desktops (&gt;992px)</small>
+ <small>Desktops (&ge;992px)</small>
</th>
<th>
Large devices
- <small>Desktops (&gt;1200px)</small>
+ <small>Desktops (&ge;1200px)</small>
</th>
</tr>
</thead>
@@ -117,15 +144,16 @@ base_url: "../"
<tr>
<th>Max container width</th>
<td>None (auto)</td>
- <td>728px</td>
+ <td>720px</td>
<td>940px</td>
- <td>1170px</td>
+ <td>1140px</td>
</tr>
<tr>
<th>Class prefix</th>
- <td><code>.col-</code></td>
+ <td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
- <td colspan="2"><code>.col-lg-</code></td>
+ <td><code>.col-md-</code></td>
+ <td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
@@ -133,10 +161,10 @@ base_url: "../"
</tr>
<tr>
<th>Max column width</th>
- <td>Auto</td>
- <td>~60px</td>
- <td>~78px</td>
- <td>~98px</td>
+ <td class="text-muted">Auto</td>
+ <td>60px</td>
+ <td>78px</td>
+ <td>95px</td>
</tr>
<tr>
<th>Gutter width</th>
@@ -161,198 +189,216 @@ base_url: "../"
</div>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
- <p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
+ <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
- <div class="col-lg-8">8</div>
- <div class="col-lg-4">4</div>
+ <div class="col-md-8">.col-md-8</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-lg-4">4</div>
- <div class="col-lg-4">4</div>
- <div class="col-lg-4">4</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-lg-6">6</div>
- <div class="col-lg-6">6</div>
+ <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">.col-md-6</div>
</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
- <div class="col-lg-1">1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
- <div class="col-lg-8">8</div>
- <div class="col-lg-4">4</div>
+ <div class="col-md-8">.col-md-8</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
- <div class="col-lg-4">4</div>
- <div class="col-lg-4">4</div>
- <div class="col-lg-4">4</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
- <div class="col-lg-6">6</div>
- <div class="col-lg-6">6</div>
+ <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">.col-md-6</div>
</div>
{% endhighlight %}
- <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
- <p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p>
+ <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
+ <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-12 col-lg-8">8</div>
- <div class="col-6 col-lg-4">4</div>
+ <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-6 col-lg-4">4</div>
- <div class="col-6 col-lg-4">4</div>
- <div class="col-6 col-lg-4">4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-6 col-lg-6">6</div>
- <div class="col-6 col-lg-6">6</div>
+ <div class="col-xs-6">.col-xs-6</div>
+ <div class="col-xs-6">.col-xs-6</div>
</div>
</div>
{% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
- <div class="col-12 col-lg-8">8</div>
- <div class="col-6 col-lg-4">4</div>
+ <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
- <div class="col-6 col-lg-4">4</div>
- <div class="col-6 col-lg-4">4</div>
- <div class="col-6 col-lg-4">4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
- <div class="col-6 col-lg-6">6</div>
- <div class="col-6 col-lg-6">6</div>
+ <div class="col-xs-6">.col-xs-6</div>
+ <div class="col-xs-6">.col-xs-6</div>
</div>
{% endhighlight %}
- <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
+ <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
- </div>
- <div class="row show-grid">
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+ <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+ <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
- <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+ <!-- Optional: clear the XS cols if their content doesn't match in height -->
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+ <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+ <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
- <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
+ <!-- Optional: clear the XS cols if their content doesn't match in height -->
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
+{% endhighlight %}
+
+ <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="../css#responsive-utilities">responsive utility classes</a>.</p>
+{% highlight html %}
<div class="row">
- <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
- <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
+ <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>
+
+ <!-- Add the extra clearfix for only the required viewport -->
+ <div class="clearfix visible-xs"></div>
+
+ <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>
+{% endhighlight %}
+ <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.</p>
+{% highlight html %}
+<div class="row">
+ <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+ <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+</div>
+
+<div class="row">
+ <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
+ <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
{% endhighlight %}
- <div class="bs-callout bs-callout-danger">
- <h4>Need more examples?</h4>
- <p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
- <p><a class="btn btn-danger" target="_blank" href="http://examples.getbootstrap.com/grid/">More grid examples</a></p>
- </div>
<h3 id="grid-offsetting">Offsetting columns</h3>
- <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
+ <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-lg-4">4</div>
- <div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
- </div><!-- /row -->
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
<div class="row show-grid">
- <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
- <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
- </div><!-- /row -->
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ </div>
<div class="row show-grid">
- <div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
- </div><!-- /row -->
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-lg-4">...</div>
- <div class="col-lg-4 col-lg-offset-4">...</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
- <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
- <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
- <div class="col-lg-6 col-lg-offset-3">...</div>
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
{% endhighlight %}
<h3 id="grid-nesting">Nesting columns</h3>
- <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
+ <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
- <div class="col-lg-9">
- Level 1: 9 columns
+ <div class="col-md-9">
+ Level 1: .col-md-9
<div class="row show-grid">
- <div class="col-lg-6">
- Level 2: 6 columns
+ <div class="col-md-6">
+ Level 2: .col-md-6
</div>
- <div class="col-lg-6">
- Level 2: 6 columns
+ <div class="col-md-6">
+ Level 2: .col-md-6
</div>
</div>
</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-lg-9">
- Level 1: 9 columns
+ <div class="col-md-9">
+ Level 1: .col-md-9
<div class="row">
- <div class="col-lg-6">
- Level 2: 6 columns
+ <div class="col-md-6">
+ Level 2: .col-md-6
</div>
- <div class="col-lg-6">
- Level 2: 6 columns
+ <div class="col-md-6">
+ Level 2: .col-md-6
</div>
</div>
</div>
@@ -360,16 +406,16 @@ base_url: "../"
{% endhighlight %}
<h3 id="grid-column-ordering">Column ordering</h3>
- <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
+ <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid">
- <div class="col-lg-9 col-lg-push-3">9</div>
- <div class="col-lg-3 col-lg-pull-9">3</div>
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-lg-9 col-lg-push-3">9</div>
- <div class="col-lg-3 col-lg-pull-9">3</div>
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
{% endhighlight %}
@@ -388,34 +434,136 @@ base_url: "../"
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css %}
// Creates a wrapper for a series of columns
-.make-row() {
- // Negative margin the row out to align the content of columns
- margin-left: (@grid-gutter-width / -2);
- margin-right: (@grid-gutter-width / -2);
+.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
+
+ @media (min-width: @screen-small) {
+ margin-left: (@gutter / -2);
+ margin-right: (@gutter / -2);
+ }
+
+ // Negative margin nested rows out to align the content of columns
+ .row {
+ margin-left: (@gutter / -2);
+ margin-right: (@gutter / -2);
+ }
}
-// Generate the columns
-.make-column(@columns) {
+// Generate the extra small columns
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+
+ // Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
- // Calculate width based on number of columns available
- width: percentage(@columns / @grid-columns);
+ width: percentage((@columns / @grid-columns));
}
+}
+
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+ position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
- // Set inner padding as gutters instead of margin
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
+ // Inner gutter via padding
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+
+ // Calculate width based on number of columns available
+ @media (min-width: @screen-small) {
+ float: left;
+ width: percentage((@columns / @grid-columns));
+ }
}
-// Generate the column offsets
-.make-column-offset(@columns) {
- @media (min-width: @grid-float-breakpoint) {
+// Generate the small column offsets
+.make-sm-column-offset(@columns) {
+ @media (min-width: @screen-small) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+}
+.make-sm-column-push(@columns) {
+ @media (min-width: @screen-small) {
+ left: percentage((@columns / @grid-columns));
+ }
+}
+.make-sm-column-pull(@columns) {
+ @media (min-width: @screen-small) {
+ right: percentage((@columns / @grid-columns));
+ }
+}
+
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+
+ // Calculate width based on number of columns available
+ @media (min-width: @screen-medium) {
+ float: left;
+ width: percentage((@columns / @grid-columns));
+ }
+}
+
+// Generate the large column offsets
+.make-md-column-offset(@columns) {
+ @media (min-width: @screen-medium) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+}
+.make-md-column-push(@columns) {
+ @media (min-width: @screen-medium) {
+ left: percentage((@columns / @grid-columns));
+ }
+}
+.make-md-column-pull(@columns) {
+ @media (min-width: @screen-medium) {
+ right: percentage((@columns / @grid-columns));
+ }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+
+ // Calculate width based on number of columns available
+ @media (min-width: @screen-large) {
+ float: left;
+ width: percentage((@columns / @grid-columns));
+ }
+}
+
+// Generate the large column offsets
+.make-lg-column-offset(@columns) {
+ @media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
+.make-lg-column-push(@columns) {
+ @media (min-width: @screen-large) {
+ left: percentage((@columns / @grid-columns));
+ }
+}
+.make-lg-column-pull(@columns) {
+ @media (min-width: @screen-large) {
+ right: percentage((@columns / @grid-columns));
+ }
+}
{% endhighlight %}
<h4>Example usage</h4>
@@ -425,11 +573,11 @@ base_url: "../"
.make-row();
}
.content-main {
- .make-column(8);
+ .make-lg-column(8);
}
.content-secondary {
- .make-column(3);
- .make-column-offset(1);
+ .make-lg-column(3);
+ .make-lg-column-offset(1);
}
{% endhighlight %}
{% highlight html %}
@@ -459,27 +607,27 @@ base_url: "../"
<table class="table">
<tbody>
<tr>
- <th><h1>Bootstrap heading</h1></th>
+ <td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 38px</td>
</tr>
<tr>
- <th><h2>Bootstrap heading</h2></th>
+ <td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 32px</td>
</tr>
<tr>
- <th><h3>Bootstrap heading</h3></th>
+ <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td>
</tr>
<tr>
- <th><h4>Bootstrap heading</h4></th>
+ <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td>
</tr>
<tr>
- <th><h5>Bootstrap heading</h5></th>
- <td>Semibold 16px</td>
+ <td><h5>h5. Bootstrap heading</h5></td>
+ <td>Semibold 14px</td>
</tr>
<tr>
- <th><h6>Bootstrap heading</h6></th>
+ <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td>
</tr>
</tbody>
@@ -576,18 +724,18 @@ base_url: "../"
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+ <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<p class="text-muted">...</p>
<p class="text-primary">...</p>
-<p class="text-warning">...</p>
-<p class="text-danger">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
+<p class="text-warning">...</p>
+<p class="text-danger">...</p>
{% endhighlight %}
@@ -913,10 +1061,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
- <h2>Optional classes</h2>
- <p>Add any of the following classes to the <code>.table</code> base class.</p>
-
- <h3 id="tables-striped">Striped</h3>
+ <h2 id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
@@ -960,7 +1105,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% endhighlight %}
- <h3 id="tables-bordered">Bordered</h3>
+
+ <h2 id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example">
<table class="table table-bordered">
@@ -1004,7 +1150,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% endhighlight %}
- <h3 id="tables-hover-rows">Hover rows</h3>
+
+ <h2 id="tables-hover-rows">Hover rows</h2>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-example">
<table class="table table-hover">
@@ -1044,7 +1191,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
- <h3 id="tables-condensed">Condensed</h3>
+ <h2 id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-example">
<table class="table table-condensed">
@@ -1085,7 +1232,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
- <h2 id="tables-row-classes">Contextual table classes</h2>
+ <h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
@@ -1102,15 +1249,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tbody>
<tr>
<td>
- <code>.success</code>
+ <code>.active</code>
</td>
- <td>Indicates a successful or positive action</td>
+ <td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td>
- <code>.danger</code>
+ <code>.success</code>
</td>
- <td>Indicates a dangerous or potentially negative action</td>
+ <td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
@@ -1120,9 +1267,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
<tr>
<td>
- <code>.active</code>
+ <code>.danger</code>
</td>
- <td>Applies the hover color to a particular row or cell</td>
+ <td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
@@ -1138,7 +1285,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
</thead>
<tbody>
- <tr class="success">
+ <tr class="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
@@ -1150,7 +1297,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
- <tr class="danger">
+ <tr class="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
@@ -1174,7 +1321,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
- <tr class="active">
+ <tr class="danger">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
@@ -1184,11 +1331,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div><!-- /example -->
{% highlight html %}
-<tr class="success">
- <td>1</td>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
+<!-- On rows -->
+<tr class="active">...</tr>
+<tr class="success">...</tr>
+<tr class="warning">...</tr>
+<tr class="danger">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+ <td class="active">...</td>
+ <td class="success">...</td>
+ <td class="warning">...</td>
+ <td class="danger">...</td>
</tr>
{% endhighlight %}
@@ -1205,67 +1359,71 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
- <form class="bs-example">
- <fieldset>
- <legend>Legend</legend>
- <div class="form-group">
- <label for="exampleInputEmail">Email address</label>
- <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
- </div>
- <div class="form-group">
- <label for="exampleInputPassword">Password</label>
- <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
- </div>
- <div class="form-group">
- <label for="exampleInputFile">File input</label>
- <input type="file" id="exampleInputFile">
- <p class="help-block">Example block-level help text here.</p>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Check me out
- </label>
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </fieldset>
+ <form class="bs-example" role="form">
+ <div class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" id="exampleInputFile">
+ <p class="help-block">Example block-level help text here.</p>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
</form><!-- /example -->
{% highlight html %}
-<form>
- <fieldset>
- <legend>Legend</legend>
- <div class="form-group">
- <label for="exampleInputEmail">Email address</label>
- <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
- </div>
- <div class="form-group">
- <label for="exampleInputPassword">Password</label>
- <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
- </div>
- <div class="form-group">
- <label for="exampleInputFile">File input</label>
- <input type="file" id="exampleInputFile">
- <p class="help-block">Example block-level help text here.</p>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Check me out
- </label>
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </fieldset>
+<form role="form">
+ <div class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" id="exampleInputFile">
+ <p class="help-block">Example block-level help text here.</p>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
</form>
{% endhighlight %}
- <h3 id="forms-inline">Inline form</h2>
+ <h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
- <form class="bs-example form-inline">
- <input type="text" class="form-control" placeholder="Email">
- <input type="password" class="form-control" placeholder="Password">
+ <div class="bs-callout bs-callout-danger">
+ <h4>Always add labels</h4>
+ <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
+ </div>
+ <form class="bs-example form-inline" role="form">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputEmail2">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputPassword2">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+ </div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@@ -1274,9 +1432,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example -->
{% highlight html %}
-<form class="form-inline">
- <input type="text" class="form-control" placeholder="Email">
- <input type="password" class="form-control" placeholder="Password">
+<form class="form-inline" role="form">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputEmail2">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputPassword2">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+ </div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@@ -1286,19 +1450,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
+
<h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
- <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+ <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
- <input type="text" class="form-control" id="inputEmail" placeholder="Email">
+ <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
- <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+ <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
- <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+ <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
@@ -1317,17 +1482,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
-<form class="form-horizontal">
+<form class="form-horizontal" role="form">
<div class="form-group">
- <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+ <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
- <input type="text" class="form-control" id="inputEmail" placeholder="Email">
+ <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
- <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+ <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
- <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+ <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
@@ -1348,7 +1513,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
- <h2 id="forms-controls">Supported form controls</h2>
+ <h2 id="forms-controls">Supported controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
@@ -1482,11 +1647,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
- <h2 id="forms-controls-static">Static text in horizontal forms</h2>
- <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+ <h2 id="forms-controls-static">Static control</h2>
+ <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
- <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+ <label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">[email protected]</p>
</div>
@@ -1499,24 +1664,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
-<form class="form-horizontal">
+<form class="form-horizontal" role="form">
<div class="form-group">
- <label for="inputEmail2" class="col-lg-2 control-label">Email</label>
+ <label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
- <label for="inputPassword2" class="col-lg-2 control-label">Password</label>
+ <label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
- <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+ <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
{% endhighlight %}
- <h2 id="forms-control-states">Form control states</h2>
+ <h2 id="forms-control-states">Form states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
<h3 id="forms-input-focus">Input focus</h3>
@@ -1553,11 +1718,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-example">
<fieldset disabled>
<div class="form-group">
- <label for="disabledInput">Disabled input</label>
- <input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
+ <label for="disabledTextInput">Disabled input</label>
+ <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
- <label for="disabledInput">Disabled select menu</label>
+ <label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
@@ -1571,14 +1736,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset>
</form>
{% highlight html %}
-<form class="form-inline">
+<form class="form-inline" role="form">
<fieldset disabled>
<div class="form-group">
- <label for="disabledInput">Disabled input</label>
- <input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
+ <label for="disabledTextInput">Disabled input</label>
+ <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
- <label for="disabledInput">Disabled select menu</label>
+ <label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
@@ -1594,9 +1759,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-validation">Validation states</h3>
- <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
+ <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<form class="bs-example">
+ <div class="form-group has-success">
+ <label class="control-label" for="inputSuccess">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess">
+ </div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
@@ -1605,12 +1774,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
- <div class="form-group has-success">
- <label class="control-label" for="inputSuccess">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess">
- </div>
</form>
{% highlight html %}
+<div class="form-group has-success">
+ <label class="control-label" for="inputSuccess">Input with success</label>
+ <input type="text" class="form-control" id="inputSuccess">
+</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
@@ -1619,10 +1788,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
-<div class="form-group has-success">
- <label class="control-label" for="inputSuccess">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess">
-</div>
{% endhighlight %}
@@ -1708,7 +1873,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="buttons">Buttons</h1>
</div>
- <h2 id="buttons-options">Button options</h2>
+ <h2 id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
@@ -1742,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}
- <h2 id="buttons-sizes">Button sizes</h2>
+ <h2 id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example">
<p>
@@ -1832,7 +1997,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
- <h2 id="buttons-tags">Using multiple tags</h2>
+ <h2 id="buttons-tags">Button tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-example">
<a class="btn btn-default" href="#">Link</a>
@@ -1870,14 +2035,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-example bs-example-images">
- <img data-src="holder.js/140x140" class="img-rounded">
- <img data-src="holder.js/140x140" class="img-circle">
- <img data-src="holder.js/140x140" class="img-thumbnail">
+ <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
+ <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+ <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
{% highlight html %}
-<img src="..." class="img-rounded">
-<img src="..." class="img-circle">
-<img src="..." class="img-thumbnail">
+<img src="..." alt="..." class="img-rounded">
+<img src="..." alt="..." class="img-circle">
+<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
@@ -1898,42 +2063,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-example">
- <p><button type="button" class="close">&times;</button></p>
+ <p><button type="button" class="close" aria-hidden="true">&times;</button></p>
</div>
{% highlight html %}
-<button type="button" class="close">&times;</button>
+<button type="button" class="close" aria-hidden="true">&times;</button>
{% endhighlight %}
<h3>.pull-left</h3>
- <p>Float an element left</p>
+ <p>Float an element left with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css %}
.pull-left {
- float: left;
+ float: left !important;
}
{% endhighlight %}
<h3>.pull-right</h3>
- <p>Float an element right</p>
+ <p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
.pull-right {
- float: right;
+ float: right !important;
}
{% endhighlight %}
<h3>.clearfix</h3>
- <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+ <p>Clear the <code>float</code> on any element. 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 %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css %}
// Mixin
-.clearfix {
+.clearfix() {
&:before,
&:after {
content: " ";
@@ -1949,6 +2114,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
.clearfix();
}
{% endhighlight %}
+
+ <h3>.sr-only</h3>
+ <p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
+{% highlight html %}
+<a class="sr-only" href="#content">Skip to content</a>
+{% endhighlight %}
</div>
<!-- Responsive utilities
@@ -1964,15 +2135,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
- <th>Class</th>
- <th>Small devices <small>Up to 768px</small></th>
- <th>Medium devices <small>768px to 991px</small></th>
- <th>Large devices <small>992px and up</small></th>
+ <th></th>
+ <th>
+ Extra small devices
+ <small>Phones (&lt;768px)</small>
+ </th>
+ <th>
+ Small devices
+ <small>Tablets (&ge;768px)</small>
+ </th>
+ <th>
+ Medium devices
+ <small>Desktops (&ge;992px)</small>
+ </th>
+ <th>
+ Large devices
+ <small>Desktops (&ge;1200px)</small>
+ </th>
</tr>
</thead>
<tbody>
<tr>
+ <th><code>.visible-xs</code></th>
+ <td class="is-visible">Visible</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
+ </tr>
+ <tr>
<th><code>.visible-sm</code></th>
+ <td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
@@ -1980,6 +2172,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr>
<th><code>.visible-md</code></th>
<td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
@@ -1987,10 +2180,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<th><code>.visible-lg</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ </tr>
+ </tbody>
+ <tbody>
+ <tr>
+ <th><code>.hidden-xs</code></th>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ <td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-sm</code></th>
+ <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
@@ -1998,6 +2202,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr>
<th><code>.hidden-md</code></th>
<td class="is-visible">Visible</td>
+ <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
@@ -2005,6 +2210,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<th><code>.hidden-lg</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
+ <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
@@ -2043,35 +2249,45 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
- <ul class="responsive-utilities-test visible-on">
- <li>
+ <div class="row responsive-utilities-test visible-on">
+ <div class="col-xs-6 col-sm-3">
+ <span class="hidden-xs">Extra small</span>
+ <span class="visible-xs">&#10004; Visible on x-small</span>
+ </div>
+ <div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Visible on small</span>
- </li>
- <li>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Visible on medium</span>
- </li>
- <li>
+ </div>
+ <div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Visible on large</span>
- </li>
- </ul>
+ </div>
+ </div>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
- <ul class="responsive-utilities-test hidden-on">
- <li>
+ <div class="row responsive-utilities-test hidden-on">
+ <div class="col-xs-6 col-sm-3">
+ <span class="visible-xs">Extra small</span>
+ <span class="hidden-xs">&#10004; Hidden on x-small</span>
+ </div>
+ <div class="col-xs-6 col-sm-3">
<span class="visible-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span>
- </li>
- <li>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-3">
<span class="visible-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span>
- </li>
- <li>
+ </div>
+ <div class="col-xs-6 col-sm-3">
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on large</span>
- </li>
- </ul>
+ </div>
+ </div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 12:26:50 +0000