From 3d99a4c15e0661df630dbaf7dddb5228cf044fe6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 16:40:39 -0700 Subject: move to examples dir --- examples/grid/grid.css | 21 +++++++++++ examples/grid/index.html | 92 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 examples/grid/grid.css create mode 100644 examples/grid/index.html (limited to 'examples/grid') diff --git a/examples/grid/grid.css b/examples/grid/grid.css new file mode 100644 index 000000000..c213ac6a7 --- /dev/null +++ b/examples/grid/grid.css @@ -0,0 +1,21 @@ +.container { + padding-left: 15px; + padding-right: 15px; +} + +h4 { + margin-top: 25px; +} +.row { + margin-bottom: 20px; +} +.row .row { + margin-top: 10px; + margin-bottom: 0; +} +[class*="col-lg-"] { + padding-top: 15px; + padding-bottom: 15px; + background-color: rgba(185,74,72,.15); + border: 1px solid rgba(185,74,72,.2); +} diff --git a/examples/grid/index.html b/examples/grid/index.html new file mode 100644 index 000000000..bd86f4ab9 --- /dev/null +++ b/examples/grid/index.html @@ -0,0 +1,92 @@ + + + + + + + + + Grid Template for Bootstrap + + + + + + + + + +
+ +

Bootstrap grids

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+ +

Three equal columns

+
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +

Three unequal columns

+
+
.col-lg-3
+
.col-lg-6
+
.col-lg-3
+
+ +

Two columns

+
+
.col-lg-8
+
.col-lg-4
+
+ +

Full width, single column

+

No grid classes are necessary for full-width elements.

+ +

Two columns with two nested columns

+
+
+ .col-lg-8 +
+
.col-lg-6
+
.col-lg-6
+
+
+
.col-lg-4
+
+ +

Mixed: mobile and desktop

+
+
.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
+
+ +

Mixed: mobile, tablet, and desktop

+
+
.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
+
+ +
+ + + -- cgit v1.2.3 From 024e320e5c3cf1adce8404f87e7c0c746461b6e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 17:39:37 -0700 Subject: hella examples fixing, mostly navbars and lots of work on grids example --- examples/grid/grid.css | 13 +++++-- examples/grid/index.html | 90 ++++++++++++++++++++++++++++-------------------- 2 files changed, 63 insertions(+), 40 deletions(-) (limited to 'examples/grid') diff --git a/examples/grid/grid.css b/examples/grid/grid.css index c213ac6a7..963b128e3 100644 --- a/examples/grid/grid.css +++ b/examples/grid/grid.css @@ -13,9 +13,16 @@ h4 { margin-top: 10px; margin-bottom: 0; } -[class*="col-lg-"] { +[class*="col-"] { padding-top: 15px; padding-bottom: 15px; - background-color: rgba(185,74,72,.15); - border: 1px solid rgba(185,74,72,.2); + background-color: #eee; + border: 1px solid #ddd; + background-color: rgba(86,61,124,.15); + border: 1px solid rgba(86,61,124,.2); } + +hr { + margin-top: 40px; + margin-bottom: 40px; +} \ No newline at end of file diff --git a/examples/grid/index.html b/examples/grid/index.html index bd86f4ab9..4525f7e49 100644 --- a/examples/grid/index.html +++ b/examples/grid/index.html @@ -9,7 +9,7 @@ Grid Template for Bootstrap - + @@ -18,72 +18,88 @@
-

Bootstrap grids

-

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+
+

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+
-

Three equal columns

+

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-

Three unequal columns

+

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

-
.col-lg-3
-
.col-lg-6
-
.col-lg-3
+
.col-md-3
+
.col-md-6
+
.col-md-3
-

Two columns

+

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

-
.col-lg-8
-
.col-lg-4
+
.col-md-8
+
.col-md-4
-

Full width, single column

+

Full width, single column

No grid classes are necessary for full-width elements.

-

Two columns with two nested columns

+
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

-
- .col-lg-8 +
+ .col-md-8
-
.col-lg-6
-
.col-lg-6
+
.col-md-6
+
.col-md-6
-
.col-lg-4
+
.col-md-4
-

Mixed: mobile and desktop

+
+ +

Mixed: mobile and desktop

+

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
.col-12 .col-lg-8
-
.col-6 .col-lg-4
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col-6 .col-lg-6
-
.col-6 .col-lg-6
+
.col-xs-6 .col-md-6
+
.col-xs-6 .col-md-6
-

Mixed: mobile, tablet, and desktop

+
+ +

Mixed: mobile, tablet, and desktop

+

-
.col-12 .col-lg-8
-
.col-6 .col-lg-4
+
.col-xs-12 .col-lg-8
+
.col-xs-6 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
+
.col-xs-6 .col-sm-4 .col-lg-4
+
.col-xs-6 .col-sm-4 .col-lg-4
+
.col-xs-6 .col-sm-4 .col-lg-4
-
.col-6 .col-lg-6
-
.col-6 .col-lg-6
+
.col-xs-6 .col-sm-6 .col-lg-6
+
.col-xs-6 .col-sm-6 .col-lg-6
-- cgit v1.2.3