Skip to content

Commit 5fc62c5

Browse files
mdomdo
committed
clear up scaffolding page to separate fixed from fluid grid systems
1 parent 16f2e0e commit 5fc62c5

File tree

6 files changed

+256
-76
lines changed

6 files changed

+256
-76
lines changed

‎docs/assets/bootstrap.zip

3 Bytes
Binary file not shown.

‎docs/assets/css/bootstrap-responsive.css

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -205,40 +205,40 @@
205205
.row-fluid > [class*="span"]:first-child {
206206
margin-left: 0;
207207
}
208-
.row-fluid .span1 {
208+
.row-fluid > .span1 {
209209
width: 5.801104972%;
210210
}
211-
.row-fluid .span2 {
211+
.row-fluid > .span2 {
212212
width: 14.364640883%;
213213
}
214-
.row-fluid .span3 {
214+
.row-fluid > .span3 {
215215
width: 22.928176794%;
216216
}
217-
.row-fluid .span4 {
217+
.row-fluid > .span4 {
218218
width: 31.491712705%;
219219
}
220-
.row-fluid .span5 {
220+
.row-fluid > .span5 {
221221
width: 40.055248616%;
222222
}
223-
.row-fluid .span6 {
223+
.row-fluid > .span6 {
224224
width: 48.618784527%;
225225
}
226-
.row-fluid .span7 {
226+
.row-fluid > .span7 {
227227
width: 57.182320438000005%;
228228
}
229-
.row-fluid .span8 {
229+
.row-fluid > .span8 {
230230
width: 65.74585634900001%;
231231
}
232-
.row-fluid .span9 {
232+
.row-fluid > .span9 {
233233
width: 74.30939226%;
234234
}
235-
.row-fluid .span10 {
235+
.row-fluid > .span10 {
236236
width: 82.87292817100001%;
237237
}
238-
.row-fluid .span11 {
238+
.row-fluid > .span11 {
239239
width: 91.436464082%;
240240
}
241-
.row-fluid .span12 {
241+
.row-fluid > .span12 {
242242
width: 99.999999993%;
243243
}
244244
input.span1, textarea.span1, .uneditable-input.span1 {
@@ -486,40 +486,40 @@
486486
.row-fluid > [class*="span"]:first-child {
487487
margin-left: 0;
488488
}
489-
.row-fluid .span1 {
489+
.row-fluid > .span1 {
490490
width: 5.982905983%;
491491
}
492-
.row-fluid .span2 {
492+
.row-fluid > .span2 {
493493
width: 14.529914530000001%;
494494
}
495-
.row-fluid .span3 {
495+
.row-fluid > .span3 {
496496
width: 23.076923077%;
497497
}
498-
.row-fluid .span4 {
498+
.row-fluid > .span4 {
499499
width: 31.623931624%;
500500
}
501-
.row-fluid .span5 {
501+
.row-fluid > .span5 {
502502
width: 40.170940171000005%;
503503
}
504-
.row-fluid .span6 {
504+
.row-fluid > .span6 {
505505
width: 48.717948718%;
506506
}
507-
.row-fluid .span7 {
507+
.row-fluid > .span7 {
508508
width: 57.264957265%;
509509
}
510-
.row-fluid .span8 {
510+
.row-fluid > .span8 {
511511
width: 65.81196581200001%;
512512
}
513-
.row-fluid .span9 {
513+
.row-fluid > .span9 {
514514
width: 74.358974359%;
515515
}
516-
.row-fluid .span10 {
516+
.row-fluid > .span10 {
517517
width: 82.905982906%;
518518
}
519-
.row-fluid .span11 {
519+
.row-fluid > .span11 {
520520
width: 91.45299145300001%;
521521
}
522-
.row-fluid .span12 {
522+
.row-fluid > .span12 {
523523
width: 100%;
524524
}
525525
input.span1, textarea.span1, .uneditable-input.span1 {

‎docs/assets/css/bootstrap.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -212,40 +212,40 @@ a:hover {
212212
.row-fluid > [class*="span"]:first-child {
213213
margin-left: 0;
214214
}
215-
.row-fluid .span1 {
215+
.row-fluid > .span1 {
216216
width: 6.382978723%;
217217
}
218-
.row-fluid .span2 {
218+
.row-fluid > .span2 {
219219
width: 14.89361702%;
220220
}
221-
.row-fluid .span3 {
221+
.row-fluid > .span3 {
222222
width: 23.404255317%;
223223
}
224-
.row-fluid .span4 {
224+
.row-fluid > .span4 {
225225
width: 31.914893614%;
226226
}
227-
.row-fluid .span5 {
227+
.row-fluid > .span5 {
228228
width: 40.425531911%;
229229
}
230-
.row-fluid .span6 {
230+
.row-fluid > .span6 {
231231
width: 48.93617020799999%;
232232
}
233-
.row-fluid .span7 {
233+
.row-fluid > .span7 {
234234
width: 57.446808505%;
235235
}
236-
.row-fluid .span8 {
236+
.row-fluid > .span8 {
237237
width: 65.95744680199999%;
238238
}
239-
.row-fluid .span9 {
239+
.row-fluid > .span9 {
240240
width: 74.468085099%;
241241
}
242-
.row-fluid .span10 {
242+
.row-fluid > .span10 {
243243
width: 82.97872339599999%;
244244
}
245-
.row-fluid .span11 {
245+
.row-fluid > .span11 {
246246
width: 91.489361693%;
247247
}
248-
.row-fluid .span12 {
248+
.row-fluid > .span12 {
249249
width: 99.99999998999999%;
250250
}
251251
.container {

‎docs/scaffolding.html

Lines changed: 103 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ <h1>Scaffolding</h1>
8181
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
8282
<div class="subnav">
8383
<ul class="nav nav-pills">
84-
<li><a href="#grid-system">Grid system</a></li>
84+
<li><a href="#gridSystem">Grid system</a></li>
85+
<li><a href="#fluidGridSystem">Fluid gird system</a></li>
86+
<li><a href="#gridCustomization">Customizing</a></li>
8587
<li><a href="#layouts">Layouts</a></li>
8688
<li><a href="#responsive">Responsive design</a></li>
8789
</ul>
@@ -92,12 +94,11 @@ <h1>Scaffolding</h1>
9294

9395
<!-- Grid system
9496
================================================== -->
95-
<section id="grid-system">
97+
<section id="gridSystem">
9698
<div class="page-header">
97-
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
99+
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
98100
</div>
99101

100-
<h2>Default grid</h2>
101102
<div class="row show-grid">
102103
<div class="span1">1</div>
103104
<div class="span1">1</div>
@@ -188,7 +189,87 @@ <h3>Example</h3>
188189
</div>
189190
</div>
190191
</div>
191-
<h3>Fluid example</h3>
192+
</div><!-- /span6 -->
193+
<div class="span6">
194+
<pre class="prettyprint linenums">
195+
&lt;div class="row"&gt;
196+
&lt;div class="span12"&gt;
197+
Level 1 of column
198+
&lt;div class="row"&gt;
199+
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
200+
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
201+
&lt;/div&gt;
202+
&lt;/div&gt;
203+
&lt;/div&gt;
204+
</pre>
205+
</div>
206+
</div>
207+
</section>
208+
209+
210+
211+
<!-- Fluid grid system
212+
================================================== -->
213+
<section id="fluidGridSystem">
214+
<div class="page-header">
215+
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
216+
</div>
217+
218+
<h2>Fluid columns</h2>
219+
<div class="row-fluid show-grid">
220+
<div class="span1">1</div>
221+
<div class="span1">1</div>
222+
<div class="span1">1</div>
223+
<div class="span1">1</div>
224+
<div class="span1">1</div>
225+
<div class="span1">1</div>
226+
<div class="span1">1</div>
227+
<div class="span1">1</div>
228+
<div class="span1">1</div>
229+
<div class="span1">1</div>
230+
<div class="span1">1</div>
231+
<div class="span1">1</div>
232+
</div>
233+
<div class="row-fluid show-grid">
234+
<div class="span4">4</div>
235+
<div class="span4">4</div>
236+
<div class="span4">4</div>
237+
</div>
238+
<div class="row-fluid show-grid">
239+
<div class="span4">4</div>
240+
<div class="span8">8</div>
241+
</div>
242+
<div class="row-fluid show-grid">
243+
<div class="span6">6</div>
244+
<div class="span6">6</div>
245+
</div>
246+
<div class="row-fluid show-grid">
247+
<div class="span12">12</div>
248+
</div>
249+
250+
<div class="row">
251+
<div class="span4">
252+
<h3>Percents, not pixels</h3>
253+
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
254+
</div>
255+
<div class="span4">
256+
<h3>Fluid rows</h3>
257+
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
258+
</div>
259+
<div class="span4">
260+
<h3>Markup</h3>
261+
<pre class="prettyprint linenums">
262+
&lt;div class="row-fluid"&gt;
263+
&lt;div class="span4"&gt;...&lt;/div&gt;
264+
&lt;div class="span8"&gt;...&lt;/div&gt;
265+
&lt;/div&gt;
266+
</pre>
267+
</div>
268+
</div><!-- /row -->
269+
270+
<h2>Fluid nesting</h2>
271+
<div class="row">
272+
<div class="span6">
192273
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
193274
<div class="row-fluid show-grid">
194275
<div class="span12">
@@ -206,10 +287,10 @@ <h3>Fluid example</h3>
206287
</div>
207288
<div class="span6">
208289
<pre class="prettyprint linenums">
209-
&lt;div class="row"&gt;
290+
&lt;div class="row-fluid"&gt;
210291
&lt;div class="span12"&gt;
211292
Level 1 of column
212-
&lt;div class="row"&gt;
293+
&lt;div class="row-fluid"&gt;
213294
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
214295
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
215296
&lt;/div&gt;
@@ -219,7 +300,16 @@ <h3>Fluid example</h3>
219300
</div>
220301
</div>
221302

222-
<h2>Grid customization</h2>
303+
</section>
304+
305+
306+
307+
<!-- Customizaton
308+
================================================== -->
309+
<section id="gridCustomization">
310+
<div class="page-header">
311+
<h1>Grid customization</h1>
312+
</div>
223313
<table class="table table-bordered table-striped">
224314
<thead>
225315
<tr>
@@ -281,8 +371,8 @@ <h1>Layouts <small>Basic templates to create webpages</small></h1>
281371
<div class="span6">
282372
<h2>Fixed layout</h2>
283373
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
284-
<div class="minicon-layout">
285-
<div class="minicon-layout-body"></div>
374+
<div class="mini-layout">
375+
<div class="mini-layout-body"></div>
286376
</div>
287377
<pre class="prettyprint linenums">
288378
&lt;body&gt;
@@ -295,9 +385,9 @@ <h2>Fixed layout</h2>
295385
<div class="span6">
296386
<h2>Fluid layout</h2>
297387
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
298-
<div class="minicon-layout fluid">
299-
<div class="minicon-layout-sidebar"></div>
300-
<div class="minicon-layout-body"></div>
388+
<div class="mini-layout fluid">
389+
<div class="mini-layout-sidebar"></div>
390+
<div class="mini-layout-body"></div>
301391
</div>
302392
<pre class="prettyprint linenums">
303393
&lt;div class="container-fluid"&gt;

0 commit comments

Comments
 (0)