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/carousel/index.html | 28 +++++----- examples/grid/grid.css | 13 +++-- examples/grid/index.html | 90 +++++++++++++++++++------------- examples/jumbotron-narrow/index.html | 2 +- examples/jumbotron/index.html | 26 ++++----- examples/justified-nav/index.html | 2 +- examples/navbar-fixed-top/index.html | 26 ++++----- examples/navbar-static-top/index.html | 26 ++++----- examples/navbar/index.html | 26 ++++----- examples/offcanvas/index.html | 34 ++++++------ examples/offcanvas/offcanvas.css | 12 ++--- examples/signin/index.html | 2 +- examples/signin/signin.css | 6 +-- examples/starter-template/index.html | 22 ++++---- examples/sticky-footer-navbar/index.html | 22 ++++---- examples/sticky-footer/index.html | 2 +- 16 files changed, 187 insertions(+), 152 deletions(-) (limited to 'examples') diff --git a/examples/carousel/index.html b/examples/carousel/index.html index efb4bcf3c..8f3ac988a 100644 --- a/examples/carousel/index.html +++ b/examples/carousel/index.html @@ -9,8 +9,8 @@ Carousel Template for Bootstrap - - + + @@ -23,13 +23,15 @@
- - Project name -
+
+ + Project name +
+
@@ -175,8 +177,8 @@ - - - + + + 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
diff --git a/examples/jumbotron-narrow/index.html b/examples/jumbotron-narrow/index.html index a34fbb92f..1d09fa852 100644 --- a/examples/jumbotron-narrow/index.html +++ b/examples/jumbotron-narrow/index.html @@ -9,7 +9,7 @@ Narrow Jumbotron Template for Bootstrap - + diff --git a/examples/jumbotron/index.html b/examples/jumbotron/index.html index 09bb12277..b5a5a11ec 100644 --- a/examples/jumbotron/index.html +++ b/examples/jumbotron/index.html @@ -9,7 +9,7 @@ Jumbotron Template for Bootstrap - + @@ -19,13 +19,15 @@
- - Project name -
+
+ + Project name +
+
-
+
-
+
@@ -91,7 +93,7 @@
- - + + \ No newline at end of file diff --git a/examples/justified-nav/index.html b/examples/justified-nav/index.html index f5fbc5851..de9ce387e 100644 --- a/examples/justified-nav/index.html +++ b/examples/justified-nav/index.html @@ -9,7 +9,7 @@ Justified Nav Template for Bootstrap - + diff --git a/examples/navbar-fixed-top/index.html b/examples/navbar-fixed-top/index.html index 5a0e596af..9bc75b5f2 100644 --- a/examples/navbar-fixed-top/index.html +++ b/examples/navbar-fixed-top/index.html @@ -9,7 +9,7 @@ Fixed Top Navbar Example for Bootstrap - + @@ -20,13 +20,15 @@
- - Project name -
+
+ + Project name +
+
-
    + -
      + -
        +
        • Default
        • Static top
        • Fixed top
          • @@ -69,7 +71,7 @@ - - + + diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html index 1092f2c1a..e6c186462 100644 --- a/examples/offcanvas/index.html +++ b/examples/offcanvas/index.html @@ -9,7 +9,7 @@ Off Canvas Template for Bootstrap - + @@ -18,16 +18,15 @@