mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-01 11:20:26 +02:00
Code Issues Releases Wiki Activity

adding nested columns to the grid section

Browse Source
This commit is contained in:
Mark Otto
2011-09-09 10:04:07 -07:00
parent df3ca4d94a
commit 53135839f5
2 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/assets/css/docs.css
View File

@@ -142,15 +142,21 @@ section > .row {
} }
.show-grid [class*="span"] { .show-grid [class*="span"] {
background-color: #eee; background-color: #eee;
background-color: rgba(0,0,0,.1);
text-align: center; text-align: center;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
height: 30px; min-height: 30px;
line-height: 30px; line-height: 30px;
} }
.show-grid:hover [class*="span"] { .show-grid:hover [class*="span"] {
background: rgba(0, 0, 0, 0.25); background-color: #ddd;
background-color: rgba(0,0,0,.2);
}
.show-grid .show-grid {
margin-top: 0;
margin-bottom: 0;
} }
/* Render mini layout previews /* Render mini layout previews
-------------------------------------------------- */ -------------------------------------------------- */

79
docs/index.html
View File

@@ -196,22 +196,22 @@
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="16 column layout"> <div class="row show-grid" title="16 column layout">
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="8 column layout"> <div class="row show-grid" title="8 column layout">
<div class="span2">2</div> <div class="span2">2</div>
@@ -238,13 +238,13 @@
<div class="span4">4</div> <div class="span4">4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="Default three column layout"> <div class="row show-grid" title="Default three column layout">
<div class="span-one-third column">1/3</div> <div class="span-one-third">1/3</div>
<div class="span-one-third column">1/3</div> <div class="span-one-third">1/3</div>
<div class="span-one-third column">1/3</div> <div class="span-one-third">1/3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="One-third and two-thirds layout"> <div class="row show-grid" title="One-third and two-thirds layout">
<div class="span-one-third column">1/3</div> <div class="span-one-third">1/3</div>
<div class="span-two-thirds column">2/3</div> <div class="span-two-thirds">2/3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="Irregular three column layout"> <div class="row show-grid" title="Irregular three column layout">
<div class="span4">4</div> <div class="span4">4</div>
@@ -262,25 +262,44 @@
<div class="row show-grid" title="Unnecessary single column layout"> <div class="row show-grid" title="Unnecessary single column layout">
<div class="span16">16</div> <div class="span16">16</div>
</div><!-- /row --> </div><!-- /row -->
<h4>Offsetting columns</h4> <h3>Offsetting columns</h3>
<div class="row show-grid"> <div class="row show-grid">
<div class="span4">4</div> <div class="span4">4</div>
<div class="span8 columns offset4">8 offset 4</div> <div class="span8 offset4">8 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span-one-third columns offset-two-thirds">1/3 offset 2/3s</div> <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 offset4">4 offset 4</div>
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 offset4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span5 columns offset3">5 offset 3</div> <div class="span5 offset3">5 offset 3</div>
<div class="span5 columns offset3">5 offset 3</div> <div class="span5 offset3">5 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span10 columns offset6">10 offset 6</div> <div class="span10 offset6">10 offset 6</div>
</div><!-- /row --> </div><!-- /row -->
<h3>Nesting columns</h3>
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
<div class="row show-grid">
<div class="span10">
Level 1 of column
<div class="row show-grid">
<div class="span5">
Level 2
</div>
<div class="span5">
Level 2
</div>
</div>
</div>
<div class="span6">
Level 1 of column
</div>
</div>
</section> </section>
@@ -1540,4 +1559,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</body> </body>
</html> </html>