Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars
This commit is contained in:
Mark Otto
parent
95affa32e6
commit
a2b9988eb9
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<div class="container bs-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<div class="col-md-3">
|
||||
<aside class="bs-sidebar" role="complementary">
|
||||
<ul class="nav bs-sidenav">
|
||||
{% if page.slug == "getting-started" %}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<main class="col-lg-9" role="main">
|
||||
<main class="col-md-9" role="main">
|
||||
{{ content }}
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -637,17 +637,9 @@ body {
|
|||
------------------------- */
|
||||
.responsive-utilities-test {
|
||||
margin-top: 5px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
overflow: hidden; /* clear floats */
|
||||
}
|
||||
.responsive-utilities-test li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
.responsive-utilities-test li + li {
|
||||
margin-left: 10px;
|
||||
.responsive-utilities-test .col-xs-6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
padding: 15px 10px;
|
||||
|
|
|
|||
284
css.html
284
css.html
|
|
@ -117,15 +117,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 +134,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,101 +162,101 @@ 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">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">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">8</div>
|
||||
<div class="col-md-4">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">4</div>
|
||||
<div class="col-md-4">4</div>
|
||||
<div class="col-md-4">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">6</div>
|
||||
<div class="col-md-6">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">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">1</div>
|
||||
<div class="col-md-1">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">8</div>
|
||||
<div class="col-md-4">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">4</div>
|
||||
<div class="col-md-4">4</div>
|
||||
<div class="col-md-4">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">6</div>
|
||||
<div class="col-md-6">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>
|
||||
<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">8</div>
|
||||
<div class="col-xs-6 col-md-4">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">4</div>
|
||||
<div class="col-xs-6 col-md-4">4</div>
|
||||
<div class="col-xs-6 col-md-4">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-md-6">6</div>
|
||||
<div class="col-xs-6 col-md-6">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">8</div>
|
||||
<div class="col-xs-6 col-md-4">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">4</div>
|
||||
<div class="col-xs-6 col-md-4">4</div>
|
||||
<div class="col-xs-6 col-md-4">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-md-6">6</div>
|
||||
<div class="col-xs-6 col-md-6">6</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -263,32 +264,32 @@ base_url: "../"
|
|||
<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 class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-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-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>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .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-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
|
||||
<div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</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-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .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>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
|
||||
</div>
|
||||
<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-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -299,45 +300,45 @@ base_url: "../"
|
|||
</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 class="col-md-4">4</div>
|
||||
<div class="col-md-4 col-md-offset-4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<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 class="col-md-3 col-md-offset-3">3 offset 3</div>
|
||||
<div class="col-md-3 col-md-offset-3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
|
||||
<div class="col-md-6 col-md-offset-3">6 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
</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">...</div>
|
||||
<div class="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">3 offset 3</div>
|
||||
<div class="col-md-3 col-md-offset-3">3 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">...</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">
|
||||
<div class="col-md-9">
|
||||
Level 1: 9 columns
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-6">
|
||||
<div class="col-md-6">
|
||||
Level 2: 6 columns
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="col-md-6">
|
||||
Level 2: 6 columns
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -345,13 +346,13 @@ base_url: "../"
|
|||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-9">
|
||||
<div class="col-md-9">
|
||||
Level 1: 9 columns
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="col-md-6">
|
||||
Level 2: 6 columns
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="col-md-6">
|
||||
Level 2: 6 columns
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -360,16 +361,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">9</div>
|
||||
<div class="col-md-3 col-md-pull-9">3</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">9</div>
|
||||
<div class="col-md-3 col-md-pull-9">3</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -2014,6 +2015,27 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Extra small devices
|
||||
<small>Phones (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small devices
|
||||
<small>Tablets (>768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium devices
|
||||
<small>Desktops (>992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Large devices
|
||||
<small>Desktops (>1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- <thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Small devices <small>Up to 768px</small></th>
|
||||
|
|
@ -2021,9 +2043,17 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<th>Large devices <small>992px and up</small></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
--> <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>
|
||||
|
|
@ -2031,6 +2061,7 @@ For example, <code><section></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>
|
||||
|
|
@ -2038,10 +2069,21 @@ For example, <code><section></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>
|
||||
|
|
@ -2049,6 +2091,7 @@ For example, <code><section></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>
|
||||
|
|
@ -2056,6 +2099,7 @@ For example, <code><section></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>
|
||||
|
|
@ -2094,35 +2138,43 @@ For example, <code><section></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">✔ Visible on x-small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm">Small</span>
|
||||
<span class="visible-sm">✔ Visible on small</span>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md">Medium</span>
|
||||
<span class="visible-md">✔ 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">✔ 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">✔ Hidden on x-small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="visible-sm">Small</span>
|
||||
<span class="hidden-sm">✔ Hidden on small</span>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="visible-md">Medium</span>
|
||||
<span class="hidden-md">✔ 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">✔ Hidden on large</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -779,18 +779,18 @@ pre code {
|
|||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
|
|
@ -803,6 +803,18 @@ pre code {
|
|||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
|
|
@ -821,72 +833,72 @@ pre code {
|
|||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
.col-xs-1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
.col-xs-2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
.col-xs-3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
.col-xs-4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
.col-xs-5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
.col-xs-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
.col-xs-7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
.col-xs-8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
.col-xs-9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
.col-xs-10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
.col-xs-11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
.col-xs-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 728px;
|
||||
max-width: 720px;
|
||||
}
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
|
|
@ -938,6 +950,9 @@ pre code {
|
|||
.col-sm-12 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.col-sm-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
|
|
@ -1043,6 +1058,164 @@ pre code {
|
|||
.container {
|
||||
max-width: 940px;
|
||||
}
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-md-1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
.col-md-2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
.col-md-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-md-4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
.col-md-5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
.col-md-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-md-7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
.col-md-8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
.col-md-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-md-10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
.col-md-11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
.col-md-12 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.col-md-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
.col-md-push-2 {
|
||||
left: 16.666666666666664%;
|
||||
}
|
||||
.col-md-push-3 {
|
||||
left: 25%;
|
||||
}
|
||||
.col-md-push-4 {
|
||||
left: 33.33333333333333%;
|
||||
}
|
||||
.col-md-push-5 {
|
||||
left: 41.66666666666667%;
|
||||
}
|
||||
.col-md-push-6 {
|
||||
left: 50%;
|
||||
}
|
||||
.col-md-push-7 {
|
||||
left: 58.333333333333336%;
|
||||
}
|
||||
.col-md-push-8 {
|
||||
left: 66.66666666666666%;
|
||||
}
|
||||
.col-md-push-9 {
|
||||
left: 75%;
|
||||
}
|
||||
.col-md-push-10 {
|
||||
left: 83.33333333333334%;
|
||||
}
|
||||
.col-md-push-11 {
|
||||
left: 91.66666666666666%;
|
||||
}
|
||||
.col-md-pull-1 {
|
||||
right: 8.333333333333332%;
|
||||
}
|
||||
.col-md-pull-2 {
|
||||
right: 16.666666666666664%;
|
||||
}
|
||||
.col-md-pull-3 {
|
||||
right: 25%;
|
||||
}
|
||||
.col-md-pull-4 {
|
||||
right: 33.33333333333333%;
|
||||
}
|
||||
.col-md-pull-5 {
|
||||
right: 41.66666666666667%;
|
||||
}
|
||||
.col-md-pull-6 {
|
||||
right: 50%;
|
||||
}
|
||||
.col-md-pull-7 {
|
||||
right: 58.333333333333336%;
|
||||
}
|
||||
.col-md-pull-8 {
|
||||
right: 66.66666666666666%;
|
||||
}
|
||||
.col-md-pull-9 {
|
||||
right: 75%;
|
||||
}
|
||||
.col-md-pull-10 {
|
||||
right: 83.33333333333334%;
|
||||
}
|
||||
.col-md-pull-11 {
|
||||
right: 91.66666666666666%;
|
||||
}
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.col-md-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-md-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-md-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-md-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-md-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-md-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-md-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-md-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-md-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
|
|
@ -1194,12 +1367,6 @@ pre code {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
|
|
@ -4638,20 +4805,85 @@ a.list-group-item.active > .badge,
|
|||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.visible-sm {
|
||||
.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
tr.visible-sm {
|
||||
tr.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
|
||||
th.visible-sm,
|
||||
td.visible-sm {
|
||||
th.visible-xs,
|
||||
td.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
tr.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
th.visible-xs,
|
||||
td.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
tr.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
th.visible-xs,
|
||||
td.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
tr.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
th.visible-xs,
|
||||
td.visible-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
tr.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
th.visible-sm,
|
||||
td.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
tr.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm,
|
||||
td.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -4664,7 +4896,7 @@ td.visible-sm {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1200px) {
|
||||
.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -4691,6 +4923,19 @@ td.visible-md {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
tr.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
th.visible-md,
|
||||
td.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -4703,7 +4948,7 @@ td.visible-md {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1200px) {
|
||||
.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -4742,7 +4987,20 @@ td.visible-lg {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
tr.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
th.visible-lg,
|
||||
td.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -4755,20 +5013,85 @@ td.visible-lg {
|
|||
}
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
tr.hidden-sm {
|
||||
tr.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
th.hidden-sm,
|
||||
td.hidden-sm {
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-xs {
|
||||
display: block !important;
|
||||
}
|
||||
tr.hidden-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-xs {
|
||||
display: block !important;
|
||||
}
|
||||
tr.hidden-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-xs {
|
||||
display: block !important;
|
||||
}
|
||||
tr.hidden-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
tr.hidden-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
|
||||
th.hidden-sm,
|
||||
td.hidden-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
tr.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
th.hidden-sm,
|
||||
td.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -4781,7 +5104,7 @@ td.hidden-sm {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -4808,6 +5131,19 @@ td.hidden-md {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
}
|
||||
tr.hidden-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-md,
|
||||
td.hidden-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -4820,7 +5156,7 @@ td.hidden-md {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -4859,7 +5195,20 @@ td.hidden-lg {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-lg {
|
||||
display: block !important;
|
||||
}
|
||||
tr.hidden-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-lg,
|
||||
td.hidden-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
194
less/grid.less
194
less/grid.less
|
|
@ -2,6 +2,7 @@
|
|||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container {
|
||||
.container-fixed();
|
||||
|
|
@ -13,18 +14,18 @@
|
|||
}
|
||||
|
||||
// Common styles for small and large grid columns
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
|
|
@ -37,6 +38,18 @@
|
|||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
|
|
@ -58,41 +71,45 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Container and grid column sizing
|
||||
// Extra small grid
|
||||
//
|
||||
// Grid classes for extra small devices like smartphones. No offset, push, or
|
||||
// pull classes are present here due to the size of the target
|
||||
|
||||
// Extra small device columns (smartphones)
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-12 { width: 100%; }
|
||||
.col-xs-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-xs-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-xs-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-xs-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-xs-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-xs-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-xs-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-xs-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-xs-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-xs-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-xs-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-xs-12 { width: 100%; }
|
||||
|
||||
// Small device columns (phones to tablets)
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
|
||||
// Small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||
// to tablets.
|
||||
|
||||
@media (min-width: @screen-tablet) {
|
||||
.container {
|
||||
max-width: @container-tablet;
|
||||
}
|
||||
|
|
@ -123,7 +140,9 @@
|
|||
.col-sm-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-sm-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-sm-12 { width: 100%; }
|
||||
}
|
||||
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
// Push and pull columns for source order changes
|
||||
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
|
|
@ -163,11 +182,93 @@
|
|||
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Medium and large device columns (desktop and up)
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: @screen-desktop) {
|
||||
.container {
|
||||
max-width: @container-desktop;
|
||||
}
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12 {
|
||||
float: left;
|
||||
}
|
||||
.col-md-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-md-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-md-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-md-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-md-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-md-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-md-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-md-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-md-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-md-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-md-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-md-12 { width: 100%; }
|
||||
}
|
||||
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
// Push and pull columns for source order changes
|
||||
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Offsets
|
||||
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.container {
|
||||
max-width: @container-large-desktop;
|
||||
}
|
||||
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
|
|
@ -233,10 +334,3 @@
|
|||
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Large desktops and up
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.container {
|
||||
max-width: @container-large-desktop;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,21 +35,39 @@
|
|||
|
||||
// Visibility utilities
|
||||
|
||||
.visible-sm {
|
||||
.visible-xs {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
|
|
@ -58,26 +76,47 @@
|
|||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
.hidden-xs {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
|
@ -86,7 +125,10 @@
|
|||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-desktop) {
|
||||
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -209,6 +209,7 @@
|
|||
@screen-large-desktop: @screen-large;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-phone-max: (@screen-small - 1);
|
||||
@screen-small-max: (@screen-medium - 1);
|
||||
@screen-tablet-max: (@screen-desktop - 1);
|
||||
@screen-desktop-max: (@screen-large-desktop - 1);
|
||||
|
|
@ -595,10 +596,10 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: 728px;
|
||||
@container-tablet: 720px;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: 940px;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: 1170px;
|
||||
@container-large-desktop: 1140px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue