Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Navigation Elements
Bootstrap - Navigation Elements
Bootstrap provides a few different options for stypng navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style.
Tabular Navigation or Tabs
To create a tabbed navigation menu −
Start with a basic unordered pst with the base class of .nav
Add class .nav-tabs.
The following example demonstrates this −
<p>Tabs Example</p> <ul class = "nav nav-tabs"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul>
Pills Navigation
Basic Pills
To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs.
The following example demonstrates this −
<p>Pills Example</p> <ul class = "nav nav-pills"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul>
Vertical Pills
You can stack the pills vertically using the class .nav-stacked along with the classes − .nav, .nav-pills.
The following example demonstrates this −
<p>Vertical Pills Example</p> <ul class = "nav nav-pills nav-stacked"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul>
Justified Nav
You can make tabs or pills of equal widths as of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav pnks are stacked.
The following example demonstrates this −
<p>Justified Nav Elements Example</p> <ul class = "nav nav-pills nav-justified"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul> <br> <br> <br> <ul class = "nav nav-tabs nav-justified"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul>
Disabled Links
For each of the .nav classes, if you add the .disabled class, it will create a gray pnk that also disables the :hover state as shown in the following example −
<p>Disabled Link Example</p> <ul class = "nav nav-pills"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p class = "disabled"><a href = "#">iOS(disabled pnk)</a></p> <p><a href = "#">VB.Net</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul> <br> <br> <ul class = "nav nav-tabs"> <p class = "active"><a href = "#">Home</a></p> <p><a href = "#">SVN</a></p> <p><a href = "#">iOS</a></p> <p class = "disabled"><a href = "#">VB.Net(disabled pnk)</a></p> <p><a href = "#">Java</a></p> <p><a href = "#">PHP</a></p> </ul>
This class will only change the <a> s appearance, not its functionapty. Use custom JavaScript to disable pnks here.
Dropdowns
Navigation menus share a similar syntax with dropdown menus. By default, you have a pst item that has an anchor working in conjunction with some data-attributes to trigger an unordered pst with a .dropdown-menu class.
Tabs with Dropdowns
To add dropdowns to tab −
Start with a basic unordered pst with the base class of .nav
Add the class .nav-tabs.
Now add an unordered pst with a .dropdown-menu class.
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<p class = "active"><a href = "#">Home</a></p>
<p><a href = "#">SVN</a></p>
<p><a href = "#">iOS</a></p>
<p><a href = "#">VB.Net</a></p>
<p class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">Swing</a></p>
<p><a href = "#">jMeter</a></p>
<p><a href = "#">EJB</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</p>
<p><a href = "#">PHP</a></p>
</ul>
Pills with Dropdowns
To do the same thing with pills, simply swap the .nav-tabs class with .nav-pills as shown in the following example.
<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
<p class = "active"><a href = "#">Home</a></p>
<p><a href = "#">SVN</a></p>
<p><a href = "#">iOS</a></p>
<p><a href = "#">VB.Net</a></p>
<p class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java <span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<p><a href = "#">Swing</a></p>
<p><a href = "#">jMeter</a></p>
<p><a href = "#">EJB</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</p>
<p><a href = "#">PHP</a></p>
</ul>
Advertisements