mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 13:43:11 +02:00
Code Issues Releases Wiki Activity

Move grid/container styles to grid.less; update docs; add offsetting back

Browse Source
This commit is contained in:
Mark Otto
2013-01-17 00:42:31 -08:00
parent 255cb87734
commit 687d4a3eeb
7 changed files with 163 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
docs/assets/css/bootstrap.css vendored
View File

@@ -204,16 +204,14 @@ table {
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
}
@@ -726,6 +724,94 @@ pre code {
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
[class^="span"] {
float: left;
}
.span1 {
width: 8.3333333%;
}
.span2 {
width: 16.6666667%;
}
.span3 {
width: 25%;
}
.span4 {
width: 33.3333333%;
}
.span5 {
width: 41.666666667%;
}
.span6 {
width: 50%;
}
.span7 {
width: 58.333333333%;
}
.span8 {
width: 66.666666667%;
}
.span9 {
width: 75%;
}
.span10 {
width: 83.333333333%;
}
.span11 {
width: 91.666666667%;
}
.offset1 {
margin-left: 8.3333333%;
}
.offset2 {
margin-left: 16.6666667%;
}
.offset3 {
margin-left: 25%;
}
.offset4 {
margin-left: 33.3333333%;
}
.offset5 {
margin-left: 41.666666667%;
}
.offset6 {
margin-left: 50%;
}
.offset7 {
margin-left: 58.333333333%;
}
.offset8 {
margin-left: 66.666666667%;
}
.offset9 {
margin-left: 75%;
}
.offset10 {
margin-left: 83.333333333%;
}
.offset11 {
margin-left: 91.666666667%;
}
}
@media screen and (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1170px;
}
[class^="span"] {
padding-right: 15px;
padding-left: 15px;
}
}
[class*="span"].pull-right {
float: right;
}
@@ -4544,69 +4630,6 @@ a.badge:hover {
position: fixed;
}
@media screen and (min-width: 768px) {
[class^="span"] {
float: left;
}
.span1 {
width: 8.3333333%;
}
.span2 {
width: 16.6666667%;
}
.span3 {
width: 25%;
}
.span4 {
width: 33.3333333%;
}
.span5 {
width: 41.666666667%;
}
.span6 {
width: 50%;
}
.span7 {
width: 58.333333333%;
}
.span8 {
width: 66.666666667%;
}
.span9 {
width: 75%;
}
.span10 {
width: 83.333333333%;
}
.span11 {
width: 91.666666667%;
}
}
@media screen and (min-width: 992px) {
{
/* body {
font-size: 1.6rem;
font-size: 16px;
}
*/
}
.container {
max-width: 940px;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1170px;
}
[class^="span"] {
padding-right: 15px;
padding-left: 15px;
}
}
/*
// Responsive
// -------------------------------------------------------------

3
docs/assets/css/docs.css
View File

@@ -139,6 +139,9 @@ section > ul li {
/* Special grid styles
-------------------------------------------------- */
.show-grid {
margin-bottom: 15px;
}
.show-grid [class^="span"] {
padding-top: 10px;
padding-bottom: 10px;

11
docs/css.html
View File

@@ -83,7 +83,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
<li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -105,6 +105,7 @@
<div class="page-header">
<h1>Global settings</h1>
</div>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3>Requires HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
@@ -115,6 +116,12 @@
&lt;/html&gt;
</pre>
<h3>Mobile first</h3>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>:</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -554,7 +561,7 @@
<h2>Nesting columns</h2>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns

11
docs/templates/pages/css.mustache vendored
View File

@@ -15,7 +15,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
<li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -37,6 +37,7 @@
<div class="page-header">
<h1>Global settings</h1>
</div>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3>Requires HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
@@ -47,6 +48,12 @@
&lt;/html&gt;
</pre>
<h3>Mobile first</h3>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>:</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -494,7 +501,7 @@
<h2>Nesting columns</h2>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns