mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 21:49:09 +01:00
Code Issues Releases Wiki Activity

follow up to #9963 and #10005: update docs to use .screen-*-min vars, update customizer as well; run grunt to adjust raw files

Browse Source
This commit is contained in:
Mark Otto 2013-08-23 23:33:16 -07:00
parent adac269f95
commit ddd594c6e2
3 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/raw-files.js
View File

File diff suppressed because one or more lines are too long

14
css.html
View File

@ -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>

24
customize.html
View File

@ -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>