Merge branch 'master' of github.com:twbs/bootstrap
This commit is contained in:
commit
1848b0f249
|
@ -7230,6 +7230,21 @@ button.close {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.visible-xs-block,
|
||||
.visible-xs-inline,
|
||||
.visible-xs-inline-block,
|
||||
.visible-sm-block,
|
||||
.visible-sm-inline,
|
||||
.visible-sm-inline-block,
|
||||
.visible-md-block,
|
||||
.visible-md-inline,
|
||||
.visible-md-inline-block,
|
||||
.visible-lg-block,
|
||||
.visible-lg-inline,
|
||||
.visible-lg-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs {
|
||||
display: block !important;
|
||||
|
@ -7249,6 +7264,24 @@ button.close {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
|
@ -7268,6 +7301,24 @@ button.close {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
|
@ -7287,6 +7338,24 @@ button.close {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
|
@ -7306,6 +7375,24 @@ button.close {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs {
|
||||
display: none !important;
|
||||
|
@ -7353,6 +7440,36 @@ button.close {
|
|||
}
|
||||
}
|
||||
|
||||
.visible-print-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.visible-print-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-print-inline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.visible-print-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-print-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.visible-print-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hidden-print {
|
||||
display: none !important;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -5869,6 +5869,20 @@ button.close {
|
|||
.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
.visible-xs-block,
|
||||
.visible-xs-inline,
|
||||
.visible-xs-inline-block,
|
||||
.visible-sm-block,
|
||||
.visible-sm-inline,
|
||||
.visible-sm-inline-block,
|
||||
.visible-md-block,
|
||||
.visible-md-inline,
|
||||
.visible-md-inline-block,
|
||||
.visible-lg-block,
|
||||
.visible-lg-inline,
|
||||
.visible-lg-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs {
|
||||
display: block !important;
|
||||
|
@ -5884,6 +5898,21 @@ button.close {
|
|||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-xs-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
|
@ -5899,6 +5928,21 @@ button.close {
|
|||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
|
@ -5914,6 +5958,21 @@ button.close {
|
|||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
|
@ -5929,6 +5988,21 @@ button.close {
|
|||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs {
|
||||
display: none !important;
|
||||
|
@ -5967,6 +6041,30 @@ button.close {
|
|||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-print-block {
|
||||
display: none !important;
|
||||
}
|
||||
@media print {
|
||||
.visible-print-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline {
|
||||
display: none !important;
|
||||
}
|
||||
@media print {
|
||||
.visible-print-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
@media print {
|
||||
.visible-print-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.hidden-print {
|
||||
display: none !important;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1195,14 +1195,14 @@ h1[id] {
|
|||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.visible-on .col-xs-6 .visible-xs,
|
||||
.visible-on .col-xs-6 .visible-sm,
|
||||
.visible-on .col-xs-6 .visible-md,
|
||||
.visible-on .col-xs-6 .visible-lg,
|
||||
.hidden-on .col-xs-6 .visible-xs,
|
||||
.hidden-on .col-xs-6 .visible-sm,
|
||||
.hidden-on .col-xs-6 .visible-md,
|
||||
.hidden-on .col-xs-6 .visible-lg {
|
||||
.visible-on .col-xs-6 .visible-xs-block,
|
||||
.visible-on .col-xs-6 .visible-sm-block,
|
||||
.visible-on .col-xs-6 .visible-md-block,
|
||||
.visible-on .col-xs-6 .visible-lg-block,
|
||||
.hidden-on .col-xs-6 .visible-xs-block,
|
||||
.hidden-on .col-xs-6 .visible-sm-block,
|
||||
.hidden-on .col-xs-6 .visible-md-block,
|
||||
.hidden-on .col-xs-6 .visible-lg-block {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border: 1px solid #d6e9c6;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
106
docs/css.html
106
docs/css.html
|
@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
|||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
|||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
|||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></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>
|
||||
|
@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
|||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></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>
|
||||
|
@ -2652,7 +2652,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
|
||||
|
||||
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
|
||||
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
|
||||
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
|
||||
|
||||
|
||||
<h2 id="responsive-utilities-classes">Available classes</h2>
|
||||
|
@ -2682,28 +2682,28 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-xs</code></th>
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-md</code></th>
|
||||
<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>
|
||||
<tr>
|
||||
<th><code>.visible-lg</code></th>
|
||||
<th><code>.visible-lg-*</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
|
@ -2743,6 +2743,33 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Group of classes</th>
|
||||
<th>CSS <code>display</code></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.visible-*-block</code></td>
|
||||
<td><code>display: block;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-*-inline</code></td>
|
||||
<td><code>display: inline;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.visible-*-inline-block</code></td>
|
||||
<td><code>display: inline-block;</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
|
||||
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code><table></code>-related elements.</p>
|
||||
|
||||
<h2 id="responsive-utilities-print">Print classes</h2>
|
||||
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
|
||||
|
@ -2750,14 +2777,18 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Classes</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print</code></th>
|
||||
<th>
|
||||
<code>.visible-print-block</code><br>
|
||||
<code>.visible-print-inline</code><br>
|
||||
<code>.visible-print-inline-block</code>
|
||||
</th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
|
@ -2769,6 +2800,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p>
|
||||
|
||||
|
||||
<h2 id="responsive-utilities-tests">Test cases</h2>
|
||||
|
@ -2779,48 +2811,48 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<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>
|
||||
<span class="visible-xs-block">✔ 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>
|
||||
<span class="visible-sm-block">✔ Visible on small</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md">Medium</span>
|
||||
<span class="visible-md">✔ Visible on medium</span>
|
||||
<span class="visible-md-block">✔ Visible on medium</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-lg">Large</span>
|
||||
<span class="visible-lg">✔ Visible on large</span>
|
||||
<span class="visible-lg-block">✔ Visible on large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
||||
<span class="visible-xs visible-sm">✔ Visible on x-small and small</span>
|
||||
<span class="visible-xs-block visible-sm-block">✔ Visible on x-small and small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-md hidden-lg">Medium and large</span>
|
||||
<span class="visible-md visible-lg">✔ Visible on medium and large</span>
|
||||
<span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
||||
<span class="visible-xs visible-md">✔ Visible on x-small and medium</span>
|
||||
<span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-sm hidden-lg">Small and large</span>
|
||||
<span class="visible-sm visible-lg">✔ Visible on small and large</span>
|
||||
<span class="visible-sm-block visible-lg-block">✔ Visible on small and large</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
||||
<span class="visible-xs visible-lg">✔ Visible on x-small and large</span>
|
||||
<span class="visible-xs-block visible-lg-block">✔ Visible on x-small and large</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-sm hidden-md">Small and medium</span>
|
||||
<span class="visible-sm visible-md">✔ Visible on small and medium</span>
|
||||
<span class="visible-sm-block visible-md-block">✔ Visible on small and medium</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -2829,48 +2861,48 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<div class="row responsive-utilities-test hidden-on">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-xs">Extra small</span>
|
||||
<span class="visible-xs">✔ Hidden on x-small</span>
|
||||
<span class="visible-xs-block">✔ Hidden on x-small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm">Small</span>
|
||||
<span class="visible-sm">✔ Hidden on small</span>
|
||||
<span class="visible-sm-block">✔ Hidden on small</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md">Medium</span>
|
||||
<span class="visible-md">✔ Hidden on medium</span>
|
||||
<span class="visible-md-block">✔ Hidden on medium</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-lg">Large</span>
|
||||
<span class="visible-lg">✔ Hidden on large</span>
|
||||
<span class="visible-lg-block">✔ Hidden on large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responsive-utilities-test hidden-on">
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
||||
<span class="visible-xs visible-sm">✔ Hidden on x-small and small</span>
|
||||
<span class="visible-xs-block visible-sm-block">✔ Hidden on x-small and small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-md hidden-lg">Medium and large</span>
|
||||
<span class="visible-md visible-lg">✔ Hidden on medium and large</span>
|
||||
<span class="visible-md-block visible-lg-block">✔ Hidden on medium and large</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
||||
<span class="visible-xs visible-md">✔ Hidden on x-small and medium</span>
|
||||
<span class="visible-xs-block visible-md-block">✔ Hidden on x-small and medium</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-sm hidden-lg">Small and large</span>
|
||||
<span class="visible-sm visible-lg">✔ Hidden on small and large</span>
|
||||
<span class="visible-sm-block visible-lg-block">✔ Hidden on small and large</span>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
||||
<span class="visible-xs visible-lg">✔ Hidden on x-small and large</span>
|
||||
<span class="visible-xs-block visible-lg-block">✔ Hidden on x-small and large</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<span class="hidden-sm hidden-md">Small and medium</span>
|
||||
<span class="visible-sm visible-md">✔ Hidden on small and medium</span>
|
||||
<span class="visible-sm-block visible-md-block">✔ Hidden on small and medium</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
&:focus {
|
||||
// Remove focus outline when dropdown JS adds it after closing the menu
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -91,7 +91,7 @@
|
|||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
color: @carousel-control-color;
|
||||
text-decoration: none;
|
||||
.opacity(.9);
|
||||
|
|
|
@ -774,6 +774,7 @@
|
|||
// Responsive utilities
|
||||
//
|
||||
// More easily include all the states for responsive-utilities.less.
|
||||
// Note: Deprecated .responsive-visibility() as of v3.2.0
|
||||
.responsive-visibility() {
|
||||
display: block !important;
|
||||
table& { display: table; }
|
||||
|
@ -782,6 +783,7 @@
|
|||
td& { display: table-cell !important; }
|
||||
}
|
||||
|
||||
// Note: Deprecated .responsive-invisibility() as of v3.2.0
|
||||
.responsive-invisibility() {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
.box-shadow(0 3px 9px rgba(0,0,0,.5));
|
||||
background-clip: padding-box;
|
||||
// Remove focus outline from opened modal
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
|
|
|
@ -200,7 +200,7 @@
|
|||
// We remove the `outline` here, but later compensate by attaching `:hover`
|
||||
// styles to `:focus`.
|
||||
&:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Bars
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
|
||||
// Visibility utilities
|
||||
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
|
||||
.visible-xs,
|
||||
.visible-sm,
|
||||
.visible-md,
|
||||
|
@ -30,26 +31,104 @@
|
|||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
.visible-xs-block,
|
||||
.visible-xs-inline,
|
||||
.visible-xs-inline-block,
|
||||
.visible-sm-block,
|
||||
.visible-sm-inline,
|
||||
.visible-sm-inline-block,
|
||||
.visible-md-block,
|
||||
.visible-md-inline,
|
||||
.visible-md-inline-block,
|
||||
.visible-lg-block,
|
||||
.visible-lg-inline,
|
||||
.visible-lg-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-xs-block {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-xs-inline {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-xs-inline-block {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-sm-block {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-sm-inline {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-sm-inline-block {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-md-block {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-md-inline {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-md-inline-block {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-lg-block {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-lg-inline {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-lg-inline-block {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
@ -77,6 +156,7 @@
|
|||
//
|
||||
// Media queries are placed on the inside to be mixin-friendly.
|
||||
|
||||
// Note: Deprecated .visible-print as of v3.2.0
|
||||
.visible-print {
|
||||
.responsive-invisibility();
|
||||
|
||||
|
@ -84,6 +164,27 @@
|
|||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-print-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-print {
|
||||
@media print {
|
||||
|
|
Loading…
Reference in New Issue