docs changes, more type improvements, add grid system basics back
This commit is contained in:
Mark Otto
parent
09696143e0
commit
267690eb1b
|
|
@ -19,14 +19,19 @@ body {
|
|||
font-size: 14px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
p {
|
||||
margin: 15px 0;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
font-size: 2rem;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.page-header {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 19px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -42,7 +47,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1rem 0;
|
||||
margin: 20px 0 10px;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
|
|
@ -76,10 +81,8 @@ h4 {
|
|||
h5 {
|
||||
font-size: 16px;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 1.5em;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -97,6 +100,23 @@ li ol {
|
|||
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 {
|
||||
color: #428bca;
|
||||
|
|
@ -128,9 +148,39 @@ a:hover {
|
|||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
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 {
|
||||
|
|
@ -141,10 +191,11 @@ a:hover {
|
|||
|
||||
.navbar .brand {
|
||||
display: inline-block;
|
||||
padding: 4px 15px;
|
||||
padding: 7px 15px;
|
||||
font-size: 1.8rem;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar .brand:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -155,9 +206,9 @@ a:hover {
|
|||
margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
line-height: 20px;
|
||||
}
|
||||
.navbar .nav > li > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.navbar .nav > .active > a {
|
||||
|
|
@ -166,21 +217,20 @@ a:hover {
|
|||
|
||||
.btn-navbar {
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
padding: 8px 10px;
|
||||
padding: 10px 12px;
|
||||
background-color: #ddd;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-navbar .icon-bar {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.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 */
|
||||
@media screen and (max-device-width: 480px) {
|
||||
html {
|
||||
|
|
@ -232,14 +298,30 @@ a:hover {
|
|||
h5 { }
|
||||
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) {
|
||||
|
||||
body {
|
||||
/* body {
|
||||
font-size: 1.6rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
*/
|
||||
.container {
|
||||
width: 940px;
|
||||
margin-left: auto;
|
||||
|
|
@ -252,8 +334,9 @@ a:hover {
|
|||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar .nav {
|
||||
overflow: hidden; /* clearfix */
|
||||
|
|
@ -272,6 +355,7 @@ a:hover {
|
|||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
float: left;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
@ -296,11 +380,39 @@ body > .container {
|
|||
------------------------- */
|
||||
.bs-docs-jumbotron {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px 15px;
|
||||
color: #fff;
|
||||
background-color: #b94a48;
|
||||
}
|
||||
.bs-docs-jumbotron h1 {
|
||||
margin: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@
|
|||
})
|
||||
|
||||
// add tipsies to grid for scaffolding
|
||||
if ($('#gridSystem').length) {
|
||||
$('#gridSystem').tooltip({
|
||||
selector: '.show-grid > div:not(.tooltip)'
|
||||
, title: function () { return $(this).width() + 'px' }
|
||||
})
|
||||
}
|
||||
// if ($('#gridSystem').length) {
|
||||
// $('#gridSystem').tooltip({
|
||||
// selector: '.show-grid > div:not(.tooltip)'
|
||||
// , title: function () { return $(this).width() + 'px' }
|
||||
// })
|
||||
// }
|
||||
|
||||
// tooltip demo
|
||||
$('.tooltip-demo').tooltip({
|
||||
|
|
|
|||
203
docs/css.html
203
docs/css.html
|
|
@ -84,9 +84,9 @@
|
|||
<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="#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="#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="#forms"><i class="glyphicon-chevron-right"></i> Forms</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span9">
|
||||
Level 1: 9 columns
|
||||
<div class="row">
|
||||
<div class="span6">Level 2: 6 columns</div>
|
||||
<div class="span3">Level 2: 6 columns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span9">
|
||||
Level 1: 9 columns
|
||||
<div class="row">
|
||||
<div class="span6">Level 2: 6 columns</div>
|
||||
<div class="span3">Level 2: 6 columns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Code
|
||||
================================================== -->
|
||||
<section id="code">
|
||||
|
|
|
|||
|
|
@ -135,12 +135,15 @@
|
|||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ ├── bootstrap.min.js
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
└── fonts/
|
||||
├── glyphiconshalflings-regular.eot
|
||||
├── glyphiconshalflings-regular.otf
|
||||
├── glyphiconshalflings-regular.svg
|
||||
├── glyphiconshalflings-regular.ttf
|
||||
└── glyphiconshalflings-regular.woff
|
||||
</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>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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
<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="#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="#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="#forms"><i class="glyphicon-chevron-right"></i> Forms</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span9">
|
||||
Level 1: 9 columns
|
||||
<div class="row">
|
||||
<div class="span6">Level 2: 6 columns</div>
|
||||
<div class="span3">Level 2: 6 columns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="span9">
|
||||
Level 1: 9 columns
|
||||
<div class="row">
|
||||
<div class="span6">Level 2: 6 columns</div>
|
||||
<div class="span3">Level 2: 6 columns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Code
|
||||
================================================== -->
|
||||
<section id="code">
|
||||
|
|
|
|||
|
|
@ -67,12 +67,15 @@
|
|||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ ├── bootstrap.min.js
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
└── fonts/
|
||||
├── glyphiconshalflings-regular.eot
|
||||
├── glyphiconshalflings-regular.otf
|
||||
├── glyphiconshalflings-regular.svg
|
||||
├── glyphiconshalflings-regular.ttf
|
||||
└── glyphiconshalflings-regular.woff
|
||||
</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>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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue