From 245ebda651fcdbc9687c1a436e8bbe3916354da6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jun 2013 21:57:51 -0700 Subject: nuke the .col --- docs/css.html | 218 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 109 insertions(+), 109 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 264d4c672..ca10a731b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Be sure to checkout the full-page grid example as well.

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% endhighlight %}

Offsetting columns

-

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

+

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

-
4
-
4 offset 4
+
4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html %}
-
...
-
...
+
...
+
...
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
...
+
...
{% endhighlight %} @@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Nesting columns

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

-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
{% highlight html %}
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Column ordering

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

-
9
-
3
+
9
+
3
{% highlight html %}
-
9
-
3
+
9
+
3
{% endhighlight %}

Small device grid

Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.

-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% highlight html %}
-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% endhighlight %} @@ -918,8 +918,8 @@ For example, <section> should be wrapped as inline.

Use contextual classes to color table rows.

- - + + @@ -1078,14 +1078,14 @@ For example, <section> should be wrapped as inline.

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.

- -
+ +
- -
+ +
-
+
@@ -1101,14 +1101,14 @@ For example, <section> should be wrapped as inline. {% highlight html %}
- -
+ +
- -
+ +
-
+
@@ -1400,34 +1400,34 @@ For example, <section> should be wrapped as inline.
-
+
@

-
+
.00

-
+
$ .00
{% highlight html %} -
+
@
-
+
.00
-
+
$ .00 @@ -1437,33 +1437,33 @@ For example, <section> should be wrapped as inline.

Optional sizes

Add the relative form sizing classes to the `.input-group-addon`.

-
+
@

-
+
@

-
+
@
{% highlight html %} -
+
@
-
+
@
-
+
@
@@ -1472,14 +1472,14 @@ For example, <section> should be wrapped as inline.

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

-
+

-
+
@@ -1487,14 +1487,14 @@ For example, <section> should be wrapped as inline.
{% highlight html %} -
+
-
+
@@ -1505,7 +1505,7 @@ For example, <section> should be wrapped as inline.

Button dropdowns

-
+
    @@ -1519,7 +1519,7 @@ For example, <section> should be wrapped as inline.

-
+
@@ -1534,7 +1534,7 @@ For example, <section> should be wrapped as inline.
{% highlight html %} -
+
    @@ -1548,7 +1548,7 @@ For example, <section> should be wrapped as inline.
-
+
@@ -1565,7 +1565,7 @@ For example, <section> should be wrapped as inline.

Segmented dropdown groups

-
+
@@ -1602,14 +1602,14 @@ For example, <section> should be wrapped as inline.
{% highlight html %} -
+
-
+
@@ -1639,27 +1639,27 @@ For example, <section> should be wrapped as inline.

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

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