Bootstrap 4教程-Bootstrap 4 Navs - 书目录

Bootstrap 4教程-Bootstrap 4 Navs

Add navigation tabs and pills easily with Bootstrap’s .nav class.

Bootstrap’s .nav class (and associated classes) lets you turn a list into tabs and navigation “pills”.

To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.

However, using a <ul> is not a requirement — you can just as easily use navs on their own.

Base Nav

Bootstrap 4 provides a base style that you can use with nav items. You can either add further Bootstrap styles to this base or customize it according to your own needs.

The base nav component uses the .nav class on the outer navigation element such as a <ul> or <nav> element.

On <ul> Elements




On <nav> Elements

Bootstrap 4 vs Bootstrap 3

  • Bootstrap 3 doesn’t use the .nav-item or .nav-link classes.
  • Bootstrap 4 requires .nav-item to be applied to any <li> elements.
  • Bootstrap 4 requires .nav-link to be applied to the <a> element.
  • Bootstrap 3 requires any .active class to be applied to the <li> element.
  • Bootstrap 4 requires any .active class to be applied to the <a> element.

Vertical Navs

Add the .flex-column utility class to the .nav element to stack the nav items vertically.

Tabs

Add class="nav nav-tabs" to the <ul> element containing the list of navigation items.

Also use class="active" to make a tab the selected tab.

Pills

Change nav-tabs to nav-pills to display pills instead.

Vertical Pills

As with any nav, you can stack pills vertically by adding the .flex-column utility class to the class list.

Disabled Links

You can add Bootstrap’s .disabled class to make a tab or pill appear to be disabled.

Note that this only makes the nav look disabled. It doesn’t actually disabled any <a> functionality, so you will need to use other means to actually disable that element (such as JavaScript).

Tabs with Dropdown Menus

You can add a dropdown menu to a tab or pill. In this case, the .dropdown class is applied to a <li> element (not a <div> element).

Tabs

Pills

Tabbable Panes

You can even use Bootstrap to create tabbable panels of content.

To do this, ensure each <a> in the navigation has data-toggle="tab" or data-toggle="pill" (depending on whether you’re using tabs or pills). Then, beneath the tab list, add a <div> with the .tab-content class. This will contain the content. Then, for each piece of content, nest another <div> with the .tab-pane class.

Also, you can make tabs fade in by adding the .fade class to each .tab-pane. The first tab pane (or the active tab pane) must also have the .show class to properly fade in initial content.

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navs.cfm 由工具自动翻译,由书目录整理