From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:11:31 -0800 Subject: fix the navbar click and a few jank responsive problems --- docs/components.html | 81 ++++++++++++++++++++++++++++------------------------ 1 file changed, 44 insertions(+), 37 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index a2fac7360..950d1f35c 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 →

+ + -- cgit v1.2.3 From 99ac6ca08ed27126d2ad1dd4d0e820205aab9c48 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:39:36 -0800 Subject: update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader --- docs/components.html | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 950d1f35c..710e7de77 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

-- cgit v1.2.3 From 59d9983ebcc889b5e5626d672311e92657bfe3e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:03:14 -0800 Subject: updates to responsive and docs for responsive navbar --- docs/components.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 710e7de77..f9f8db057 100644 --- a/docs/components.html +++ b/docs/components.html @@ -766,6 +766,9 @@ </div> </div> +
+ Heads up! The responsive navbar requires the collapse plugin. +
-- cgit v1.2.3 From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: namespace progress bars and labels classes --- docs/components.html | 42 +++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f9f8db057..52483572e 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 @@
 
 
 
-
-
-
-