From 8bb7def26cac4d3166fbf2cc98f16c4151794676 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 21:23:28 -0700 Subject: Navbar refactor * Now responsive by default (fits better with mobile-first approach) * Requires `.nav-header` to group `.navbar-brand` and `.navbar-toggle` for proper mobile display. * Changed `.nav-collapse` to `.navbar-collapse` * Simplified examples in docs --- components.html | 481 ++++++++++++++++++++++++-------------------------------- 1 file changed, 202 insertions(+), 279 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index d49e153f5..0c00ba264 100644 --- a/components.html +++ b/components.html @@ -1052,154 +1052,189 @@ base_url: "../"

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.

+ +

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

+
-
+ {% highlight html %} {% endhighlight %} + +
+

Plugin dependency

+

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

+
+

Make navbars accessible

Be sure to add a role="navigation" to every navbar to help with accessibility.

-

Navbar components

- - -

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

-
- -
-{% highlight html %} -Title -{% endhighlight %} - - -

Nav items are simple to add via unordered lists.

-
- -
-{% highlight html %} - -{% endhighlight %} - - -

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.

-
- - - - - - - - - -
-{% highlight html %} -
- - -
-{% endhighlight %} +

Optional navbar content

+

Quickly add other types of content, beyond links or forms, to a navbar with a few classes.

For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

{% highlight html %} {% endhighlight %} -

Text

+

Text in navbars

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

{% highlight html %} - +

Signed in as Mark Otto

{% endhighlight %} - +

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

{% highlight html %} - +

Signed in as Mark Otto

{% endhighlight %} @@ -1212,15 +1247,26 @@ base_url: "../"

Add .navbar-fixed-top.

-
{% highlight html %} @@ -1242,14 +1288,25 @@ body { padding-top: 70px; }

Add .navbar-fixed-bottom instead.

{% highlight html %} @@ -1270,15 +1327,26 @@ body { padding-bottom: 70px; }

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

-
{% highlight html %} @@ -1288,175 +1356,30 @@ body { padding-bottom: 70px; } {% endhighlight %} - -

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

-
- -
-{% highlight html %} - -{% endhighlight %} - -
-

Plugin dependency

-

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

-
- - - -

For instances where you have too many items in your navbar to fight within the viewport of a small device, add .nav-collapse-scrollable to your navbar's .nav-collapse to set a max-height and smooth scrolling.

-
- -
-{% highlight html %} - -{% endhighlight %} - -

Modify the look of the navbar by adding .navbar-inverse.

+
+ + +
+ +
+ {% highlight html %}