From 024e320e5c3cf1adce8404f87e7c0c746461b6e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 17:39:37 -0700 Subject: [PATCH] hella examples fixing, mostly navbars and lots of work on grids example --- _includes/nav-getting-started.html | 3 + examples/carousel/index.html | 28 +++---- examples/grid/grid.css | 13 +++- examples/grid/index.html | 94 ++++++++++++++---------- 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 +- getting-started.html | 87 +++++++++++++++++++++- 18 files changed, 278 insertions(+), 155 deletions(-) diff --git a/_includes/nav-getting-started.html b/_includes/nav-getting-started.html index f0e6af7ac4..fca38bde36 100644 --- a/_includes/nav-getting-started.html +++ b/_includes/nav-getting-started.html @@ -11,6 +11,9 @@
  • Basic template
    • +
  • + Examples +
  • Disabling responsiveness
    • diff --git a/examples/carousel/index.html b/examples/carousel/index.html index efb4bcf3cf..8f3ac988ac 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 c213ac6a73..963b128e30 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 bd86f4ab96..4525f7e499 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.

    - -

    Three equal columns

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

    Bootstrap grid examples

    +

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

    -

    Three unequal 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-3
    -
    .col-lg-6
    -
    .col-lg-3
    +
    .col-md-4
    +
    .col-md-4
    +
    .col-md-4
    -

    Two 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-8
    -
    .col-lg-4
    +
    .col-md-3
    +
    .col-md-6
    +
    .col-md-3
    -

    Full width, single column

    +

    Two columns

    +

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

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

    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 a34fbb92fa..1d09fa852b 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 09bb122771..b5a5a11ece 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 f5fbc5851a..de9ce387e2 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 5a0e596af7..9bc75b5f22 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 1092f2c1a3..e6c186462c 100644 --- a/examples/offcanvas/index.html +++ b/examples/offcanvas/index.html @@ -9,7 +9,7 @@ Off Canvas Template for Bootstrap - + @@ -18,16 +18,15 @@