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