Komponen Navigasi Bootstrap
Tab dan Pil
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | |
| .nav nav-pills | Creates navigation pills | |
| .nav nav-pills nav-stacked | Creates vertical navigation pills | |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked | |
| .disabled | Indicates a disabled (unclickable) tab/pill | |
| Navigation tabs with dropdown menu | ||
| Navigation pills with dropdown menu | ||
| .tab-content | Together with .tab-pane and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | |
| .tab-pane | Together with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | |
Navbars
| Class | Description | Example |
|---|---|---|
| .navbar | Creates a navigation bar | |
| .navbar-brand | Added to a link or a header element inside the navbar to represent a logo or a header | |
| .navbar-btn | Vertically aligns a button inside a navbar | |
| .navbar-collapse | Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | |
| .navbar-default | Creates a default navigation bar (light-grey background color) | |
| .navbar-fixed-bottom | Makes the navbar stay at the bottom of the screen (sticky/fixed) | |
| .navbar-fixed-top | Makes the navbar stay at the top of the screen (sticky/fixed) | |
| .navbar-form | Added to form elements inside the navbar to vertically center them (proper padding) | |
| .navbar-header | Added to a container element that contains the link/element that represent a logo or a header | |
| .navbar-inverse | Creates a black navigation bar (instead of light-grey) | |
| .navbar-left | Aligns nav links, forms, buttons, or text, in the navbar to the left | |
| .navbar-link | Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) | |
| .navbar-nav | Used on a <ul> container that contains the list items with links inside a navigation bar | |
| .navbar-right | Aligns nav links, forms, buttons, or text in the navbar to the right. | |
| .navbar-static-top | Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) | |
| .navbar-text | Vertical align any elements inside the navbar that are not links (ensures proper padding) | |
| .navbar-toggle | Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) |
Breadcrumb dan Pagination
| Class | Description | Example |
|---|---|---|
| .breadcrumb | Makes a breadcrumb | |
| .pager | Provides simple pagination links (Previous/Next) | |
| .previous | Aligns the .pager previous button to the left | |
| .next | Aligns the .pager next button to the right | |
| .disabled | Indicates an unclickable link | |
| .pagination | Provides pagination links | |
| .pagination-lg | Used together with the .pagination class to provide larger pagination links | |
| .pagination-sm | Used together with the .pagination class to provide smaller pagination links | |
| .disabled | Indicates an unclickable link | |
| .active | Indicates the current page |
Label dan Lencana
| Class | Description | Example |
|---|---|---|
| .label label-default | Indicates a default grey label | |
| .label label-primary | Indicates a blue label of type "primary" | |
| .label label-success | Indicates a green label of type "success" | |
| .label label-info | Indicates a light blue label of type "info" | |
| .label label-warning | Indicates a yellow label of type "warning" | |
| .label label-danger | Indicates a red label of type "danger" | |
| .badge | Indicates new or unread items | |
| .jumbotron | Indicates a big box for calling extra attention to featured content or information | |
| .jumbotron (extra) | To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class |