From 9daf1661c5c9cce161e1981b484b7d7f04eac2e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 01:54:59 -0800 Subject: [PATCH 1/7] fix docs for fluid layout, update topbar to fix active text color for links --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- docs/scaffolding.html | 6 +++--- lib/navbar.less | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5eb8a4a7ce..e55d6d5440 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Jan 8 01:50:02 PST 2012 + * Date: Sun Jan 8 01:54:42 PST 2012 */ html, body { margin: 0; @@ -1600,7 +1600,7 @@ i { -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); } -.navbar .brand:hover, .navbar ul .active > a { +.navbar .brand:hover, .navbar .nav .active > a { color: #ffffff; text-decoration: none; background-color: #333333; diff --git a/bootstrap.min.css b/bootstrap.min.css index 33e4f7f809..20c8f65397 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-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);} -.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} diff --git a/docs/scaffolding.html b/docs/scaffolding.html index bf42d44687..10e5a43be0 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -243,11 +243,11 @@ 
 <body>
-  <div class="fluid-container">
-    <div class="sidebar">
+  <div class="fluid-container sidebar-left">
+    <div class="fluid-sidebar">
       ...
     </div>
-    <div class="content">
+    <div class="fluid-content">
       ...
     </div>
   </div>
diff --git a/lib/navbar.less b/lib/navbar.less
index 8ee203307f..70be434ba6 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -21,7 +21,7 @@
 .navbar {
   // Hover and active states
   .brand:hover,
-  ul .active > a {
+  .nav .active > a {
     color: @white;
     text-decoration: none;
     background-color: @navBarBgStart;

From 916761d56854ca4fcc8ea4afa68511fb26a93e4c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 01:57:05 -0800
Subject: [PATCH 2/7] fix styles on right aligned blockquote to flip padding
 and border appropriately

---
 bootstrap.css     | 6 +++++-
 bootstrap.min.css | 2 +-
 lib/type.less     | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/bootstrap.css b/bootstrap.css
index e55d6d5440..550f7fdcec 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan  8 01:54:42 PST 2012
+ * Date: Sun Jan  8 01:56:47 PST 2012
  */
 html, body {
   margin: 0;
@@ -485,6 +485,10 @@ blockquote small:before {
 }
 blockquote.pull-right {
   float: right;
+  padding-left: 0;
+  padding-right: 15px;
+  border-left: 0;
+  border-right: 5px solid #eee;
 }
 blockquote.pull-right p, blockquote.pull-right small {
   text-align: right;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 20c8f65397..af321d3142 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -87,7 +87,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
 abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
 blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;}
 blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';}
-blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
+blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 address{display:block;margin-bottom:18px;line-height:18px;}
 code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 code{padding:1px 3px;background-color:#fee9cc;}
diff --git a/lib/type.less b/lib/type.less
index 7e2c4a7a86..84130f3fa1 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -165,6 +165,10 @@ blockquote {
   // Float right with text-align: right
   &.pull-right {
     float: right;
+    padding-left: 0;
+    padding-right: 15px;
+    border-left: 0;
+    border-right: 5px solid #eee;
     p,
     small {
       text-align: right;

From cf05dc86774ea05aa0f40aff771538e6e2f405d2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 02:15:47 -0800
Subject: [PATCH 3/7] adjust navs for fine details on dropdowns in stacked nav
 and improved open state there

---
 bootstrap.css     | 17 ++++++++++++-----
 bootstrap.min.css | 10 ++++++----
 lib/navs.less     | 22 ++++++++++++++--------
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/bootstrap.css b/bootstrap.css
index 550f7fdcec..e60baa663b 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan  8 01:56:47 PST 2012
+ * Date: Sun Jan  8 02:15:22 PST 2012
  */
 html, body {
   margin: 0;
@@ -1925,7 +1925,7 @@ i {
 .pills.stacked > li:last-child > a {
   margin-bottom: 1px;
 }
-.tabs .dropdown-menu, .pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
@@ -1934,19 +1934,26 @@ i {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: #0088cc;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: #005580;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret, .pills .open .caret {
+.nav .open .caret, .nav .open a:hover .caret {
   border-top-color: #fff;
   filter: alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
 }
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
 .tabbable {
   zoom: 1;
 }
diff --git a/bootstrap.min.css b/bootstrap.min.css
index af321d3142..a4352cf92a 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -368,11 +368,13 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;}
 .pills.stacked>li>a{margin-bottom:3px;}
 .pills.stacked>li:last-child>a{margin-bottom:1px;}
-.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;}
+.nav .dropdown-menu{top:33px;border-width:1px;}
 .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
-.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;}
-.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;}
-.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;}
+.nav .dropdown-toggle:hover .caret{border-top-color:#005580;}
+.nav .open .dropdown-toggle{background-color:#999;border-color:#999;}
+.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.tabs.stacked .open>a:hover{border-color:#999;}
 .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;}
 .tabbable:after{clear:both;}
 .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;}
diff --git a/lib/navs.less b/lib/navs.less
index 743d772f37..dee482aea2 100644
--- a/lib/navs.less
+++ b/lib/navs.less
@@ -175,29 +175,35 @@
 // ---------
 
 // Position the menu
-.tabs .dropdown-menu,
-.pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
 .pills .dropdown-menu {
   .border-radius(4px);
 }
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: @linkColor;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: @linkColorHover;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret,
-.pills .open .caret {
+.nav .open .caret,
+.nav .open a:hover .caret {
   border-top-color: #fff;
   .opacity(100);
 }
 
+// Dropdowns in stacked tabs
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
+
 
 
 // TABBABLE

From 9e7acc637057292205906edc99fb23a49c937afa Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 02:30:18 -0800
Subject: [PATCH 4/7] fix responsive navbar nav treatment by using hover
 instead of click

---
 bootstrap.css       |  26 +++++++-----
 bootstrap.min.css   |   2 +-
 lib/navbar.less     |   2 +-
 lib/responsive.less | 100 ++++++++++++++++++++++++--------------------
 4 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/bootstrap.css b/bootstrap.css
index e60baa663b..57acf87757 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan  8 02:15:22 PST 2012
+ * Date: Sun Jan  8 02:30:05 PST 2012
  */
 html, body {
   margin: 0;
@@ -3054,7 +3054,7 @@ a.thumbnail:hover {
     width: auto;
     margin: 0;
   }
-  .nav {
+  .navbar .nav {
     position: absolute;
     top: 0;
     left: 0;
@@ -3062,29 +3062,32 @@ a.thumbnail:hover {
     padding-top: 40px;
     list-style: none;
   }
-  .nav, .nav > li:last-child a {
+  .navbar .nav, .navbar .nav > li:last-child a {
     -webkit-border-radius: 0 0 4px 0;
     -moz-border-radius: 0 0 4px 0;
     border-radius: 0 0 4px 0;
   }
-  .nav > li {
+  .navbar .nav > li {
     float: none;
     display: none;
   }
-  .nav > li > a {
+  .navbar .nav > li > a {
     float: none;
     background-color: #222;
   }
-  .nav > .active {
+  .navbar .nav > .active {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
   }
-  .navbar ul .active > a {
+  .navbar .nav > .active > a {
     background-color: transparent;
   }
-  .nav > .active a:after {
+  .navbar .nav > .active > a:hover {
+    background-color: #333;
+  }
+  .navbar .nav > .active > a:after {
     display: inline-block;
     width: 0;
     height: 0;
@@ -3100,8 +3103,11 @@ a.thumbnail:hover {
     opacity: 1;
     content: "↓";
   }
-  .nav > .active a:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+  .navbar .nav:hover > li {
+    display: block;
+  }
+  .navbar .nav:hover > li > a:hover {
+    background-color: #333;
   }
 }
 @media (min-width: 768px) and (max-width: 940px) {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index a4352cf92a..916a6b27b5 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
 .progress.info.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);background-image:-moz-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:-ms-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:-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);}
 .hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/lib/navbar.less b/lib/navbar.less
index 70be434ba6..dbad9dcd86 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -10,7 +10,7 @@
 .navbar {
   overflow: visible;
 }
-// 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: @navBarBgEnd;
   #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
diff --git a/lib/responsive.less b/lib/responsive.less
index 7856121be1..9f8f9ec6ca 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -81,52 +81,62 @@
   }
 
   // Make the nav work for small devices
-  .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .nav,
-  .nav > li:last-child a {
-    .border-radius(0 0 4px 0);
-  }
-  .nav > li {
-    float: none;
-    display: none;
-  }
-  .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar ul .active > a {
-    background-color: transparent;
-  }
-  .nav > .active a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid @white;
-    .opacity(100);
-    content: "↓";
-  }
-  .nav > .active a:hover {
-    background-color: rgba(255,255,255,.05);
+  .navbar {
+    .nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 180px;
+      padding-top: 40px;
+      list-style: none;
+    }
+    .nav,
+    .nav > li:last-child a {
+      .border-radius(0 0 4px 0);
+    }
+    .nav > li {
+      float: none;
+      display: none;
+    }
+    .nav > li > a {
+      float: none;
+      background-color: #222;
+    }
+    .nav > .active {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .nav > .active > a {
+      background-color: transparent;
+    }
+    .nav > .active > a:hover {
+      background-color: #333;
+    }
+    .nav > .active > a:after {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-top: 8px;
+      margin-left: 6px;
+      text-indent: -99999px;
+      vertical-align: top;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid @white;
+      .opacity(100);
+      content: "↓";
+    }
+
+    .nav:hover > li {
+      display: block;
+    }
+    .nav:hover > li > a:hover {
+      background-color: #333;
+    }
   }
+
 }
 
 

From b7acbd8476060bc1f2da9837693b0b86b68423c5 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 03:00:06 -0800
Subject: [PATCH 5/7] move collapsing navbar nav to 480 and below, unfloat nav
 for 768 and below to wrap links with position absolute

---
 bootstrap.css       | 102 ++++++++++++++++++----------------
 bootstrap.min.css   |   2 +-
 lib/responsive.less | 132 ++++++++++++++++++++++++--------------------
 3 files changed, 126 insertions(+), 110 deletions(-)

diff --git a/bootstrap.css b/bootstrap.css
index 57acf87757..a9a104ccce 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan  8 02:30:05 PST 2012
+ * Date: Sun Jan  8 02:58:37 PST 2012
  */
 html, body {
   margin: 0;
@@ -3007,53 +3007,6 @@ a.thumbnail:hover {
   visibility: hidden;
 }
 @media (max-width: 480px) {
-  .modal {
-    width: auto;
-    margin: 0;
-  }
-  .modal.fade.in {
-    top: auto;
-  }
-  .horizontal-form .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  .horizontal-form .controls {
-    margin-left: 0;
-  }
-  .horizontal-form .control-list {
-    padding-top: 0;
-  }
-  .horizontal-form .form-actions {
-    padding-left: 0;
-  }
-  .modal {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    right: 20px;
-    width: auto;
-  }
-  .modal .close {
-    padding: 10px;
-  }
-}
-@media (max-width: 768px) {
-  .container {
-    width: auto;
-    padding: 0 20px;
-  }
-  .row {
-    margin-left: 0;
-  }
-  .row > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
   .navbar .nav {
     position: absolute;
     top: 0;
@@ -3109,6 +3062,59 @@ a.thumbnail:hover {
   .navbar .nav:hover > li > a:hover {
     background-color: #333;
   }
+  .modal {
+    width: auto;
+    margin: 0;
+  }
+  .modal.fade.in {
+    top: auto;
+  }
+  .horizontal-form .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  .horizontal-form .controls {
+    margin-left: 0;
+  }
+  .horizontal-form .control-list {
+    padding-top: 0;
+  }
+  .horizontal-form .form-actions {
+    padding-left: 0;
+  }
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+  }
+  .modal .close {
+    padding: 10px;
+  }
+}
+@media (max-width: 768px) {
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  .row {
+    margin-left: 0;
+  }
+  .row > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
 }
 @media (min-width: 768px) and (max-width: 940px) {
   .container {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 916a6b27b5..0159780a6c 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
 .progress.info.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);background-image:-moz-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:-ms-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:-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);}
 .hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/lib/responsive.less b/lib/responsive.less
index 9f8f9ec6ca..e87b8495f4 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -18,67 +18,6 @@
 // ---------------------
 
 @media (max-width: 480px) {
-  // Resize modals
-  .modal {
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-
-  // Remove the horizontal form styles
-  .horizontal-form .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .horizontal-form .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .horizontal-form .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .horizontal-form .form-actions {
-    padding-left: 0;
-  }
-
-  // Modals
-  .modal {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    right: 20px;
-    width: auto;
-    .close {
-      padding: 10px;
-    }
-  }
-}
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-@media (max-width: 768px) {
-  // Remove width from containers
-  .container {
-    width: auto;
-    padding: 0 20px;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  .row > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
 
   // Make the nav work for small devices
   .navbar {
@@ -137,6 +76,77 @@
     }
   }
 
+  // Resize modals
+  .modal {
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+
+  // Remove the horizontal form styles
+  .horizontal-form .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .horizontal-form .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .horizontal-form .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .horizontal-form .form-actions {
+    padding-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+    .close {
+      padding: 10px;
+    }
+  }
+}
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+  
+  // Unfix the navbar
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  // Undo negative margin on rows
+  .row {
+    margin-left: 0;
+  }
+  // Make all columns even
+  .row > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+
 }
 
 

From 2376da40fb020289bcec4d2fe49ca2dc6f4eae97 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 03:11:51 -0800
Subject: [PATCH 6/7] cleanup organization of tabbable nav section

---
 docs/components.html | 53 +++++++++++---------------------------------
 1 file changed, 13 insertions(+), 40 deletions(-)

diff --git a/docs/components.html b/docs/components.html
index bd8753401a..3208e2390e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -262,23 +262,13 @@
   

     

       
What's included

-      
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:

-      
    
-        
  • top (default)
    • 
-        
  • right
    • 
-        
  • bottom
    • 
-        
  • left
    • 
-      

+      
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

       
Changing between them is easy and only requires changing very little markup.

-      

-      
Custom jQuery plugin

-      
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

-      
Get the javascript →

     

-    

+    

       
Tabbable example

       
To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

-      

+      

         

         

       
 
-      

-      
Straightforward markup

-      
Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

+    

+    

+      
Custom jQuery plugin

+      
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

+      
Get the javascript →

+    

+  

+    
+  
Straightforward markup

+  
Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

 
 <div class="tabbable">
   <ul class="nav tabs">
@@ -315,8 +312,6 @@
   </div>
 </div>
 

-    
-  
 
   
Tabbable in any direction

   

@@ -809,28 +804,6 @@
 
 
 
-
-

-  

-    
Autocomplete 

-  

-
-

-
-
-
-
-
-
-
-
 
 


From 21eb2dac8a650ba13dabb41fd2d221ff918cdd30 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 03:18:48 -0800
Subject: [PATCH 7/7] add icons in nav list example and markup

---
 docs/components.html | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/docs/components.html b/docs/components.html
index 3208e2390e..2a9d158461 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -222,9 +222,12 @@
       
Application-style navigation

       
Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

       
Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

+      
With icons

+      
Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

     

     

-      
Example sidebar navigation

+      
Example nav list

+      
Take a list of links and add class="nav list":

       

         
    
           
  • List header
    • 
@@ -237,9 +240,6 @@
           
  • Help
    • 
         

       
 
-    

-    

-      
Simple markup

 
 <ul class="nav list">
   <li class="nav-header">
@@ -253,6 +253,34 @@
   </li>
   ...
 </ul>
+

+    

+    

+      
Example with icons

+      
Same example, but with <i> tags for icons.

+      

+        
+      
 
+
+<ul class="nav list">
+  ...
+  <li>
+    <a href="#">
+      <i class="book"></i>
+      Library
+    </a>
+  </li>
+  ...
+</ul>