@@ -66,7 +66,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -66,7 +66,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<pclass="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes <ahref="#grid-example">predefined classes</a> for this, as well as powerful <ahref="#grid-less">mixins for generating semantic layouts</a>.</p>
<pclass="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes <ahref="#grid-example">predefined classes</a> for this, as well as powerful <ahref="#grid-less">mixins for generating semantic layouts</a>.</p>
<h3id="grid-example">Grid example</h3>
<h3id="grid-example">Grid example</h3>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-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), even at mobile resolutions.</p>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-lg-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-lg-*</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), even at mobile resolutions.</p>
<divclass="bs-docs-grid">
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
...
@@ -149,7 +149,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -149,7 +149,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3id="grid-nesting">Nesting columns</h3>
<h3id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9">
<divclass="col col-lg-9">
Level 1: 9 columns
Level 1: 9 columns
...
@@ -1621,7 +1621,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1621,7 +1621,7 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
{% endhighlight %}
<h3id="forms-control-sizes">Control sizing</h3>
<h3id="forms-control-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-span-*</code> classes.</p>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
<h4>Relative sizing</h4>
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
<p>Create larger or smaller form controls that match button sizes.</p>