Bootstrap study notes (vi)--navigation

First, the basic

<ulclass="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul>

The bootstrap framework makes navigation bars primarily through the ". Nav" style. The default ". Nav" style does not provide a default navigation style and must be attached to another style to be valid, such as "Nav-tabs", "nav-pills", and so on

Second, tab-shaped tab navigation

Add the Class "Nav-tabs" if you are currently adding "active" on Li, if you disable adding "disabled"

<ulclass="nav nav-tabs"> <liclass="Active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <liclass="Disabled"><a href="##">Responsive</a></li> </ul>

Three, capsule-shaped navigation

<ulclass="nav nav-pills">//here with Nav-pills .<liclass="Active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <liclass="Disabled"><a href="##">Responsive</a></li></ul>

Four, vertical navigation

<ulclass="nav nav-tabs nav-stacked">//plus nav-stacked .<liclass="Active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <liclass="Disabled"><a href="##">Responsive</a></li> </ul> <br/><ulclass="nav nav-pills nav-stacked">//plus nav-stacked .<liclass="Active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <liclass="Nav-divider"></li> <liclass="Disabled"><a href="##">Responsive</a></li></ul>

Five, adaptive navigation

Adaptive navigation means that the navigation occupies the entire width of the container, adding the class "nav-justified" to be used with "nav-pills" or "Nav-tabs".

<ulclass="nav nav-tabs nav-justified"> <liclass="Active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul>

六、二级 Navigation

<ulclass="nav nav-pills"> <liclass="Active"><a href="##"> Home </a></li> <liclass="dropdown">//Add dropdown<a href="##" class="Dropdown-toggle"data-toggle="dropdown"> Tutorial <spanclass="Caret"></span></a>//Add Dropdown-toggle Class and Data-toggle= "Dropdown" Property<ulclass="Dropdown-menu">//Add Dropdown-menu class<li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##"> About Us </a></li></ul>

Seven, breadcrumbs navigation

class="breadcrumb">  <li><a href="#" > Home </a></li>  <li><a href="#"> My book </a> </li>  Class="active"

Bootstrap study notes (vi)--navigation