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 5eb8a4a7c..e55d6d544 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 33e4f7f80..20c8f6539 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 bf42d4468..10e5a43be 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 8ee203307..70be434ba 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 e55d6d544..550f7fdce 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 20c8f6539..af321d314 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 7e2c4a7a8..84130f3fa 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 550f7fdce..e60baa663 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 af321d314..a4352cf92 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 743d772f3..dee482aea 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 e60baa663..57acf8775 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 a4352cf92..916a6b27b 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 70be434ba..dbad9dcd8 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 7856121be..9f8f9ec6c 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 57acf8775..a9a104ccc 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 916a6b27b..0159780a6 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 9f8f9ec6c..e87b8495f 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 bd8753401..3208e2390 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 3208e2390..2a9d15846 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>