mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-24 14:04:09 +03:00
docs changes, more type improvements, add grid system basics back
This commit is contained in:
Mark Otto
+101
-102
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user