From 475b985a0efaf534b56089f12c570d7861ce72f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 16:37:43 -0800 Subject: [PATCH 01/23] remove padding from first-child of inline radios/checkboxes --- docs/assets/css/bootstrap.css | 3 +++ less/forms.less | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e928bb6d1e..1b572090c9 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -596,6 +596,9 @@ input[type="hidden"] { .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; } +.controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child { + padding-top: 5px; +} input, textarea { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); diff --git a/less/forms.less b/less/forms.less index b0daeb034e..69ddbcac93 100644 --- a/less/forms.less +++ b/less/forms.less @@ -175,6 +175,11 @@ input[type="hidden"] { .checkbox.inline + .checkbox.inline { margin-left: 10px; // space out consecutive inline controls } +// But don't forget to remove their padding on first-child +.controls > .radio.inline:first-child, +.controls > .checkbox.inline:first-child { + padding-top: 5px; // has to be padding because margin collaspes +} From 06df91ac559686e947c3c1fbfbdd2b7dcfc5a56b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 16:48:03 -0800 Subject: [PATCH 02/23] remove background from accordion, and use border instead --- docs/assets/css/bootstrap.css | 6 ++---- less/accordion.less | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 1b572090c9..bf1116f538 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3165,7 +3165,8 @@ a.thumbnail:hover { margin-bottom: 18px; } .accordion-group { - background-color: #f5f5f5; + margin-bottom: 2px; + border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -3177,9 +3178,6 @@ a.thumbnail:hover { display: block; padding: 8px 15px; } -.accordion-body { - margin-bottom: 2px; -} .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; diff --git a/less/accordion.less b/less/accordion.less index 1ebd5b1a1a..11a36b544e 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -9,7 +9,8 @@ // Group == heading + body .accordion-group { - background-color: #f5f5f5; + margin-bottom: 2px; + border: 1px solid #e5e5e5; .border-radius(4px); } .accordion-heading { @@ -19,9 +20,6 @@ display: block; padding: 8px 15px; } -.accordion-body { - margin-bottom: 2px; -} // Inner needs the styles because you can't animate properly with any styles on the element .accordion-inner { From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:11:31 -0800 Subject: [PATCH 03/23] fix the navbar click and a few jank responsive problems --- docs/assets/css/bootstrap-responsive.css | 140 ++++++++++++++--------- docs/assets/css/bootstrap.css | 4 +- docs/assets/css/docs.css | 23 +++- docs/base-css.html | 2 +- docs/components.html | 81 +++++++------ docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 81 +++++++------ less/navbar.less | 4 +- less/responsive.less | 25 ++-- 9 files changed, 209 insertions(+), 153 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 631c904e79..b0fbd9d7ba 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -175,22 +175,23 @@ margin-bottom: 36px; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { padding: 0; } .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + .navbar .nav-collapse { + clear: left; } .navbar .nav { float: none; - margin: 9px 0; + margin: 0 0 9px; } .navbar .nav > li { float: none; @@ -217,8 +218,10 @@ } .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -263,60 +266,83 @@ height: 0; } } -/* @media (min-width: 1210px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - .container { - width: @siteWidth; + width: 1170px; } .row { - margin-left: @gridGutterWidth * -1; + margin-left: -30px; } [class*="span"] { - margin-left: @gridGutterWidth; + margin-left: 30px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 130px; + } + .offset2 { + margin-left: 230px; + } + .offset3 { + margin-left: 330px; + } + .offset4 { + margin-left: 430px; + } + .offset5 { + margin-left: 530px; + } + .offset6 { + margin-left: 630px; + } + .offset7 { + margin-left: 730px; + } + .offset8 { + margin-left: 830px; + } + .offset9 { + margin-left: 930px; + } + .offset10 { + margin-left: 1030px; + } + .offset11 { + margin-left: 1130px; } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - } -*/ \ No newline at end of file diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index bf1116f538..6916e9361a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small { display: none; float: right; padding: 7px 10px; - margin-left: 10px; - margin-right: 10px; + margin-left: 5px; + margin-right: 5px; background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b06065365f..cc7ca0c639 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -522,6 +522,7 @@ h2 + .row { /* Example sites showcase */ .example-sites img { max-width: 100%; + margin: 0 auto; } .marketing-byline { margin: -18px 0 27px; @@ -646,6 +647,10 @@ form.well { padding: 10px 14px; margin: 0 auto 10px; } + /* Masthead (home page jumbotron) */ + .masthead { + padding-top: 0; + } /* Don't space out quick links so much */ .quick-links { @@ -669,8 +674,9 @@ form.well { display: block; max-width: 300px; margin: 0 auto 18px; + text-align: center; } - .example-sites img { + .example-sites .thumbnail > img { max-width: 270px; } @@ -796,11 +802,20 @@ form.well { /* Unfloat brand */ .navbar-fixed-top .brand { - float: none; + float: left; margin-left: 0; - padding-left: 15px; - padding-right: 15px; + padding-left: 10px; + padding-right: 10px; } } +/* LARGE DESKTOP SCREENS */ +@media (min-width: 1210px) { + + /* Update subnav container */ + .subnav-fixed .nav { + width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ + } + +} diff --git a/docs/base-css.html b/docs/base-css.html index c68391261c..4651e9789c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
diff --git a/docs/components.html b/docs/components.html index a2fac7360b..950d1f35c7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -662,40 +662,47 @@
+ + + + + Project name - -
- -
- +
+ +
+ +
+ +
@@ -733,7 +740,7 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> - +

Nav links

Nav items are simple to add via unordered lists.

@@ -763,9 +770,9 @@ </li> </ul> -

Get the javascript →

-
- +

Get the javascript →

+ + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 6cbb111acb..c15fcebd39 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1425,7 +1425,7 @@
- +
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 363ed1ba13..3a92953ae7 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -590,40 +590,47 @@
+ + + + + {{_i}}Project name{{/i}} - -
- -
- +
+ +
+ +
+ +
@@ -661,7 +668,7 @@ <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"> </form> - +

{{_i}}Nav links{{/i}}

{{_i}}Nav items are simple to add via unordered lists.{{/i}}

@@ -691,9 +698,9 @@ </li> </ul> -

{{_i}}Get the javascript →{{/i}}

-
- +

{{_i}}Get the javascript →{{/i}}

+ + diff --git a/less/navbar.less b/less/navbar.less index 379cbb56d9..4fd8a9073d 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,8 +21,8 @@ display: none; float: right; padding: 7px 10px; - margin-left: 10px; - margin-right: 10px; + margin-left: 5px; + margin-right: 5px; .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); .box-shadow(@shadow); diff --git a/less/responsive.less b/less/responsive.less index 6c3102c14f..0955710b6f 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -202,7 +202,7 @@ margin-bottom: @baseLineHeight * 2; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { @@ -210,16 +210,18 @@ } // Account for brand name .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + // Nav collapse clears brand + .navbar .nav-collapse { + clear: left; } // Block-level the nav .navbar .nav { float: none; - margin: (@baseLineHeight / 2) 0; + margin: 0 0 (@baseLineHeight / 2); } .navbar .nav > li { float: none; @@ -248,8 +250,10 @@ // Dropdowns in the navbar .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -301,7 +305,7 @@ // LARGE DESKTOP & UP // ------------------ -/* + @media (min-width: 1210px) { // Reset grid variables @@ -317,7 +321,6 @@ .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - .container { width: @siteWidth; } @@ -354,7 +357,5 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } - .offset12 { .offset(12); } } -*/ \ No newline at end of file From e532228721734492d6f2741f729525cc1bb3c77c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:25:05 -0800 Subject: [PATCH 04/23] more responsive tweaks for tablet --- docs/assets/css/bootstrap-responsive.css | 55 +++++++++++------------- less/responsive.less | 14 +++--- 2 files changed, 33 insertions(+), 36 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index b0fbd9d7ba..bbfc0ac5ab 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -89,81 +89,78 @@ } @media (min-width: 768px) and (max-width: 940px) { .container { - width: 748px; - padding-left: 10px; - padding-right: 10px; + width: 724px; + padding-left: 20px; + padding-right: 20px; } .span1 { - width: 44px; + width: 42px; } .span2 { - width: 108px; + width: 104px; } .span3 { - width: 172px; + width: 166px; } .span4 { - width: 236px; + width: 228px; } .span5 { - width: 300px; + width: 290px; } .span6 { - width: 364px; + width: 352px; } .span7 { - width: 428px; + width: 414px; } .span8 { - width: 492px; + width: 476px; } .span9 { - width: 556px; + width: 538px; } .span10 { - width: 620px; + width: 600px; } .span11 { - width: 684px; + width: 662px; } .span12 { - width: 748px; + width: 724px; } .offset1 { - margin-left: 84px; + margin-left: 82px; } .offset2 { - margin-left: 148px; + margin-left: 144px; } .offset3 { - margin-left: 212px; + margin-left: 206px; } .offset4 { - margin-left: 276px; + margin-left: 268px; } .offset5 { - margin-left: 340px; + margin-left: 330px; } .offset6 { - margin-left: 404px; + margin-left: 392px; } .offset7 { - margin-left: 468px; + margin-left: 454px; } .offset8 { - margin-left: 532px; + margin-left: 516px; } .offset9 { - margin-left: 596px; + margin-left: 578px; } .offset10 { - margin-left: 660px; + margin-left: 640px; } .offset11 { - margin-left: 724px; - } - .offset12 { - margin-left: 788px; + margin-left: 702px; } } @media (max-width: 940px) { diff --git a/less/responsive.less b/less/responsive.less index 0955710b6f..fba5b3656c 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -135,10 +135,10 @@ @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables - @gridColumns: 16; - @gridColumnWidth: 44px; + @gridColumns: 12; + @gridColumnWidth: 42px; @gridGutterWidth: 20px; - @siteWidth: 748px; + @siteWidth: 724px; // Bring grid mixins to recalculate widths .columns(@columns: 1) { @@ -148,11 +148,11 @@ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - // 16cols at 30px wide with 16px gutters + // 12cols at 44px wide with 20px gutters .container { width: @siteWidth; - padding-left: 10px; - padding-right: 10px; + padding-left: 20px; + padding-right: 20px; } // Default columns @@ -181,7 +181,6 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } - .offset12 { .offset(12); } } @@ -295,6 +294,7 @@ display: block; } + // Hide everything in the navbar save .brand and toggle button */ .nav-collapse { overflow: hidden; height: 0; From e17c9249d2bef78355711ce305e1a8d36bd75c3e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:27:09 -0800 Subject: [PATCH 05/23] fix dropdowns in subnav --- docs/assets/css/docs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index cc7ca0c639..430191a6fc 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -732,7 +732,7 @@ form.well { .subnav .nav > li > a { border: 0; } - .subnav .nav > li + li a { + .subnav .nav > li + li > a { border-top: 1px solid #e5e5e5; } From 99ac6ca08ed27126d2ad1dd4d0e820205aab9c48 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:39:36 -0800 Subject: [PATCH 06/23] update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader --- docs/components.html | 29 +++++++++++++++++++++++- docs/download.html | 6 +---- docs/templates/pages/components.mustache | 29 +++++++++++++++++++++++- docs/templates/pages/download.mustache | 6 +---- 4 files changed, 58 insertions(+), 12 deletions(-) diff --git a/docs/components.html b/docs/components.html index 950d1f35c7..710e7de77c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -467,7 +467,7 @@
  • List header
    • -
  • Home
    • +
  • Home
  • Library
  • Applications
  • Another list header
    • @@ -740,6 +740,33 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> +

    Optional responsive variation

    +

    Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.

    +
    +<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container">
+      
+      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+      </a>
+      
+      <!-- Be sure to leave the brand out there if you want it shown -->
+      <a class="brand" href="#">Project name</a>
+
+      <!-- Everything you want hidden at 940px or less, place within here -->
+      <div class="nav-collapse">
+        <!-- .nav, .navbar-search, .navbar-form, etc -->
+      </div>
+
+    </div>
+  </div>
+</div>
+
    +

Nav links

diff --git a/docs/download.html b/docs/download.html index 5bcce7cedc..832b07ce65 100644 --- a/docs/download.html +++ b/docs/download.html @@ -135,12 +135,8 @@ - +
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 3a92953ae7..5c91431fa1 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -395,7 +395,7 @@
  • {{_i}}List header{{/i}}
    • -
  • {{_i}}Home{{/i}}
    • +
  • {{_i}}Home{{/i}}
  • {{_i}}Library{{/i}}
  • {{_i}}Applications{{/i}}
  • {{_i}}Another list header{{/i}}
    • @@ -668,6 +668,33 @@ <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"> </form> +

    {{_i}}Optional responsive variation{{/i}}

    +

    {{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}

    +
    +<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container">
+      
+      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+      </a>
+      
+      <!-- Be sure to leave the brand out there if you want it shown -->
+      <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
+
+      <!-- Everything you want hidden at 940px or less, place within here -->
+      <div class="nav-collapse">
+        <!-- .nav, .navbar-search, .navbar-form, etc -->
+      </div>
+
+    </div>
+  </div>
+</div>
+
    +

{{_i}}Nav links{{/i}}

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index dccc5fbb66..34f8130ac1 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -63,12 +63,8 @@ - +
From cf1b46bda4853e8501c2b9587219535376a9cc36 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:46:41 -0800 Subject: [PATCH 07/23] fix alert close position --- docs/assets/css/bootstrap.css | 1 + less/alerts.less | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 6916e9361a..43ef8547f5 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2002,6 +2002,7 @@ button.btn.small, input[type="submit"].btn.small { } .alert .close { position: relative; + top: -2px; right: -21px; line-height: 18px; } diff --git a/less/alerts.less b/less/alerts.less index 23c17e7041..562826fd30 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -18,6 +18,7 @@ // Adjust close link position .alert .close { position: relative; + top: -2px; right: -21px; line-height: 18px; } From 3e462f1fb27b3ca97135948dc74ccef55336c8bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:26:27 -0800 Subject: [PATCH 08/23] update docs to simplify some css --- docs/assets/css/docs.css | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 430191a6fc..f36fa76d61 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -106,35 +106,6 @@ hr.soften { } -/* Benefits list in masthead */ -.benefits { - display: none; - width: 260px; - position: absolute; - right: 0; - bottom: 0; -} -.benefits ul { - list-style: none; - margin: 0; -} -.benefits li { - font-size: 16px; - font-weight: 300; - line-height: 35px; - color: #555; -} -.benefits li + li { - border-top: 1px solid #f5f5f5; -} -.benefits h4 { - color: #555; -} -.benefits span { - padding-right: 5px; - color: #999; -} - /* Specific jumbotrons ------------------------- */ /* supporting docs pages */ @@ -175,7 +146,6 @@ hr.soften { margin: 0; padding-top: 11px; padding-bottom: 11px; - font-size: 13px; border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; From 5f314dcb85b011d30bbe845e00932a9a550d4e71 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:27:18 -0800 Subject: [PATCH 09/23] remove benefits from homepage html --- docs/index.html | 12 ------------ docs/templates/pages/index.mustache | 12 ------------ 2 files changed, 24 deletions(-) diff --git a/docs/index.html b/docs/index.html index 89f5accd68..69972c8437 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,18 +82,6 @@ View project on GitHub Download Bootstrap

-
-

Feature highlights

-
    -
  • ✔ Built on LESS
    • -
  • ✔ Complete style guide docs
    • -
  • ✔ Fully responsive design
    • -
  • ✔ Small footprint (10kb gzipped)
    • -
  • ✔ Support for IE7 and up
    • -
  • ✔ Custom jQuery plugins
    • -
  • ✔ Dozens of components
    • -
-
    diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 5fa70645a6..4ae3b7a6f8 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -10,18 +10,6 @@ {{_i}}View project on GitHub{{/i}} {{_i}}Download Bootstrap{{/i}}

    -
    -

    {{_i}}Feature highlights{{/i}}

    -
      -
    • ✔ {{_i}}Built on LESS{{/i}}
      • -
    • ✔ {{_i}}Complete style guide docs{{/i}}
      • -
    • ✔ {{_i}}Fully responsive design{{/i}}
      • -
    • ✔ {{_i}}Small footprint (10kb gzipped){{/i}}
      • -
    • ✔ {{_i}}Support for IE7 and up{{/i}}
      • -
    • ✔ {{_i}}Custom jQuery plugins{{/i}}
      • -
    • ✔ {{_i}}Dozens of components{{/i}}
      • -
    -
      From f1e520badd51d01ebcd33758966ef868e5cdd1c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:34:07 -0800 Subject: [PATCH 10/23] clarify and tweak media queries --- docs/assets/css/bootstrap-responsive.css | 2 +- docs/scaffolding.html | 2 +- docs/templates/pages/scaffolding.mustache | 2 +- less/responsive.less | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index bbfc0ac5ab..f40f0c110d 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -263,7 +263,7 @@ height: 0; } } -@media (min-width: 1210px) { +@media (min-width: 1200px) { .container { width: 1170px; } diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 14da044bba..184b356083 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -390,7 +390,7 @@ @media (min-width: 768px) and (max-width: 940px) { ... } // Large desktop - @media (min-width: 1210px) { .. } + @media (min-width: 1200px) { .. } diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index cf672cc6e0..6d5a66f8da 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -318,7 +318,7 @@ @media (min-width: 768px) and (max-width: 940px) { ... } // {{_i}}Large desktop{{/i}} - @media (min-width: 1210px) { .. } + @media (min-width: 1200px) { .. } diff --git a/less/responsive.less b/less/responsive.less index fba5b3656c..7320990799 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -306,7 +306,7 @@ // LARGE DESKTOP & UP // ------------------ -@media (min-width: 1210px) { +@media (min-width: 1200px) { // Reset grid variables @gridColumns: 12; From 59d9983ebcc889b5e5626d672311e92657bfe3e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:03:14 -0800 Subject: [PATCH 11/23] updates to responsive and docs for responsive navbar --- docs/assets/css/bootstrap.css | 3 +++ docs/assets/css/docs.css | 7 ++----- docs/components.html | 3 +++ docs/templates/pages/components.mustache | 3 +++ less/navbar.less | 4 ++++ 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 43ef8547f5..e09e58a822 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2359,6 +2359,9 @@ button.btn.small, input[type="submit"].btn.small { .btn-navbar .i-bar + .i-bar { margin-top: 3px; } +.nav-collapse.collapse { + height: auto !important; +} .navbar .brand:hover { text-decoration: none; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f36fa76d61..7876f300a3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -671,11 +671,6 @@ form.well { } } -@media (min-width: 940px) { - .nav-collapse.collapse { - height: auto !important; - } -} @media (max-width: 768px) { @@ -768,6 +763,7 @@ form.well { } + @media (max-width: 940px) { /* Unfloat brand */ @@ -780,6 +776,7 @@ form.well { } + /* LARGE DESKTOP SCREENS */ @media (min-width: 1210px) { diff --git a/docs/components.html b/docs/components.html index 710e7de77c..f9f8db0579 100644 --- a/docs/components.html +++ b/docs/components.html @@ -766,6 +766,9 @@ </div> </div> +
      + Heads up! The responsive navbar requires the collapse plugin. +
      diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5c91431fa1..5cb914e32d 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -694,6 +694,9 @@ </div> </div> +
      + {{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin. +
      diff --git a/less/navbar.less b/less/navbar.less index 4fd8a9073d..404782e61a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -38,6 +38,10 @@ .btn-navbar .i-bar + .i-bar { margin-top: 3px; } +.nav-collapse.collapse { + height: auto !important; // Required to be !important to override native collapse plugin +} + // Brand, links, text, and buttons .navbar { From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: [PATCH 12/23] namespace progress bars and labels classes --- docs/assets/css/bootstrap.css | 20 +++++------ docs/components.html | 42 +++++++++++------------- docs/templates/pages/components.mustache | 42 +++++++++++------------- less/labels.less | 8 ++--- less/progress-bars.less | 12 +++---- 5 files changed, 58 insertions(+), 66 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e09e58a822..a17a4475dd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3003,16 +3003,16 @@ a.thumbnail:hover { -moz-border-radius: 3px; border-radius: 3px; } -.label.important { +.label-important { background-color: #b94a48; } -.label.warning { +.label-warning { background-color: #f89406; } -.label.success { +.label-success { background-color: #468847; } -.label.info { +.label-info { background-color: #3a87ad; } @-webkit-keyframes progress-bar-stripes { @@ -3105,7 +3105,7 @@ a.thumbnail:hover { -moz-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } -.progress.danger .bar { +.progress-danger .bar { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); @@ -3116,7 +3116,7 @@ a.thumbnail:hover { background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); } -.progress.danger.striped .bar { +.progress-danger.progress-striped .bar { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -3125,7 +3125,7 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress.success .bar { +.progress-success .bar { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); @@ -3136,7 +3136,7 @@ a.thumbnail:hover { background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); } -.progress.success.striped .bar { +.progress-success.progress-striped .bar { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -3145,7 +3145,7 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress.info .bar { +.progress-info .bar { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); @@ -3156,7 +3156,7 @@ a.thumbnail:hover { background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); } -.progress.info.striped .bar { +.progress-info.progress-striped .bar { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); diff --git a/docs/components.html b/docs/components.html index f9f8db0579..52483572ee 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1007,34 +1007,34 @@ - New + New - <span class="label success">New</span> + <span class="label label-success">New</span> - Warning + Warning - <span class="label warning">Warning</span> + <span class="label label-warning">Warning</span> - Important + Important - <span class="label important">Important</span> + <span class="label label-important">Important</span> - Info + Info - <span class="label info">Info</span> + <span class="label label-info">Info</span> @@ -1307,12 +1307,12 @@

      Striped

      Uses a gradient to create a striped effect.

      -
      + 
      -<div class="progress info
-     striped">
+<div class="progress progress-info
+     progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
@@ -1321,12 +1321,12 @@
     
      
       
      Animated
      
       
      Takes the striped example and animates it.
      
-      
      
+      
      
         
      
       
      
 
      -<div class="progress danger
-     striped active">
+<div class="progress progress-danger
+     progress-striped active">
   <div class="bar"
        style="width: 40%;"></div>
 </div>
@@ -1338,18 +1338,18 @@
   
      
     
      
       
      Additional colors
      
-      
      Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
      
+      
      Progress bars utilize some of the same class names as buttons and alerts for similar styling.
      
       
        
-        
      • .info
        • 
-        
      • .success
        • 
-        
      • .danger
        • 
+        
      • .progress-info
        • 
+        
      • .progress-success
        • 
+        
      • .progress-danger
        • 
       
      
       
      Alternatively, you can customize the LESS files and roll your own colors and sizes.
      
     
      
     
      
       
      Behavior
      
       
      Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
      
-      
      If you use the .active class, your .striped progress bars will animate the stripes left to right.
      
+      
      If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
      
     
      
     
      
       
      Browser support
      
@@ -1398,10 +1398,6 @@
 
 
 
-
-
-
-
      
       
      
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 5cb914e32d..312863c6b1 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -935,34 +935,34 @@
       
       
         
-          {{_i}}New{{/i}}
+          {{_i}}New{{/i}}
         
         
-          <span class="label success">{{/_i}}New{{/i}}</span>
+          <span class="label label-success">{{/_i}}New{{/i}}</span>
         
       
       
         
-          {{_i}}Warning{{/i}}
+          {{_i}}Warning{{/i}}
         
         
-          <span class="label warning">{{_i}}Warning{{/i}}</span>
+          <span class="label label-warning">{{_i}}Warning{{/i}}</span>
         
       
       
         
-          {{_i}}Important{{/i}}
+          {{_i}}Important{{/i}}
         
         
-          <span class="label important">{{_i}}Important{{/i}}</span>
+          <span class="label label-important">{{_i}}Important{{/i}}</span>
         
       
       
         
-          {{_i}}Info{{/i}}
+          {{_i}}Info{{/i}}
         
         
-          <span class="label info">{{_i}}Info{{/i}}</span>
+          <span class="label label-info">{{_i}}Info{{/i}}</span>
         
       
     
@@ -1235,12 +1235,12 @@
     
      
       
      {{_i}}Striped{{/i}}
      
       
      {{_i}}Uses a gradient to create a striped effect.{{/i}}
      
-      
      
+      
      
         
      
       
      
 
      -<div class="progress info
-     striped">
+<div class="progress progress-info
+     progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
@@ -1249,12 +1249,12 @@
     
      
       
      {{_i}}Animated{{/i}}
      
       
      {{_i}}Takes the striped example and animates it.{{/i}}
      
-      
      
+      
      
         
      
       
      
 
      -<div class="progress danger
-     striped active">
+<div class="progress progress-danger
+     progress-striped active">
   <div class="bar"
        style="width: 40%;"></div>
 </div>
@@ -1266,18 +1266,18 @@
   
      
     
      
       
      {{_i}}Additional colors{{/i}}
      
-      
      {{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}
      
+      
      {{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}
      
       
        
-        
      • .info
        • 
-        
      • .success
        • 
-        
      • .danger
        • 
+        
      • .progress-info
        • 
+        
      • .progress-success
        • 
+        
      • .progress-danger
        • 
       
      
       
      {{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}
      
     
      
     
      
       
      {{_i}}Behavior{{/i}}
      
       
      {{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}
      
-      
      {{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}
      
+      
      {{_i}}If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.{{/i}}
      
     
      
     
      
       
      {{_i}}Browser support{{/i}}
      
@@ -1324,7 +1324,3 @@
     
      
   
      
 
-
-
-
-
diff --git a/less/labels.less b/less/labels.less
index 06dc7f3c00..c0f4277502 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -9,8 +9,8 @@
   text-transform: uppercase;
   background-color: @grayLight;
   .border-radius(3px);
-  &.important { background-color: @errorText; }
-  &.warning   { background-color: @orange; }
-  &.success   { background-color: @successText; }
-  &.info      { background-color: @infoText; }
 }
+.label-important { background-color: @errorText; }
+.label-warning   { background-color: @orange; }
+.label-success   { background-color: @successText; }
+.label-info      { background-color: @infoText; }
diff --git a/less/progress-bars.less b/less/progress-bars.less
index eeb14eef74..ac820c610c 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -71,25 +71,25 @@
 // ------
 
 // Danger (red)
-.progress.danger .bar {
+.progress-danger .bar {
   #gradient > .vertical(#ee5f5b, #c43c35);
 }
-.progress.danger.striped .bar {
+.progress-danger.progress-striped .bar {
   #gradient > .striped(#ee5f5b);
 }
 
 // Success (green)
-.progress.success .bar {
+.progress-success .bar {
   #gradient > .vertical(#62c462, #57a957);
 }
-.progress.success.striped .bar {
+.progress-success.progress-striped .bar {
   #gradient > .striped(#62c462);
 }
 
 // Info (teal)
-.progress.info .bar {
+.progress-info .bar {
   #gradient > .vertical(#5bc0de, #339bb9);
 }
-.progress.info.striped .bar {
+.progress-info.progress-striped .bar {
   #gradient > .striped(#5bc0de);
 }

From 62f4a1571a3801c867b80c228464cc9c695f1d13 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 22:48:25 -0800
Subject: [PATCH 13/23] revamped the thumbnails examples to make them work and
 look better at higher resolution

---
 docs/assets/css/bootstrap-responsive.css |  6 +++++
 docs/assets/css/bootstrap.css            |  2 ++
 docs/components.html                     | 28 ++++++++++++------------
 docs/templates/pages/components.mustache | 28 ++++++++++++------------
 less/responsive.less                     |  8 +++++++
 less/thumbnails.less                     |  2 ++
 6 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f40f0c110d..ca03cecde8 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -342,4 +342,10 @@
   .offset11 {
     margin-left: 1130px;
   }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
 }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a17a4475dd..37b774fb94 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2988,6 +2988,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;
diff --git a/docs/components.html b/docs/components.html
index 52483572ee..7ba72f34da 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1057,22 +1057,22 @@
       
@@ -1083,7 +1083,7 @@
       
        
         
      • 
           
        
-            
+            
             
        
               
        Thumbnail label
        
               
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
@@ -1093,7 +1093,7 @@
         
        • 
         
      • 
           
        
-            
+            
             
        
               
        Thumbnail label
        
               
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
@@ -1128,7 +1128,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
     </a>
   </li>
   ...
@@ -1139,7 +1139,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <div class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
       <h5>Thumbnail label</h5>
       <p>Thumbnail caption right here...</p>
     </div>
@@ -1154,32 +1154,32 @@
       
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 312863c6b1..11874b9f35 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -985,22 +985,22 @@
       
@@ -1011,7 +1011,7 @@
       
          
         
        • 
           
          
-            
+            
             
          
               
          {{_i}}Thumbnail label{{/i}}
          
               
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
          
@@ -1021,7 +1021,7 @@
         
          • 
         
        • 
           
          
-            
+            
             
          
               
          {{_i}}Thumbnail label{{/i}}
          
               
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
          
@@ -1056,7 +1056,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
     </a>
   </li>
   ...
@@ -1067,7 +1067,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <div class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
       <h5>{{_i}}Thumbnail label{{/i}}</h5>
       <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
     </div>
@@ -1082,32 +1082,32 @@
       
diff --git a/less/responsive.less b/less/responsive.less
index 7320990799..db2675e3db 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -358,4 +358,12 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
 
+  // Thumbnails
+  .thumbnails {
+    margin-left: @gridGutterWidth * -1;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth;
+  }
+
 }
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 0ba749059d..541fbd6a74 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,6 +27,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;

From af9de238fd335d10d5d1df079419fde9aedd3cc9 Mon Sep 17 00:00:00 2001
From: Luke Hatcher 
Date: Sun, 29 Jan 2012 01:48:51 -0500
Subject: [PATCH 14/23] update all example pages to latest version

---
 examples/container-app.html |  2 +-
 examples/fluid-reverse.html | 21 ++++++++-------
 examples/fluid.html         | 51 ++++++++++++++++++-------------------
 examples/hero.html          |  2 +-
 4 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/examples/container-app.html b/examples/container-app.html
index df0e8dba48..63261fd8e1 100644
--- a/examples/container-app.html
+++ b/examples/container-app.html
@@ -25,7 +25,7 @@
         text-align: center; /* center align it with the container */
       }
       .container {
-        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
+        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 10 columns and not 12. */
       }
 
       /* The white background content wrapper */
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index 7de1630844..4a1993a41f 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -28,7 +28,7 @@
 
   
 
-    
          
+    
          
       
          
         
          
           Project name
@@ -37,7 +37,7 @@
             
        • About
          • 
             
        • Contact
          • 
           
        
-          
        Logged in as username
        
+          
        Logged in as username
        
         
        
       
        
     
      
@@ -45,24 +45,23 @@
     
      
       
      
         
      
-          
      Sidebar
      
-          
-          
      Logged in as username
      
+          
      Logged in as username
      
         
      
       
      
     
      
@@ -45,26 +45,25 @@
     
      
       
      
         
      
-          
      Sidebar
      
-          
-          
      Sidebar
      
-          
-          
      Sidebar
      
-          
      
       
      
@@ -83,12 +82,12 @@
            
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      
             
      View details »
      
           
      
-          
      
+          
      
             
      Heading
      
              
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      
             
      View details »
      
          
      
-          
      
+          
      
             
      Heading
      
             
      Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      
             
      View details »
      
@@ -104,12 +103,12 @@
            
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      
             
      View details »
      
           
      
-          
      
+          
      
             
      Heading
      
              
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      
             
      View details »
      
          
      
-          
      
+          
      
             
      Heading
      
             
      Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      
             
      View details »
      
diff --git a/examples/hero.html b/examples/hero.html
index 4803380c3d..c43102ccb9 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -28,7 +28,7 @@
 
   
 
-    
      
+    
      
       
      
         
      
           Project name

From bca269299b242c55a2511e752429c07d7639f7d2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 23:40:52 -0800
Subject: [PATCH 15/23] removing required .navbar-static class, rewrote docs to
 reflect the change, and updated the upgrade docs page to include the navbar
 section

---
 docs/assets/css/bootstrap.css            | 24 ++++++++++----------
 docs/components.html                     |  8 +++----
 docs/templates/pages/components.mustache |  8 +++----
 docs/templates/pages/upgrading.mustache  |  9 ++++++++
 docs/upgrading.html                      |  9 ++++++++
 less/navbar.less                         | 28 +++++++++++-------------
 6 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 37b774fb94..efd2219915 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2296,9 +2296,11 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .navbar {
   overflow: visible;
+  margin-bottom: 18px;
 }
 .navbar-inner {
-  background-color: #222222;
+  padding-left: 20px;
+  padding-right: 20px;
   background-color: #2c2c2c;
   background-image: -moz-linear-gradient(top, #333333, #222222);
   background-image: -ms-linear-gradient(top, #333333, #222222);
@@ -2308,6 +2310,9 @@ button.btn.small, input[type="submit"].btn.small {
   background-image: linear-gradient(top, #333333, #222222);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@@ -2452,16 +2457,6 @@ button.btn.small, input[type="submit"].btn.small {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
   outline: 0;
 }
-.navbar-static {
-  margin-bottom: 18px;
-}
-.navbar-static .navbar-inner {
-  padding-left: 20px;
-  padding-right: 20px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
 .navbar-fixed-top {
   position: fixed;
   top: 0;
@@ -2469,6 +2464,13 @@ button.btn.small, input[type="submit"].btn.small {
   left: 0;
   z-index: 1030;
 }
+.navbar-fixed-top .navbar-inner {
+  padding-left: 0;
+  padding-right: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
 .navbar .nav {
   position: relative;
   left: 0;
diff --git a/docs/components.html b/docs/components.html
index 7ba72f34da..63a4b3dd08 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -659,7 +659,7 @@
   
      
   
      Static navbar example
      
   
      An example of a static (not fixed to the top) navbar with project name, navigation, and search form.
      
-  
      
+  
      
     
      
       
      
         
@@ -712,7 +712,7 @@
       
      Navbar scaffolding
      
       
      The navbar requires only a few divs to structure it well for static or fixed display.
      
 
      -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       ...
@@ -720,7 +720,7 @@
   </div>
 </div>
 
      
-      
      To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
      
+      
      To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
      
 
       <div class="navbar navbar-fixed-top">
   ...
@@ -743,7 +743,7 @@
       
      Optional responsive variation
      
       
      Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.
      
 
      -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 11874b9f35..75ca3eb7e4 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -587,7 +587,7 @@
   
      
   
      {{_i}}Static navbar example{{/i}}
      
   
      {{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}
      
-  
      
+  
      
     
      
       
      
         
@@ -640,7 +640,7 @@
       
      {{_i}}Navbar scaffolding{{/i}}
      
       
      {{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}
      
 
      -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       ...
@@ -648,7 +648,7 @@
   </div>
 </div>
 
      
-      
      {{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
      
+      
      {{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
      
 
       <div class="navbar navbar-fixed-top">
   ...
@@ -671,7 +671,7 @@
       
      {{_i}}Optional responsive variation{{/i}}
      
       
      {{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
      
 
      -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1cf..95587456ac 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
     
    • {{_i}}Pills were restyled to be less rounded by default{{/i}}
      • 
     
    • {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
      •
    +

    {{_i}}Navbar (formerly topbar){{/i}}

    +

    {{_i}}Dropdown menus{{/i}}

    • {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
      • diff --git a/docs/upgrading.html b/docs/upgrading.html index c0778d9d07..d7ad30f561 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -186,6 +186,15 @@
    • Pills were restyled to be less rounded by default
    • Pills now have dropdown menu support (they share the same markup and styles as tabs)
    +

    Navbar (formerly topbar)

    +
      +
    • Base class changed from .topbar to .navbar
      • +
    • Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed)
      • +
    • Added vertical dividers to top-level nav
      • +
    • Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.
      • +
    • Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
      • +
    • Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.
      • +

    Dropdown menus

    • Updated the .dropdown-menu to tighten up spacing
      • diff --git a/less/navbar.less b/less/navbar.less index 404782e61a..25ca7b4e28 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -7,11 +7,15 @@ .navbar { overflow: visible; + margin-bottom: @baseLineHeight; } -// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present + +// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { - background-color: @navbarBackground; + padding-left: 20px; + padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); + .border-radius(4px); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); .box-shadow(@shadow); } @@ -142,20 +146,9 @@ } -// STATIC OR FIXED? -// ---------------- +// FIXED NAVBAR +// ------------ -// Static navbar -.navbar-static { - margin-bottom: @baseLineHeight; -} -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - .border-radius(4px); -} - -// Fixed navbar .navbar-fixed-top { position: fixed; top: 0; @@ -163,6 +156,11 @@ left: 0; z-index: @zindexFixedNavbar; } +.navbar-fixed-top .navbar-inner { + padding-left: 0; + padding-right: 0; + .border-radius(0); +} // NAVIGATION From 15a1c0ce7988aaf715096760fa99eff7b23937f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 23:58:39 -0800 Subject: [PATCH 16/23] add swatches to the color variables in less docs page --- docs/assets/css/docs.css | 24 +++ docs/less.html | 242 +++++++++++++---------------- docs/templates/pages/less.mustache | 242 +++++++++++++---------------- 3 files changed, 244 insertions(+), 264 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7876f300a3..9b8244d49b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -470,6 +470,30 @@ hr.soften { +/* Color swatches on LESS docs page +-------------------------------------------------- */ +/* Sets the width of the td */ +.swatch-col { + width: 30px; +} +/* Le swatch */ +.swatch { + display: inline-block; + width: 30px; + height: 20px; + margin: -6px 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +/* For white swatches, give a border */ +.swatch-bordered { + width: 28px; + height: 18px; + border: 1px solid #eee; +} + + /* Misc -------------------------------------------------- */ diff --git a/docs/less.html b/docs/less.html index 497a9dfe31..5935c91259 100644 --- a/docs/less.html +++ b/docs/less.html @@ -134,129 +134,33 @@ ================================================== -->
      -

      Bootstrap variables

      +

      Bootstrap variables LESS variables, their values, and usage guidelines

      -

      Hyperlinks

      - - - - - - - - - - - - - - - - - - - - -
      VariableValueUsage
      @linkColor#08cDefault link text color
      @linkColorHoverdarken(@linkColor, 15%)Default link text hover color
      -
      -

      Grayscale colors

      +

      Hyperlinks

      - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - + + + +
      VariableValue
      @black#000@linkColor#08cDefault link text color
      @grayDarker#222
      @grayDark#333
      @gray#555
      @grayLight#999
      @grayLighter#eee
      @white#fff@linkColorHoverdarken(@linkColor, 15%)Default link text hover color
      -
      -
      -

      Accent colors

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      VariableValue
      @blue#049cdb
      @green#46a546
      @red#9d261d
      @yellow#ffc40d
      @orange#f89406
      @pink#c3325f
      @purple#7a43b6
      -
      -
      -
      -

      Grid system

      - - - - - - - + @@ -273,19 +177,11 @@
      VariableValue
      @gridColumns@gridColumns 12
      -
      -

      Typography

      - - - - - - - + @@ -300,6 +196,88 @@
      VariableValue
      @baseFontSize@baseFontSize 13px
      +
      +

      Grayscale colors

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      @black#000
      @grayDarker#222
      @grayDark#333
      @gray#555
      @grayLight#999
      @grayLighter#eee
      @white#fff
      +

      Accent colors

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      @blue#049cdb
      @green#46a546
      @red#9d261d
      @yellow#ffc40d
      @orange#f89406
      @pink#c3325f
      @purple#7a43b6
      +

      Components

      @@ -311,6 +289,7 @@ @primaryButtonBackground @linkColor + @@ -320,6 +299,7 @@ @placeholderText @grayLight + @@ -329,26 +309,32 @@ @navbarHeight 40px + @navbarBackground @grayDarker + @navbarBackgroundHighlight @grayDark + @navbarText @grayLight + @navbarLinkColor @grayLight + @navbarLinkColorHover @white + @@ -360,50 +346,42 @@ @warningText #f3edd2 + @warningBackground #c09853 - - - @warningBorder - #f3edd2 + @errorText #b94a48 + @errorBackground #f2dede - - - @errorBorder - #e9c7c7 + @successText #468847 + @successBackground #dff0d8 - - - @successBorder - #cfe8c4 + @infoText #3a87ad + @infoBackground #d9edf7 - - - @infoBorder - #bfe1f2 + diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index ad6688e1ec..82b921d240 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -62,129 +62,33 @@ ================================================== -->
      -

      {{_i}}Bootstrap variables {{/i}}

      +

      {{_i}}Bootstrap variables LESS variables, their values, and usage guidelines{{/i}}

      -

      {{_i}}Hyperlinks{{/i}}

      - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Variable{{/i}}{{_i}}Value{{/i}}{{_i}}Usage{{/i}}
      @linkColor#08c{{_i}}Default link text color{{/i}}
      @linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}
      -
      -

      {{_i}}Grayscale colors{{/i}}

      +

      {{_i}}Hyperlinks{{/i}}

      - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - + + + +
      {{_i}}Variable{{/i}}{{_i}}Value{{/i}}
      @black#000@linkColor#08c{{_i}}Default link text color{{/i}}
      @grayDarker#222
      @grayDark#333
      @gray#555
      @grayLight#999
      @grayLighter#eee
      @white#fff@linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}
      -
      -
      -

      {{_i}}Accent colors{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Variable{{/i}}{{_i}}Value{{/i}}
      @blue#049cdb
      @green#46a546
      @red#9d261d
      @yellow#ffc40d
      @orange#f89406
      @pink#c3325f
      @purple#7a43b6
      -
      -
      -
      -

      {{_i}}Grid system{{/i}}

      - - - - - - - + @@ -201,19 +105,11 @@
      {{_i}}Variable{{/i}}{{_i}}Value{{/i}}
      @gridColumns@gridColumns 12
      -
      -

      {{_i}}Typography{{/i}}

      - - - - - - - + @@ -228,6 +124,88 @@
      {{_i}}Variable{{/i}}{{_i}}Value{{/i}}
      @baseFontSize@baseFontSize 13px
      +
      +

      {{_i}}Grayscale colors{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      @black#000
      @grayDarker#222
      @grayDark#333
      @gray#555
      @grayLight#999
      @grayLighter#eee
      @white#fff
      +

      {{_i}}Accent colors{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      @blue#049cdb
      @green#46a546
      @red#9d261d
      @yellow#ffc40d
      @orange#f89406
      @pink#c3325f
      @purple#7a43b6
      +

      {{_i}}Components{{/i}}

      @@ -239,6 +217,7 @@ @primaryButtonBackground @linkColor + @@ -248,6 +227,7 @@ @placeholderText @grayLight + @@ -257,26 +237,32 @@ @navbarHeight 40px + @navbarBackground @grayDarker + @navbarBackgroundHighlight @grayDark + @navbarText @grayLight + @navbarLinkColor @grayLight + @navbarLinkColorHover @white + @@ -288,50 +274,42 @@ @warningText #f3edd2 + @warningBackground #c09853 - - - @warningBorder - #f3edd2 + @errorText #b94a48 + @errorBackground #f2dede - - - @errorBorder - #e9c7c7 + @successText #468847 + @successBackground #dff0d8 - - - @successBorder - #cfe8c4 + @infoText #3a87ad + @infoBackground #d9edf7 - - - @infoBorder - #bfe1f2 + From 7bf27674523c35f8803311a964dc72a7093351c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 00:07:01 -0800 Subject: [PATCH 17/23] remove form docs from the styles and markup, it's no longer needed --- docs/assets/css/bootstrap.css | 13 +++++- docs/assets/css/docs.css | 17 -------- docs/base-css.html | 59 ++++++++++++-------------- docs/templates/pages/base-css.mustache | 59 ++++++++++++-------------- less/forms.less | 13 +++++- 5 files changed, 80 insertions(+), 81 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index efd2219915..c96818a564 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -943,9 +943,20 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec display: inline-block; margin-bottom: 0; } -.form-search label, .form-inline label { +.form-search label, +.form-inline label, +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { display: inline-block; } +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on, +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on { + vertical-align: middle; +} .control-group { margin-bottom: 9px; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9b8244d49b..74b5486285 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -543,19 +543,6 @@ form.well { margin: 18px 0; } -/* Form docs for horizontal forms */ -.form-docs { - padding-left: 10px; -} -.form-docs h3, -.form-docs p, -.form-docs li { - color: #777; -} -.form-docs hr { - margin: 18px 0; -} - /* Fake the :focus state to demo it */ .focused { border-color: rgba(82,168,236,.8); @@ -689,10 +676,6 @@ form.well { left: auto; } - /* Forms docs */ - .form-docs { - padding-left: 0; /* down from 10px */ - } } diff --git a/docs/base-css.html b/docs/base-css.html index 4651e9789c..3b4032805f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -952,22 +952,20 @@ For example, <code>section</code> should be wrapped as inline.
      -
      -

      What's included

      -

      Shown on the left are all the default form controls we support. Here's the bulleted list:

      -
        -
      • text inputs (text, password, email, etc)
        • -
      • checkbox
        • -
      • radio
        • -
      • select
        • -
      • multiple select
        • -
      • file input
        • -
      • textarea
        • -
      -
      -

      New defaults with v2.0

      -

      Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

      -
      +

      What's included

      +

      Shown on the left are all the default form controls we support. Here's the bulleted list:

      +
        +
      • text inputs (text, password, email, etc)
        • +
      • checkbox
        • +
      • radio
        • +
      • select
        • +
      • multiple select
        • +
      • file input
        • +
      • textarea
        • +
      +
      +

      New defaults with v2.0

      +

      Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

      @@ -1047,19 +1045,17 @@ For example, <code>section</code> should be wrapped as inline.
      -
      -

      Redesigned browser states

      -

      Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.

      -
      -

      Form validation

      -

      It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.

      +

      Redesigned browser states

      +

      Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.

      +
      +

      Form validation

      +

      It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.

       <fieldset
   class="control-group error">
   …
 </fieldset>
      -
      @@ -1152,14 +1148,15 @@ For example, <code>section</code> should be wrapped as inline.
      -
      -

      Prepend & append inputs

      -

      Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

      -
      -

      Checkboxes and radios

      -

      Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

      -

      Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

      -
      +

      Prepend & append inputs

      +

      Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

      +
      +

      Checkboxes and radios

      +

      Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

      +

      Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

      +
      +

      Inline forms and append/prepend

      +

      To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c15fcebd39..b464084dfe 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -880,22 +880,20 @@
      -
      -

      {{_i}}What's included{{/i}}

      -

      {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}

      -
        -
      • {{_i}}text inputs (text, password, email, etc){{/i}}
        • -
      • {{_i}}checkbox{{/i}}
        • -
      • {{_i}}radio{{/i}}
        • -
      • {{_i}}select{{/i}}
        • -
      • {{_i}}multiple select{{/i}}
        • -
      • {{_i}}file input{{/i}}
        • -
      • {{_i}}textarea{{/i}}
        • -
      -
      -

      {{_i}}New defaults with v2.0{{/i}}

      -

      {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}

      -
      +

      {{_i}}What's included{{/i}}

      +

      {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}

      +
        +
      • {{_i}}text inputs (text, password, email, etc){{/i}}
        • +
      • {{_i}}checkbox{{/i}}
        • +
      • {{_i}}radio{{/i}}
        • +
      • {{_i}}select{{/i}}
        • +
      • {{_i}}multiple select{{/i}}
        • +
      • {{_i}}file input{{/i}}
        • +
      • {{_i}}textarea{{/i}}
        • +
      +
      +

      {{_i}}New defaults with v2.0{{/i}}

      +

      {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}

      @@ -975,19 +973,17 @@
      -
      -

      {{_i}}Redesigned browser states{{/i}}

      -

      {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}

      -
      -

      {{_i}}Form validation{{/i}}

      -

      {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}

      +

      {{_i}}Redesigned browser states{{/i}}

      +

      {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}

      +
      +

      {{_i}}Form validation{{/i}}

      +

      {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}

       <fieldset
   class="control-group error">
   …
 </fieldset>
      -
      @@ -1080,14 +1076,15 @@
      -
      -

      {{_i}}Prepend & append inputs{{/i}}

      -

      {{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

      -
      -

      {{_i}}Checkboxes and radios{{/i}}

      -

      {{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}

      -

      {{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}

      -
      +

      {{_i}}Prepend & append inputs{{/i}}

      +

      {{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

      +
      +

      {{_i}}Checkboxes and radios{{/i}}

      +

      {{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}

      +

      {{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}

      +
      +

      {{_i}}Inline forms and append/prepend{{/i}}

      +

      {{_i}}To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.{{/i}}

      diff --git a/less/forms.less b/less/forms.less index 69ddbcac93..6b0f5ec52e 100644 --- a/less/forms.less +++ b/less/forms.less @@ -495,9 +495,20 @@ select:focus:required:invalid { } } .form-search label, -.form-inline label { +.form-inline label, +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { display: inline-block; } +// Make the prepend and append add-on vertical-align: middle; +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on, +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on { + vertical-align: middle; +} // Margin to space out fieldsets .control-group { From 059ff6bcbd48f18431ed66e4b1b2a97a9567b9f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 02:27:45 -0800 Subject: [PATCH 18/23] update hero example and examples overview --- docs/examples.html | 58 +++++++++++++++++++------- docs/templates/pages/examples.mustache | 58 +++++++++++++++++++------- examples/hero.html | 30 ++++++++++--- 3 files changed, 112 insertions(+), 34 deletions(-) diff --git a/docs/examples.html b/docs/examples.html index 70a1a54dda..7d79fc0a0a 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -82,20 +82,50 @@ - - -
      -
      -

      Examples from 1.x

      -
      - -

      Container app

      -

      Fluid layout

      -

      Reversed fluid layout

      -

      Hero marketing site

      - -
      +
        +
      • + + + +

        Basic marketing site

        +

        +
        • +
      • + + + +

        Fluid layout

        +

        +
        • +
      • + + + +

        Fluid layout reversed

        +

        +
        • +
      • + + + +

        Container application

        +

        +
        • +
      • + + + +

        Fullscreen

        +

        +
        • +
      • + + + +

        Simple layout

        +

        +
        • +
      -
      -
      -

      {{_i}}Examples from 1.x{{/i}}

      -
      - -

      Container app

      -

      Fluid layout

      -

      Reversed fluid layout

      -

      Hero marketing site

      - -
      +
        +
      • + + + +

        Basic marketing site

        +

        +
        • +
      • + + + +

        Fluid layout

        +

        +
        • +
      • + + + +

        Fluid layout reversed

        +

        +
        • +
      • + + + +

        Container application

        +

        +
        • +
      • + + + +

        Fullscreen

        +

        +
        • +
      • + + + +

        Simple layout

        +

        +
        • +
      diff --git a/examples/hero.html b/examples/hero.html index c43102ccb9..1fa39922f0 100644 --- a/examples/hero.html +++ b/examples/hero.html @@ -16,8 +16,10 @@ + @@ -31,12 +33,19 @@
      + + + + + Project name - +
      + +
      @@ -46,7 +55,7 @@

      Hello, world!

      -

      Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      +

      This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

      Learn more »

      @@ -69,11 +78,20 @@ +
      +

      © Company 2012

      + + + + + + From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: [PATCH 19/23] last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- docs/assets/css/bootstrap-responsive.css | 101 +++++++++++- docs/assets/css/bootstrap.css | 76 +++++---- docs/scaffolding.html | 1 - docs/templates/pages/scaffolding.mustache | 1 - examples/fluid.html | 182 ++++++++++++---------- less/grid.less | 73 ++++++++- less/layouts.less | 30 +--- less/mixins.less | 21 +-- less/responsive.less | 93 ++++++++++- less/variables.less | 9 -- 10 files changed, 399 insertions(+), 188 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index ca03cecde8..44e0125c13 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -77,6 +77,9 @@ width: auto; padding: 0 20px; } + .row-fluid { + width: 100%; + } .row { margin-left: 0; } @@ -162,6 +165,50 @@ .offset11 { margin-left: 702px; } + .row-fluid { + width: 102.76243093919337%; + margin-left: -2.762430939%; + } + .row-fluid [class*="span"] { + float: left; + margin-left: 2.762430939%; + } + .row-fluid .span1 { + width: 5.6451612899588115%; + } + .row-fluid .span2 { + width: 13.978494622708812%; + } + .row-fluid .span3 { + width: 22.31182795545881%; + } + .row-fluid .span4 { + width: 30.64516128820881%; + } + .row-fluid .span5 { + width: 38.97849462095881%; + } + .row-fluid .span6 { + width: 47.311827953708814%; + } + .row-fluid .span7 { + width: 55.645161286458816%; + } + .row-fluid .span8 { + width: 63.97849461920882%; + } + .row-fluid .span9 { + width: 72.31182795195882%; + } + .row-fluid .span10 { + width: 80.64516128470882%; + } + .row-fluid .span11 { + width: 88.97849461745884%; + } + .row-fluid .span12 { + width: 97.31182795020881%; + } } @media (max-width: 940px) { body { @@ -169,7 +216,7 @@ } .navbar-fixed-top { position: static; - margin-bottom: 36px; + margin-bottom: 18px; } .navbar-inner { padding: 5px; @@ -264,6 +311,12 @@ } } @media (min-width: 1200px) { + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } .container { width: 1170px; } @@ -342,10 +395,48 @@ .offset11 { margin-left: 1130px; } - .thumbnails { - margin-left: -30px; + .row-fluid { + width: 102.56143440326584%; + margin-left: -2.56%; } - .thumbnails > li { - margin-left: 30px; + .row-fluid [class*="span"] { + float: left; + margin-left: 2.56%; + } + .row-fluid .span1 { + width: 5.832601732615312%; + } + .row-fluid .span2 { + width: 14.16126839928198%; + } + .row-fluid .span3 { + width: 22.489935065948643%; + } + .row-fluid .span4 { + width: 30.818601732615313%; + } + .row-fluid .span5 { + width: 39.14726839928198%; + } + .row-fluid .span6 { + width: 47.47593506594863%; + } + .row-fluid .span7 { + width: 55.8046017326153%; + } + .row-fluid .span8 { + width: 64.13326839928197%; + } + .row-fluid .span9 { + width: 72.46193506594864%; + } + .row-fluid .span10 { + width: 80.7906017326153%; + } + .row-fluid .span11 { + width: 89.11926839928198%; + } + .row-fluid .span12 { + width: 97.44793506594864%; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c96818a564..60383fba05 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -126,7 +126,7 @@ a:hover { margin-left: 20px; } .span1 { - width: 60px; + width: 59.99999999999999px; } .span2 { width: 140px; @@ -194,6 +194,50 @@ a:hover { .offset11 { margin-left: 900px; } +.row-fluid { + width: 102.12765957421277%; + margin-left: -2.127659574%; +} +.row-fluid [class*="span"] { + float: left; + margin-left: 2.127659574%; +} +.row-fluid .span1 { + width: 6.249999999619791%; +} +.row-fluid .span2 { + width: 14.58333333211979%; +} +.row-fluid .span3 { + width: 22.91666666461979%; +} +.row-fluid .span4 { + width: 31.24999999711979%; +} +.row-fluid .span5 { + width: 39.58333332961979%; +} +.row-fluid .span6 { + width: 47.91666666211979%; +} +.row-fluid .span7 { + width: 56.24999999461979%; +} +.row-fluid .span8 { + width: 64.58333332711977%; +} +.row-fluid .span9 { + width: 72.91666665961978%; +} +.row-fluid .span10 { + width: 81.24999999211977%; +} +.row-fluid .span11 { + width: 89.58333332461977%; +} +.row-fluid .span12 { + width: 97.91666665711978%; +} .container { width: 940px; margin-left: auto; @@ -207,42 +251,18 @@ a:hover { .container:after { clear: both; } -.fluid-container { - position: relative; - min-width: 940px; +.container-fluid { padding-left: 20px; padding-right: 20px; *zoom: 1; } -.fluid-container:before, .fluid-container:after { +.container-fluid:before, .container-fluid:after { display: table; content: ""; } -.fluid-container:after { +.container-fluid:after { clear: both; } -.fluid-sidebar { - width: 220px; - margin: 0 20px 18px; -} -.sidebar-left { - padding-left: 260px; -} -.sidebar-right { - padding-right: 260px; -} -.sidebar-left .fluid-sidebar { - float: left; - margin-left: -240px; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: -240px; -} -.fluid-content { - float: left; - width: 100%; -} p { margin: 0 0 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 184b356083..b00f5630b5 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -124,7 +124,6 @@
      12
      -

      The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

      diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 6d5a66f8da..239d152652 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -52,7 +52,6 @@
      12
      -

      {{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

      diff --git a/examples/fluid.html b/examples/fluid.html index ce2d3b6289..1cdfd6568f 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -16,8 +16,13 @@ + @@ -30,98 +35,107 @@
      -
      +
      + + + + + Project name - -

      Logged in as username

      +
      + +

      Logged in as username

      +
      -
      -
      -
      - -
      -
      -
      - -
      -

      Hello, world!

      -

      Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      -

      Learn more »

      -
      - - -
      -
      -

      Heading

      -

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      -

      View details »

      +
      +
      +
      +
      + +
      +
      +
      +
      +

      Hello, world!

      +

      This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

      +

      Learn more »

      -
      -

      Heading

      -

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      -

      View details »

      -
      -
      -

      Heading

      -

      Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

      -

      View details »

      -
      -
      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +

      Heading

      +

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      +

      View details »

      +
      +
      +
      +
      -
      +
      - -
      -
      -

      Heading

      -

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      -

      View details »

      -
      -
      -

      Heading

      -

      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

      -

      View details »

      -
      -
      -

      Heading

      -

      Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

      -

      View details »

      -
      -
      +
      +

      © Company 2012

      +
      -
      - -
      -

      © Company 2012

      -
      -
      -
      +
      + + + + + + + - \ No newline at end of file + diff --git a/less/grid.less b/less/grid.less index d5b5f487d1..4493d0b952 100644 --- a/less/grid.less +++ b/less/grid.less @@ -1,14 +1,40 @@ // GRID SYSTEM // ----------- -// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there + + +// Default grid sizing +// ------------------- +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; + +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +@gridTotalWidth: @gridRowWidth; + + +// Columns and offseting mixins +// ---------------------------- +.columns(@columns: 1) { + //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth); +} +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); +} +// Necessary grid styles for every column to make them appear next to each other horizontally +.gridColumn() { + float: left; + margin-left: @gridGutterWidth; +} + +// Grid rows and columns +// --------------------- .row { margin-left: @gridGutterWidth * -1; .clearfix(); } -// Find all .span# classes within .row and give them the necessary properties for grid columns -// (supported by all browsers back to IE7) -// Credit to @dhg for the idea +// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) [class*="span"] { .gridColumn(); } @@ -39,3 +65,42 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } + + + +// FLUID GRID SYSTEM +// ----------------- +// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1. + +.row-fluid { + @gridColumnWidth: 6.382978723%; + @gridGutterWidth: 2.127659574%; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } +} diff --git a/less/layouts.less b/less/layouts.less index 14435c9d15..c8d358b24a 100644 --- a/less/layouts.less +++ b/less/layouts.less @@ -10,34 +10,8 @@ } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -.fluid-container { - position: relative; - min-width: @siteWidth; +.container-fluid { padding-left: @gridGutterWidth; padding-right: @gridGutterWidth; .clearfix(); -} - -// Sidebars (left and right options) -.fluid-sidebar { - width: @fluidSidebarWidth; - margin: 0 20px 18px; -} -.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } -.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } - -// Float the sidebars accordingly -.sidebar-left .fluid-sidebar { - float: left; - margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} - -// The main content area -.fluid-content { - float: left; - width: 100%; -} +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2bfcd053ee..2d0e2d4c08 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -133,31 +133,12 @@ // Site container // ------------------------- .container-fixed() { - width: @siteWidth; + width: @gridTotalWidth; margin-left: auto; margin-right: auto; .clearfix(); } -// Columns and offseting -// ------------------------- -.columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); -} -.offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); -} -// Necessary grid styles for every column to make them appear next to each other horizontally -.gridColumn() { - float: left; - margin-left: @gridGutterWidth; -} -// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something -.makeColumn(@columnSpan: 1) { - .gridColumn(); - .columns(@columnSpan); -} - // CSS3 PROPERTIES diff --git a/less/responsive.less b/less/responsive.less index db2675e3db..107fa7dd77 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -115,6 +115,10 @@ width: auto; padding: 0 20px; } + // Fluid rows + .row-fluid { + width: 100%; + } // Undo negative margin on rows .row { margin-left: 0; @@ -182,6 +186,42 @@ .offset10 { .offset(10); } .offset11 { .offset(11); } + // FLUID GRID + // ---------- + .row-fluid { + @gridColumnWidth: 5.801104972%; + @gridGutterWidth: 2.762430939%; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + @gridTotalWidth: @gridRowWidth; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } + } } @@ -198,7 +238,7 @@ // Unfix the navbar .navbar-fixed-top { position: static; - margin-bottom: @baseLineHeight * 2; + margin-bottom: @baseLineHeight; } .navbar-inner { padding: 5px; @@ -314,6 +354,14 @@ @gridGutterWidth: 30px; @siteWidth: 1170px; + // Thumbnails + .thumbnails { + margin-left: @gridGutterWidth * -1; + } + .thumbnails > li { + margin-left: @gridGutterWidth; + } + // Bring grid mixins to recalculate widths .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); @@ -358,12 +406,41 @@ .offset10 { .offset(10); } .offset11 { .offset(11); } - // Thumbnails - .thumbnails { - margin-left: @gridGutterWidth * -1; - } - .thumbnails > li { - margin-left: @gridGutterWidth; - } + // FLUID GRID + // ---------- + .row-fluid { + @gridColumnWidth: 5.982%; + @gridGutterWidth: 2.56%; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + @gridTotalWidth: @gridRowWidth; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } + } } diff --git a/less/variables.less b/less/variables.less index 4265d7ed31..c1e21978c3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -30,15 +30,6 @@ @pink: #c3325f; @purple: #7a43b6; -// Grid system -// Modify the grid styles in mixins.less -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// Fluid width sidebar -@fluidSidebarWidth: 220px; - // Typography @baseFontSize: 13px; @baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; From 0952f3796ec7a4bb3efc0c6ba7b88ed4b7f45ada Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:07:31 -0800 Subject: [PATCH 20/23] fix js readme api capitalization --- js/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/README.md b/js/README.md index 2f8e1716f5..b58fa1d407 100644 --- a/js/README.md +++ b/js/README.md @@ -73,7 +73,7 @@ Each plugin should expose it's raw constructor on a `Constructor` property -- ac ### DATA ACCESSOR -Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data api like this: +Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this: $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor From 8c763589a2058785936a33088935c50f622859de Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:09:10 -0800 Subject: [PATCH 21/23] update text on icons note --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 3b4032805f..0b2c4547ef 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1407,7 +1407,7 @@ For example, <code>section</code> should be wrapped as inline.
      - Heads up! Icon classes are echoed via CSS :after and on hover in the docs we show a light red background color show the icon's size. + Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.

      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index b464084dfe..2b9a459c80 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1335,7 +1335,7 @@
      - {{_i}}Heads up! Icon classes are echoed via CSS :after and on hover in the docs we show a light red background color show the icon's size.{{/i}} + {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}

      From 4e5b0e185e8cc9df3a77361380a44b16689fd2f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:12:13 -0800 Subject: [PATCH 22/23] refined pager styles to give a border on the links and improved hover state --- docs/assets/css/bootstrap.css | 9 +++++++-- less/pager.less | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 60383fba05..3f36aaa4d6 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2707,12 +2707,17 @@ button.btn.small, input[type="submit"].btn.small { } .pager a { display: inline-block; - padding: 6px 15px; - background-color: #f5f5f5; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } +.pager a:hover { + text-decoration: none; + background-color: #f5f5f5; +} .pager .next a { float: right; } diff --git a/less/pager.less b/less/pager.less index de009afdaa..104e41cab0 100644 --- a/less/pager.less +++ b/less/pager.less @@ -13,10 +13,15 @@ } .pager a { display: inline-block; - padding: 6px 15px; - background-color: #f5f5f5; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; .border-radius(15px); } +.pager a:hover { + text-decoration: none; + background-color: #f5f5f5; +} .pager .next a { float: right; } From 9fa8bde44d9bb6f26b16c7633a01bbe5ce7b20a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:15:38 -0800 Subject: [PATCH 23/23] fix animated/striped gradients in progress bars --- docs/assets/css/bootstrap.css | 2 +- less/progress-bars.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3f36aaa4d6..675446f62d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3127,7 +3127,7 @@ a.thumbnail:hover { -o-transition: width 0.6s ease; transition: width 0.6s ease; } -.progress.striped .bar { +.progress-striped .bar { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); diff --git a/less/progress-bars.less b/less/progress-bars.less index ac820c610c..c3144e1bd7 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -53,7 +53,7 @@ } // Striped bars -.progress.striped .bar { +.progress-striped .bar { #gradient > .striped(#62c462); .background-size(40px 40px); }