mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-07-31 19:00:23 +02:00
Code Issues Releases Wiki Activity

docs changes, more type improvements, add grid system basics back

Browse Source
This commit is contained in:
Mark Otto
2013-01-15 14:30:00 -08:00
parent 09696143e0
commit 267690eb1b
6 changed files with 354 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
docs/assets/css/docs.css
View File

@@ -19,14 +19,19 @@ body {
font-size: 14px; font-size: 14px;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.5; line-height: 1.5;
color: #333; color: #3a3a3a;
} }
p { p {
margin: 15px 0; margin: 0 0 10px;
} }
.lead { .lead {
font-size: 2rem; font-size: 18px;
font-size: 20px; font-size: 1.8rem;
}
.page-header {
margin-top: 30px;
margin-bottom: 19px;
border-bottom: 1px solid #ddd;
} }
@@ -42,7 +47,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 1rem 0; margin: 20px 0 10px;
color: inherit; color: inherit;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
@@ -76,10 +81,8 @@ h4 {
h5 { h5 {
font-size: 16px; font-size: 16px;
font-size: 1.6rem; font-size: 1.6rem;
margin-bottom: 1.5em;
} }
h6 { h6 {
margin-bottom: 1.5em;
font-weight: normal; font-weight: normal;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
@@ -97,6 +100,23 @@ li ol {
margin-bottom: 0; margin-bottom: 0;
} }
hr {
margin: 20px 0 19px;
border: 0;
border-top: 1px solid #ddd;
}
pre, code {
color: #c7254e;
}
code {
padding: 1px 3px;
font-size: 90%;
white-space: nowrap;
border-radius: 3px;
background-color: #f9f2f4;
}
a { a {
color: #428bca; color: #428bca;
@@ -128,9 +148,39 @@ a:hover {
display: block; display: block;
} }
.nav > li > a { .nav > li > a {
position: relative;
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
} }
.nav > li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.nav-list > li > a {
margin-bottom: -1px; /* tuck up the following item to make 1px border */
border: 1px solid #ddd;
}
.nav-list > li:first-child > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.nav-list > li:last-child > a {
margin-bottom: 0; /* undo the tuck */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
color: #fff;
background-color: #428bca;
border-color: #428bca;
z-index: 2; /* Bring active item forward so border sits on top of next element */
}
.navbar { .navbar {
@@ -141,10 +191,11 @@ a:hover {
.navbar .brand { .navbar .brand {
display: inline-block; display: inline-block;
padding: 4px 15px; padding: 7px 15px;
font-size: 1.8rem; font-size: 1.8rem;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 1;
} }
.navbar .brand:hover { .navbar .brand:hover {
text-decoration: none; text-decoration: none;
@@ -155,9 +206,9 @@ a:hover {
margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */ margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */
} }
.navbar .nav > li > a { .navbar .nav > li > a {
line-height: 20px;
} }
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
text-decoration: none;
background-color: #ddd; background-color: #ddd;
} }
.navbar .nav > .active > a { .navbar .nav > .active > a {
@@ -166,21 +217,20 @@ a:hover {
.btn-navbar { .btn-navbar {
float: right; float: right;
margin-top: 3px; padding: 10px 12px;
padding: 8px 10px;
background-color: #ddd; background-color: #ddd;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
} }
.btn-navbar .icon-bar { .btn-navbar .icon-bar {
display: block; display: block;
width: 18px; width: 20px;
height: 3px; height: 2px;
background-color: #fff; background-color: #fff;
border-radius: 1px; border-radius: 1px;
} }
.btn-navbar .icon-bar + .icon-bar { .btn-navbar .icon-bar + .icon-bar {
margin-top: 2px; margin-top: 3px;
} }
@@ -208,6 +258,22 @@ a:hover {
.row {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* clearfix */
}
[class^="span"] {
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
}
/* Disable iOS/WinMobile font size changes */ /* Disable iOS/WinMobile font size changes */
@media screen and (max-device-width: 480px) { @media screen and (max-device-width: 480px) {
html { html {
@@ -232,14 +298,30 @@ a:hover {
h5 { } h5 { }
h6 { } h6 { }
[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) { @media screen and (min-width: 992px) {
body { /* body {
font-size: 1.6rem; font-size: 1.6rem;
font-size: 16px; font-size: 16px;
} }
*/
.container { .container {
width: 940px; width: 940px;
margin-left: auto; margin-left: auto;
@@ -252,8 +334,9 @@ a:hover {
} }
.navbar .brand { .navbar .brand {
float: left; float: left;
padding-top: 7px; padding-top: 11px;
padding-bottom: 7px; padding-bottom: 11px;
margin-left: -15px;
} }
.navbar .nav { .navbar .nav {
overflow: hidden; /* clearfix */ overflow: hidden; /* clearfix */
@@ -272,6 +355,7 @@ a:hover {
display: none; display: none;
} }
.nav-collapse.collapse { .nav-collapse.collapse {
float: left;
height: auto !important; height: auto !important;
overflow: visible !important; overflow: visible !important;
} }
@@ -296,11 +380,39 @@ body > .container {
------------------------- */ ------------------------- */
.bs-docs-jumbotron { .bs-docs-jumbotron {
position: relative; position: relative;
padding: 15px; margin-bottom: 20px;
padding: 30px 15px;
color: #fff; color: #fff;
background-color: #b94a48; background-color: #b94a48;
} }
.bs-docs-jumbotron h1 { .bs-docs-jumbotron h1 {
margin: 0;
} }
.bs-docs-jumbotron p { .bs-docs-jumbotron p {
} margin-bottom: 0;
}
.bs-docs-example {
border: 1px solid #ddd;
padding: 14px;
margin-bottom: -1px;
}
.bs-docs-example + .prettyprint {
margin-top: 0;
}
.show-grid [class^="span"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}

12
docs/assets/js/application.js
View File

@@ -34,12 +34,12 @@
}) })
// add tipsies to grid for scaffolding // add tipsies to grid for scaffolding
if ($('#gridSystem').length) { // if ($('#gridSystem').length) {
$('#gridSystem').tooltip({ // $('#gridSystem').tooltip({
selector: '.show-grid > div:not(.tooltip)' // selector: '.show-grid > div:not(.tooltip)'
, title: function () { return $(this).width() + 'px' } // , title: function () { return $(this).width() + 'px' }
}) // })
} // }
// tooltip demo // tooltip demo
$('.tooltip-demo').tooltip({ $('.tooltip-demo').tooltip({

203
docs/css.html
View File

@@ -84,9 +84,9 @@
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <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 styles</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</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="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
<li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li> <li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li>
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
@@ -132,107 +132,6 @@
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Grid system</h1>
</div>
<h2>Live grid example</h2>
<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
</div>
<h3>Basic grid HTML</h3>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<h2>Offsetting columns</h2>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
<div class="row show-grid">
<div class="span6">
Level 2: 6 columns
</div>
<div class="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span9"&gt;
Level 1: 9 columns
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Typography <!-- Typography
================================================== --> ================================================== -->
@@ -586,6 +485,106 @@
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Grid system</h1>
</div>
<h2>Live grid example</h2>
<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
</div>
<h3>Basic grid HTML</h3>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<h2>Offsetting columns</h2>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
<div class="row show-grid">
<div class="span6">
Level 2: 6 columns
</div>
<div class="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span9"&gt;
Level 1: 9 columns
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Code <!-- Code
================================================== --> ================================================== -->
<section id="code"> <section id="code">

11
docs/getting-started.html
View File

@@ -135,12 +135,15 @@
├── js/ ├── js/
│ ├── bootstrap.js │ ├── bootstrap.js
│ ├── bootstrap.min.js │ ├── bootstrap.min.js
└── img/ └── fonts/
├── glyphicons-halflings.png ├── glyphiconshalflings-regular.eot
└── glyphicons-halflings-white.png ├── glyphiconshalflings-regular.otf
├── glyphiconshalflings-regular.svg
├── glyphiconshalflings-regular.ttf
└── glyphiconshalflings-regular.woff
</pre> </pre>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p> <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>Please note that all JavaScript plugins require jQuery to be included.</p> <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
</section> </section>

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

@@ -16,9 +16,9 @@
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <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 styles</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</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="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
<li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li> <li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li>
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
@@ -64,107 +64,6 @@
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Grid system</h1>
</div>
<h2>Live grid example</h2>
<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
</div>
<h3>Basic grid HTML</h3>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<h2>Offsetting columns</h2>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
<div class="row show-grid">
<div class="span6">
Level 2: 6 columns
</div>
<div class="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span9"&gt;
Level 1: 9 columns
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Typography <!-- Typography
================================================== --> ================================================== -->
@@ -526,6 +425,106 @@
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Grid system</h1>
</div>
<h2>Live grid example</h2>
<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
</div>
<h3>Basic grid HTML</h3>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<h2>Offsetting columns</h2>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
<div class="row show-grid">
<div class="span6">
Level 2: 6 columns
</div>
<div class="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span9"&gt;
Level 1: 9 columns
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Code <!-- Code
================================================== --> ================================================== -->
<section id="code"> <section id="code">

11
docs/templates/pages/getting-started.mustache vendored
View File

@@ -67,12 +67,15 @@
├── js/ ├── js/
│ ├── bootstrap.js │ ├── bootstrap.js
│ ├── bootstrap.min.js │ ├── bootstrap.min.js
└── img/ └── fonts/
├── glyphicons-halflings.png ├── glyphiconshalflings-regular.eot
└── glyphicons-halflings-white.png ├── glyphiconshalflings-regular.otf
├── glyphiconshalflings-regular.svg
├── glyphiconshalflings-regular.ttf
└── glyphiconshalflings-regular.woff
</pre> </pre>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p> <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>Please note that all JavaScript plugins require jQuery to be included.</p> <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
</section> </section>