From 2a4bd786edd2c03d576f9300d322b1e45cc14d3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:09:35 -0700 Subject: more accurate grid classes in examples --- css.html | 150 +++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 75 insertions(+), 75 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index ad48dcb09..b8403fa6f 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 %} -- cgit v1.2.3 From 6fe1264a8088bf627fc61d639e59acc65126c41c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:11:05 -0700 Subject: mo betta heading examples labels --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b8403fa6f..64b7b1d5e 100644 --- a/css.html +++ b/css.html @@ -607,27 +607,27 @@ base_url: "../" - + - + - + - + - + - + -- cgit v1.2.3 From 903e92a3272420de058b2fdf8d301e4d06e3188c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:15:14 -0700 Subject: Update helper classes to reflect changes and mention mixins --- css.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 64b7b1d5e..dd576df06 100644 --- a/css.html +++ b/css.html @@ -2070,29 +2070,29 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

.pull-left

-

Float an element left

+

Float an element left with a class. Can also be used as a mixin.

{% highlight html %}
...
{% endhighlight %} {% highlight css %} .pull-left { - float: left; + float: left !important; } {% endhighlight %}

.pull-right

-

Float an element right

+

Float an element right with a class. Can also be used as a mixin.

{% highlight html %}
...
{% endhighlight %} {% highlight css %} .pull-right { - float: right; + float: right !important; } {% endhighlight %}

.clearfix

-

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

+

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

{% highlight html %}
...
{% endhighlight %} -- cgit v1.2.3

Bootstrap heading

h1. Bootstrap heading

 Semibold 38px

Bootstrap heading

h2. Bootstrap heading

 Semibold 32px

Bootstrap heading

h3. Bootstrap heading

 Semibold 24px

Bootstrap heading

h4. Bootstrap heading

 Semibold 18px
Bootstrap heading
h5. Bootstrap heading
 Semibold 14px
Bootstrap heading
h6. Bootstrap heading
 Semibold 12px