follow up to #9963 and #10005: update docs to use .screen-*-min vars, update customizer as well; run grunt to adjust raw files
This commit is contained in:
parent
adac269f95
commit
ddd594c6e2
File diff suppressed because one or more lines are too long
14
css.html
14
css.html
|
@ -80,20 +80,20 @@ base_url: "../"
|
|||
/* No media query since this is the default in Bootstrap */
|
||||
|
||||
/* Small devices (tablets, 768px and up) */
|
||||
@media (min-width: @screen-sm) { ... }
|
||||
@media (min-width: @screen-sm-min) { ... }
|
||||
|
||||
/* Medium devices (desktops, 992px and up) */
|
||||
@media (min-width: @screen-md) { ... }
|
||||
@media (min-width: @screen-md-min) { ... }
|
||||
|
||||
/* Large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: @screen-lg) { ... }
|
||||
@media (min-width: @screen-lg-min) { ... }
|
||||
{% 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-sm) and (max-width: @screen-sm-max) { ... }
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
|
||||
@media (min-width: @screen-lg) { ... }
|
||||
@media (max-width: @screen-xs-max) { ... }
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
|
||||
@media (min-width: @screen-lg-min) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="grid-options">Grid options</h3>
|
||||
|
|
|
@ -471,16 +471,16 @@ base_url: "../"
|
|||
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label>@screen-xs</label>
|
||||
<input type="text" class="form-control" placeholder="480px" data-var="@screen-xs">
|
||||
<label>@screen-sm</label>
|
||||
<input type="text" class="form-control" placeholder="768px" data-var="@screen-sm">
|
||||
<label>@screen-xs-min</label>
|
||||
<input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
|
||||
<label>@screen-sm-min</label>
|
||||
<input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label>@screen-md</label>
|
||||
<input type="text" class="form-control" placeholder="992px" data-var="@screen-md">
|
||||
<label>@screen-lg</label>
|
||||
<input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg">
|
||||
<label>@screen-md-min</label>
|
||||
<input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
|
||||
<label>@screen-lg-min</label>
|
||||
<input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -490,18 +490,18 @@ base_url: "../"
|
|||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-tablet</label>
|
||||
<input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
|
||||
<p class="help-block">For <code>@screen-sm</code> and up.</p>
|
||||
<p class="help-block">For <code>@screen-sm-min</code> and up.</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-desktop</label>
|
||||
<input type="text" class="form-control" placeholder="940px" data-var="@container-desktop">
|
||||
<p class="help-block">For <code>@screen-md</code> and up.</p>
|
||||
<p class="help-block">For <code>@screen-md-min</code> and up.</p>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@container-lg-desktop</label>
|
||||
<input type="text" class="form-control" placeholder="1170px" data-var="@container-lg-desktop">
|
||||
<p class="help-block">For <code>@screen-lg</code> and up.</p>
|
||||
<p class="help-block">For <code>@screen-lg-min</code> and up.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -524,7 +524,7 @@ base_url: "../"
|
|||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<label>@grid-float-breakpoint</label>
|
||||
<input type="text" class="form-control" placeholder="@screen-sm" data-var="@grid-float-breakpoint">
|
||||
<input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
|
||||
<p class="help-block">Point at which the navbar stops collapsing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue