1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 22:16:38 +02:00

tweaks to the responsive layout to improve type

This commit is contained in:
Mark Otto
2011-10-22 22:49:37 -07:00
parent fb7fbdb278
commit b4c0d2a6b2
6 changed files with 40 additions and 21 deletions

View File

@@ -21,6 +21,8 @@ section {
/* Tweak topbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar-fixed .brand {
padding-right: 0;
padding-left: 0;
float: right;
font-weight: bold;
color: #000;
@@ -316,16 +318,24 @@ h2 + table {
-------------------------------------------------- */
@media (max-width: 480px) {
/* Hide the nav for now */
body > .navbar-fixed .nav {
display: none;
}
.large-bird {
display: none;
/* Change up some type stuff */
h1 small {
display: block;
line-height: 20px;
}
/* Adjust the jumbotron */
.jumbotron h1,
.jumbotron p {
margin-right: 0;
}
.jumbotron h1 {
font-size: 36px;
font-size: 45px;
margin-right: 0;
}
.jumbotron p {
@@ -338,6 +348,20 @@ h2 + table {
width: auto;
margin: 36px 0;
}
.jumbotron .btn {
font-size: 18px;
padding: 10px 14px;
}
/* Popovers */
.large-bird {
display: none;
}
.popover-well .popover-wrapper {
margin-left: 0;
}
}
@media (min-width: 768px) and (max-width: 940px) {

View File

@@ -630,7 +630,7 @@
<p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around <code>&lt;p&gt;</code> and <code>&lt;small&gt;</code> tags. Use the <code>&lt;small&gt;</code> element to cite your source and you'll get an em dash <code>&amp;mdash;</code> before it.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<small>Dr. Julius Hibbert</small>
<small>Someone famous</small>
</blockquote>
</div>
<div class="span7">
@@ -2140,7 +2140,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<td>Javascript</td>
<td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
<pre class="prettyprint linenums">
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
@@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</td>
</tr>
<tr>
<td>Less Mac app</td>
<td>Mac app</td>
<td>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>