root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Better grid template; link color change in docs navbar

This commit is contained in:
Mark Otto 2013-05-16 22:11:31 -07:00
parent 5fbb9e9f5d
commit 5f7352a6fe
3 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.css
View File

@ -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;

1
docs/css.html
View File

@ -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>

22
docs/examples/grid.html
View File

@ -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 -->