mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
tweaks to the responsive layout to improve type
This commit is contained in:
parent
fb7fbdb278
commit
b4c0d2a6b2
6 changed files with 40 additions and 21 deletions
12
bootstrap.css
vendored
12
bootstrap.css
vendored
|
@ -6,11 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
<<<<<<< HEAD
|
||||
* Date: Sat Oct 22 15:49:12 PDT 2011
|
||||
=======
|
||||
* Date: Fri Oct 21 11:54:44 CDT 2011
|
||||
>>>>>>> 2e09ffe3832106fab60dc01cc3159c13029bdf68
|
||||
* Date: Sat Oct 22 22:49:01 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
@ -520,7 +516,7 @@ pre {
|
|||
background-color: #f5f5f5;
|
||||
display: block;
|
||||
padding: 8.5px;
|
||||
margin: 0 0 18px;
|
||||
margin: 0 0 9px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
|
@ -530,7 +526,7 @@ pre {
|
|||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
/* Forms.less
|
||||
* Base styles for various input types, form layouts, and states
|
||||
|
@ -2270,7 +2266,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
@media (max-width: 480px) {
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
|
|
4
bootstrap.min.css
vendored
4
bootstrap.min.css
vendored
|
@ -89,7 +89,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c
|
|||
address{display:block;line-height:18px;margin-bottom:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}
|
||||
form{margin-bottom:18px;}
|
||||
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
|
||||
|
@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.media-grid li{display:inline;}
|
||||
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
|
||||
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
|
||||
@media (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -630,7 +630,7 @@
|
|||
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&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">
|
||||
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
<script src="/path/to/less.js"></script>
|
||||
</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>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
// Undo negative margin on rows
|
||||
.row {
|
||||
|
|
|
@ -24,7 +24,7 @@ p {
|
|||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
color: @grayDark;
|
||||
text-rendering: optimizelegibility;
|
||||
text-rendering: optimizelegibility; // Fix the character spacing for headings
|
||||
small {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
@ -185,7 +185,7 @@ pre {
|
|||
background-color: #f5f5f5;
|
||||
display: block;
|
||||
padding: (@baseLineHeight - 1) / 2;
|
||||
margin: 0 0 @baseLineHeight;
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
line-height: @baseLineHeight;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
|
@ -193,6 +193,5 @@ pre {
|
|||
.border-radius(3px);
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
word-break: break-all;
|
||||
}
|
Loading…
Reference in a new issue