How to Use the bootstrap component navigation component

How to Use the bootstrap component navigation component

In the previous article, we will introduce you to the "bootstrap components" drop-down menu by "click". Here we will introduce you to the use of the bootstrap navigation components. Let's take a look!

The navigation components in Bootstrap depend on the same. nav class and ul class, And the status class is also shared. You can change the style of a modifier.

1. Tab

. Nav-tabs

<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li></ul>

2. Capsule Tab

. Nav-pills

<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li></ul>

3. Vertical navigation

You only need to add. nav-stacked to implement vertical navigation.

<ul class="nav nav-pills nav-stacked" role="tablist"> ...</ul>

4. Disabled links

To disable a navigation option, you only need to add. disabled on the corresponding li.

<ul class="nav nav-pills" role="tablist"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ...</ul>

5. Add a drop-down menu for navigation options

If you want to navigate to a drop-down menu, you can modify the corresponding li

1) Add. dropdown to li

2) label a is used as the trigger of the drop-down menu, adding. dropdown-toggle and data-toggle = "dropdown"

3) Add text and span in tag

4) add ul in li, that is, dropdown-menu.

<ul class="nav nav-tabs"> ... <li class="dropdown">  <a class="dropdown-toggle" data-toggle="dropdown" href="#">   Dropdown    <span class="caret"></span>  </a>  <ul class="dropdown-menu">   ...  </ul> </li> ...</ul>

The preceding section describes how to use the navigation component of bootstrap components. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!