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 From b1cc11cd98e3ab3707c6c39a80df458f277239ff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Jun 2013 21:55:59 -0700 Subject: reverse order of grid column examples for dual grid section --- docs/css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index ca10a731b..981626c60 100644 --- a/docs/css.html +++ b/docs/css.html @@ -197,15 +197,15 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

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
+
6 small cols, 4 large cols
+
6 small cols, 4 large cols
+
12 small cols, 4 large cols
{% highlight html %}
-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
6 small cols, 4 large cols
+
6 small cols, 4 large cols
+
12 small cols, 4 large cols
{% endhighlight %} -- cgit v1.2.3 From 232c03dc2f076534633f4579b8becf88633d07e7 Mon Sep 17 00:00:00 2001 From: Mladen Plavsic Date: Wed, 5 Jun 2013 13:59:13 +0300 Subject: Update css.html Missing word "in" in "Someone famous in Source Title" --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 264d4c672..2806d3e4a 100644 --- a/docs/css.html +++ b/docs/css.html @@ -504,7 +504,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." {% highlight html %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous Source Title + Someone famous in Source Title
{% endhighlight %} -- cgit v1.2.3 From 441bbe1998c790dad1c4d44c5f85e6360209eaac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Jun 2013 18:34:16 -0230 Subject: Another grid update * Update docs to include table of grid levels and behaviors * Change from .col-md to .col-sm to match existing size variables we use elsewhere * Keep .col-lg as-is though for simplicity as we won't likely add a fourth level of the grid * Combine responsive .container breakpoints with grid breakpoints in grid.less * Other misc docs updates --- docs/css.html | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 981626c60..dfab31523 100644 --- a/docs/css.html +++ b/docs/css.html @@ -63,9 +63,64 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Grid system

-

Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.

+

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

+ +

Grid options

+

Multiple device grids, columns, offsets, and column ordering.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tiny grid + Phones (<480px) + + Small grid + Tablets (<768px) + + Medium-large grid + Destkops (>768px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+ +

Grid examples

+

Bootstrap's grid system includes three levels of column sizing—phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.

-

Grid example

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

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

-- cgit v1.2.3 From 0a18d33d2c1600c9d5133127dac4db2f690df71a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Jun 2013 23:43:43 -0700 Subject: Redo grid documentation * Update example sections to include basic, mobile-desktop, and mobile-tablet-desktop implementations * Add more examples to the grid example page * Red columns instead of gray for more Bootstrapy aesthetic --- docs/css.html | 106 ++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 84 insertions(+), 22 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index dfab31523..843715aad 100644 --- a/docs/css.html +++ b/docs/css.html @@ -63,10 +63,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Grid system

-

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

+

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid options

-

Multiple device grids, columns, offsets, and column ordering.

+

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

@@ -118,11 +118,8 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
-

Grid examples

-

Bootstrap's grid system includes three levels of column sizing—phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.

- -

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

-

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

+

Example: Stacked-to-horizontal

+

Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.

1
@@ -138,6 +135,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
1
1
+
+
8
+
4
+
4
4
@@ -163,6 +164,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
1
1
+
+
8
+
4
+
4
4
@@ -174,6 +179,78 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
{% endhighlight %} +

Example: Combining mobile with desktop

+

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

+
+
+
8
+
4
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+
+{% highlight html %} +
+
8
+
4
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+{% endhighlight %} + +

Example: Mobile, tablet, and desktop

+

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

+
+
+
.col-12 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-lg-4
+
.col-6 .col-lg-4
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-lg-6
+
.col-6 .col-lg-6
+
+
+{% highlight html %} +
+
.col-12 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-lg-4
+
.col-6 .col-lg-4
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-lg-6
+
.col-6 .col-lg-6
+
+{% endhighlight %} + +
+

Need more examples?

+

We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.

+

More grid examples

+
+

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-lg-4 over four columns.

@@ -247,21 +324,6 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
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.

-
-
6 small cols, 4 large cols
-
6 small cols, 4 large cols
-
12 small cols, 4 large cols
-
-{% highlight html %} -
-
6 small cols, 4 large cols
-
6 small cols, 4 large cols
-
12 small cols, 4 large cols
-
{% endhighlight %}

LESS mixins and variables

-- cgit v1.2.3