Lunes, 07 Abril 2025
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.
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.
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
One fine body…
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
Call a modal with id myModal with a single line of JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean | true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false |
If a remote url is provided, content will be loaded via jQuery's
|
Activates your content as a modal. Accepts an optional options object.
Manually toggles a modal.
Manually opens a modal.
Manually hides a modal.
Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event | Description |
|---|---|
| show | This event fires immediately when the show instance method is called. |
| shown | This event is fired when the modal has been made visible to the user (will wait for css transitions to complete). |
| hide | This event is fired immediately when the hide instance method has been called. |
| hidden | This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). |
A pocos meses del Bicentenario y con las elecciones generales...
