rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

fixes #9317: document media queries

Browse Source
This commit is contained in:
Mark Otto 2013-08-12 00:48:36 -07:00
parent 86fd07f93c
commit aefed0ada9
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-css.html
View File

@ -15,6 +15,7 @@
<li>
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Available options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>

23
css.html
View File

@ -83,6 +83,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 our 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 (tablets, 992px and up) */
@media (min-width: @screen-desktop) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }
{% endhighlight %}
<p>We ocassionally 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">