rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity
a4e9a6845a
Bootstrap/docs/components/navbar.md
Mark Otto f1e10c37fd rewrite navbar bits some more
2015-08-17 23:43:59 -07:00

5.1 KiB
Raw Blame History

layout title group
docs Navbar components

The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

Basics

Here's what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar and a color scheme class (either .navbar-default or .navbar-inverse).
  • When using multiple components in a navbar, some alignment classes are required.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use .pull-left and .pull-right to quickly align sub-components.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Supported content

Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:

  • .navbar-brand for your company, product, or project name
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns)
  • .navbar-form for vertically centering default-sized inputs and buttons.

Here's an example of all the sub-components included in a default, light navbar:

{% example html %}

Navbar Search {% endexample %}

Inverse theme

When you want a darker navbar with light text colors, replace the .navbar-default with .navbar-inverse.

{% example html %}

Navbar Search {% endexample %}

Containers

Although it's not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of the navbar.

{% example html %}

{% endexample %}

{% example html %}

{% endexample %}

Collapsible content

Our collapse plugin allows you to use a <button> or <a> to toggle hidden content.

{% example html %}

Collapsed content

Toggleable via the navbar brand.
☰ {% endexample %}

For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.

{% example html %}

☰
Responsive navbar
{% endexample %}