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

refinement to the responsive section

Browse Source
This commit is contained in:
Mark Otto 2011-10-18 08:11:18 -07:00
parent 369b9720c6
commit a5d2450e88
2 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/assets/css/docs.css
View File

@ -346,19 +346,3 @@ h2 + table {
min-width: 748px; min-width: 748px;
} }
} }
.supported-devices {
margin-bottom: 9px;
color: #777;
}
.supported-devices strong {
display: block;
font-size: 14px;
line-height: 18px;
}
.supported-devices small {
font-size: 12px;
}

70
docs/index.html
View File

@ -413,33 +413,55 @@
</div> </div>
<div class="span8"> <div class="span8">
<h2>Supported devices</h2> <h2>Supported devices</h2>
<table class="supported-devices"> <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<table class="zebra-striped">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>Smartphones</td>
<strong>Under 480px</strong> <td>480px and below</td>
<small>Smartphones</small> <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</td> </tr>
<td> <tr>
<strong>480px to 768px</strong> <td>Portrait tablets</td>
<small>Portrait tablet</small> <td>480px to 768px</td>
</td> <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
<td> </tr>
<strong>768px to 940px</strong> <tr>
<small>Landscape tablet</small> <td>Landscape tablets</td>
</td> <td>768px to 940px</td>
<td> <td>44px</td>
<strong>940px and up</strong> <td>20px</td>
<small>Default</small> </tr>
</td> <tr>
<td> <td>Default</td>
<strong>1170px and up</strong> <td>940px and up</td>
<small>Large screens</small> <td>60px</td>
</td> <td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1210px and up</td>
<td>70px</td>
<td>30px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p>
<h3>What they do</h3>
<p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
</div> </div>
</div> </div>
@ -448,7 +470,7 @@
<!-- Media query code --> <!-- Media query code -->
<h2>Using the media queries</h2> <h2>Using the media queries</h2>
<div class="row"> <div class="row">
<div class="span4"> <div class="span5">
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p> <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
<ol> <ol>
<li>Use the compiled responsive version, bootstrap.reponsive.css</li> <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
@ -457,7 +479,7 @@
</ol> </ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div> </div>
<div class="span8"> <div class="span7">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
// Landscape phones and down // Landscape phones and down
@media (max-width: 480px) { ... } @media (max-width: 480px) { ... }