From 017b7cb804106a14d1a7b6f6b02109dddd4926a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 20:39:00 -0700 Subject: rewrite the navbar section --- docs/components.html | 297 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 181 insertions(+), 116 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5ff824476..933d89a36 100644 --- a/docs/components.html +++ b/docs/components.html @@ -896,105 +896,213 @@

Navbar

-

Static navbar example

-

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

-
-
-
- - - - - - Title -
- -
- -
- -
-
-
-
-

Navbar scaffolding

-

The navbar requires only a few divs to structure it well for static or fixed display.

+

Basic navbar

+

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

+
+
+
+ Title + +
+
+ 
 <div class="navbar">
   <div class="navbar-inner">
-    <div class="container">
-      ...
-    </div>
+    <a class="brand" href="#">Title</a>
+    <ul class="nav">
+      <li class="active"><a href="#">Home</a></li>
+      <li><a href="#">Link</a></li>
+      <li><a href="#">Link</a></li>
+    </ul>
   </div>
 </div>
-

Fixed navbar

-

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

+ + +
+ + +

Navbar components

+ +

Brand

+

A simple link to show your brand or project name only requires an anchor tag.

-<div class="navbar navbar-fixed-top">
-  ...
-</div>
+<a class="brand" href="#">Project name</a>
+ +

Nav links

+

Nav items are simple to add via unordered lists.

-<div class="navbar navbar-fixed-bottom">
-  ...
-</div>
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
- -

When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

-

Brand name

-

A simple link to show your brand or project name only requires an anchor tag.

+

You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:

-<a class="brand" href="#">
-  Project name
-</a>
+<ul class="nav">
+  ...
+  <li class="divider-vertical"></li>
+  ...
+</ul>
-

Forms in navbar

+ +

Forms

To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

 <form class="navbar-form pull-left">
   <input type="text" class="span2">
 </form>
+ +

Search form

For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.

 <form class="navbar-search pull-left">
   <input type="text" class="search-query" 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.collapse, and add the navbar toggle button, .btn-navbar.

+ +

Component alignment

+

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

+ +

Using dropdowns

+

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.

+
+<ul class="nav">
+  <li class="dropdown">
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+      Account
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
+

Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.

+ +

Text

+

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

+ + +
+ + +

Fixed navigation

+

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

+ +

Fixed to top

+

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

+
+
+
+
+ Title + +
+
+
+
+
+<div class="navbar navbar-fixed-top">
+  ...
+</div>
+
+ +

Fixed to bottom

+

Add .navbar-fixed-bottom instead.

+
+
+
+
+ Title + +
+
+
+
+
+<div class="navbar navbar-fixed-bottom">
+  ...
+</div>
+
+ + +
+ + +

Responsive navbar

+

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

+
+
+
+
+ + + + + + Title +
+ +
+ +
+ +
+
+
+
+ 
 <div class="navbar">
   <div class="navbar-inner">
@@ -1023,49 +1131,6 @@
     Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
-  
Nav links

-  
Nav items are simple to add via unordered lists.

-
-<ul class="nav">
-  <li class="active">
-    <a href="#">Home</a>
-  </li>
-  <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
-</ul>
-

-  
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:

-
-<ul class="nav">
-  ...
-  <li class="divider-vertical"></li>
-  ...
-</ul>
-

-  
Component alignment

-  
To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

-  
Adding dropdown menus

-  
Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.

-
-<ul class="nav">
-  <li class="dropdown">
-    <a href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown">
-          Account
-          <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-</ul>
-

-  
Get the javascript →

-  

-  
Text in the navbar

-  
Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.

-
 
 
 
-- 
cgit v1.2.3