Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 12 Navs and Navbars

 

12.1 Navs

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

 

Tabs

img245.png

 

img4.pngThe .nav-tabs class requires the .nav base class.

img246.png

 

12.2Pills Style

 

img247.png

 

Pills are also vertically stackable. Just add .nav-stacked

img248.png

img249.png

 

12.3 Justified Navs

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

 

img4.pngJustified navbar nav links are currently not supported.

 

img250.png

img251.png

 

12.4 Disabled Links

For any nav component ttabs or pills), add .disabled for gray links and no hover effects.

 

img252.png

img253.png

 

12.8 Using Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

 

12.8.1 Tabs And Dropdowns

 

img254.png

img255.png

img256.png

 

12.8.2 Pills With Dropdowns

 

img257.png

img258.png

img259.png