From 2a4bd786edd2c03d576f9300d322b1e45cc14d3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:09:35 -0700 Subject: [PATCH] more accurate grid classes in examples --- css.html | 150 +++++++++++++++++++++++++++---------------------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/css.html b/css.html index ad48dcb09e..b8403fa6fb 100644 --- a/css.html +++ b/css.html @@ -192,60 +192,60 @@ base_url: "../"

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% endhighlight %} @@ -253,37 +253,37 @@ base_url: "../"

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% highlight html %}
-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% endhighlight %} @@ -348,28 +348,28 @@ base_url: "../"

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

-
4
-
4 offset 4
-
+
.col-md-4
+
.col-md-4 .col-md-offset-4
+
-
3 offset 3
-
3 offset 3
-
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
+
-
6 offset 3
-
+
.col-md-6 .col-md-offset-3
+ {% highlight html %}
-
...
-
...
+
.col-md-4
+
.col-md-4 .col-md-offset-4
-
3 offset 3
-
3 offset 3
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
-
...
+
.col-md-6 .col-md-offset-3
{% endhighlight %} @@ -378,13 +378,13 @@ base_url: "../"

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

- Level 1: 9 columns + Level 1: .col-md-9
- Level 2: 6 columns + Level 2: .col-md-6
- Level 2: 6 columns + Level 2: .col-md-6
@@ -392,13 +392,13 @@ base_url: "../" {% highlight html %}
- Level 1: 9 columns + Level 1: .col-md-9
- Level 2: 6 columns + Level 2: .col-md-6
- Level 2: 6 columns + Level 2: .col-md-6
@@ -408,14 +408,14 @@ base_url: "../"

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% highlight html %}
-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% endhighlight %}