Martes, 07 Mayo 2024
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.
A simple link to show your brand or project name only requires an anchor tag.
Nav items are simple to add via unordered lists.
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
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.
For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
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.
Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.
Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
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.
Add .navbar-fixed-bottom instead.
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.
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.
Modify the look of the navbar by adding .navbar-inverse.
