From 017b7cb804106a14d1a7b6f6b02109dddd4926a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 20:39:00 -0700 Subject: [PATCH] rewrite the navbar section --- docs/assets/css/docs.css | 33 ++- docs/components.html | 301 ++++++++++++++--------- docs/templates/pages/components.mustache | 301 ++++++++++++++--------- 3 files changed, 396 insertions(+), 239 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 83533ea784..889e3008d3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -52,7 +52,7 @@ h3 code { .subnav { font-size: 13px; } -.navbar-fixed-top .brand { +body > .navbar-fixed-top .brand { padding-right: 0; padding-left: 0; margin-left: 20px; @@ -64,7 +64,7 @@ h3 code { -moz-transition: all .2s linear; transition: all .2s linear; } -.navbar-fixed-top .brand:hover { +body > .navbar-fixed-top .brand:hover { text-decoration: none; } @@ -744,12 +744,39 @@ form.well { .bs-docs-example .well, .bs-docs-example .alert, .bs-docs-example .hero-unit, -.bs-docs-example .pagination { +.bs-docs-example .pagination, +.bs-docs-example .navbar { margin-bottom: 5px; } .bs-docs-example .pagination { margin-top: 0; } +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + height: 90px; +} +.bs-navbar-top-example { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: -1px; + -webkit-border-radius: 0 4px 0 4px; + -moz-border-radius: 0 4px 0 4px; + border-radius: 0 4px 0 4px; +} +.bs-navbar-bottom-example { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} form.bs-docs-example { padding-bottom: 19px; } diff --git a/docs/components.html b/docs/components.html index 5ff8244761..933d89a36c 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.

-
-
-
- - - - - + + +

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 -
- -
- -
- -
+
-
-
- - -

Navbar scaffolding

-

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

+
+ 
 <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.

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

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

+ +
+ + +

Navbar components

+ +

Brand

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

-<a class="brand" href="#">
-  Project name
-</a>
+<a class="brand" href="#">Project name</a>
-

Forms in navbar

+ +

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>
+
+ +

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.

- diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 149d816449..3f4ad2d08e 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -819,105 +819,213 @@

{{_i}}Navbar{{/i}}

-

{{_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}}

-
-
-
- - - - - + + +

{{_i}}Basic navbar{{/i}}

+

{{_i}}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.{{/i}}

+
+
+
{{_i}}Title{{/i}} -
- -
- -
- -
+
-
-
- - -

{{_i}}Navbar scaffolding{{/i}}

-

{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}

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

{{_i}}Fixed navbar{{/i}}

-

{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}

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

{{_i}}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.{{/i}}

-

{{_i}}Brand name{{/i}}

+ +
+ + +

{{_i}}Navbar components{{/i}}

+ +

{{_i}}Brand{{/i}}

{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}

-<a class="brand" href="#">
-  {{_i}}Project name{{/i}}
-</a>
+<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
-

{{_i}}Forms in navbar{{/i}}

+ +

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

+

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

+
+<ul class="nav">
+  <li class="active">
+    <a href="#">{{_i}}Home{{/i}}</a>
+  </li>
+  <li><a href="#">{{_i}}Link{{/i}}</a></li>
+  <li><a href="#">{{_i}}Link{{/i}}</a></li>
+</ul>
+
+

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

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

{{_i}}Forms{{/i}}

{{_i}}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.{{/i}}

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

{{_i}}Search form{{/i}}

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

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

+ +

{{_i}}Component alignment{{/i}}

+

{{_i}}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.{{/i}}

+ +

{{_i}}Using dropdowns{{/i}}

+

{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.{{/i}}

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

{{_i}}Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.{{/i}}

+ +

{{_i}}Text{{/i}}

+

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

+ + +
+ + +

{{_i}}Fixed navigation{{/i}}

+

{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}

+ +

Fixed to top

+

{{_i}}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.{{/i}}

+
+
+
+
+ {{_i}}Title{{/i}} + +
+
+
+
{{! /example }} +
+<div class="navbar navbar-fixed-top">
+  ...
+</div>
+
+ +

Fixed to bottom

+

{{_i}}Add .navbar-fixed-bottom instead.{{/i}}

+
+
+
+
+ {{_i}}Title{{/i}} + +
+
+
+
{{! /example }} +
+<div class="navbar navbar-fixed-bottom">
+  ...
+</div>
+
+ + +
+ + +

{{_i}}Responsive navbar{{/i}}

+

{{_i}}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.{{/i}}

+
+
+
+
+ + + + + + {{_i}}Title{{/i}} +
+ +
+ +
+ +
+
+
+
+
{{! /example }} 
 <div class="navbar">
   <div class="navbar-inner">
@@ -946,49 +1054,6 @@
     {{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
-

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

-

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

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

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

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

{{_i}}Component alignment{{/i}}

-

{{_i}}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.{{/i}}

-

{{_i}}Adding dropdown menus{{/i}}

-

{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.{{/i}}

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

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

-
-

{{_i}}Text in the navbar{{/i}}

-

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

-