Better grid template; link color change in docs navbar
This commit is contained in:
parent
5fbb9e9f5d
commit
5f7352a6fe
|
@ -25,7 +25,7 @@ body {
|
|||
color: #fff;
|
||||
}
|
||||
.bs-docs-nav .navbar-nav > li > a {
|
||||
color: #dfc9c8;
|
||||
color: #e6cac8;
|
||||
}
|
||||
.bs-docs-nav .navbar-nav > li > a:hover {
|
||||
color: #fff;
|
||||
|
|
|
@ -67,6 +67,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
|
|||
|
||||
<h3 id="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-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>
|
||||
<p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
<div class="col col-lg-1">1</div>
|
||||
|
|
|
@ -11,9 +11,16 @@ title: Grid template
|
|||
padding-right: 15px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.row .row {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[class*="col-lg-"] {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
@ -49,6 +56,19 @@ title: Grid template
|
|||
</div>
|
||||
|
||||
<h4>Full width, single column</h4>
|
||||
<p class="text-muted">No grid classes are necessary for full-width elements.</p>
|
||||
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
|
||||
|
||||
<h4>Two columns with two nested columns</h4>
|
||||
<div class="row">
|
||||
<div class="col col-lg-8">
|
||||
.col .col-lg-8
|
||||
<div class="row">
|
||||
<div class="col col-lg-6">.col .col-lg-6</div>
|
||||
<div class="col col-lg-6">.col .col-lg-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-lg-4">.col .col-lg-4</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
|
Loading…
Reference in New Issue