Martes, 07 Mayo 2024
All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
Take a regular <ul> of links and add .nav-tabs:
Take that same HTML, but use .nav-pills instead:
For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.
To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.
Add dropdown menus with a little extra HTML and the dropdowns javascript plugin.
A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Take a list of links and add class="nav nav-list":
Note For nesting within a nav list, include class="nav nav-list" on any nested <ul>.
Add a horizontal divider by creating an empty list item with the class .divider, like so:
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.
To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
I'm in Section 1.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
To make tabs fade in, add .fade to each .tab-pane.
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
Flip the order of the HTML and add a class to put tabs on the bottom.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
Swap the class to put tabs on the left.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
Swap the class to put tabs on the right.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
