mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 22:16:38 +02:00
Code Issues Releases Wiki Activity

adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags

Browse Source
This commit is contained in:
Mark Otto
2011-10-17 23:45:35 -07:00
parent ae5c5e1063
commit 369b9720c6
6 changed files with 100 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/assets/css/docs.css
View File

@@ -309,7 +309,7 @@ pre.prettyprint {
/* Make tables spaced out a bit more */
h2 + table {
margin-top: 10px;
margin-top: 5px;
}
/* Responsive Docs
@@ -347,3 +347,18 @@ h2 + table {
}
}
.supported-devices {
margin-bottom: 9px;
color: #777;
}
.supported-devices strong {
display: block;
font-size: 14px;
line-height: 18px;
}
.supported-devices small {
font-size: 12px;
}

BIN
docs/assets/img/responsive-illustrations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

80
docs/index.html
View File

@@ -399,6 +399,86 @@
<!-- Responsive design
================================================== -->
<section id="responsive">
<div class="page-header">
<h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
</div>
<!-- Supported devices -->
<div class="row">
<div class="span4">
<img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
</div>
<div class="span8">
<h2>Supported devices</h2>
<table class="supported-devices">
<tbody>
<tr>
<td>
<strong>Under 480px</strong>
<small>Smartphones</small>
</td>
<td>
<strong>480px to 768px</strong>
<small>Portrait tablet</small>
</td>
<td>
<strong>768px to 940px</strong>
<small>Landscape tablet</small>
</td>
<td>
<strong>940px and up</strong>
<small>Default</small>
</td>
<td>
<strong>1170px and up</strong>
<small>Large screens</small>
</td>
</tr>
</tbody>
</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>
</div>
</div>
<br>
<!-- Media query code -->
<h2>Using the media queries</h2>
<div class="row">
<div class="span4">
<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>
<li>Use the compiled responsive version, bootstrap.reponsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Compile responsive.less as a separate file and include that</li>
</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>
</div>
<div class="span8">
<pre class="prettyprint linenums">
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (min-width: 480px) and (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 940px) { ... }
// Large desktop
@media (min-width: 1210px) { .. }
</pre>
</div>
</div>
</section>
<!-- Typography
================================================== -->
<section id="typography">