建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 導(dǎo)航
如果你想創(chuàng)建一個簡單的水平導(dǎo)航欄，可以在
- 元素上添加 .nav類，在每個
- 選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類:
實例
<
ul
class
=
"
nav
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link disabled
"
href
=
"
#
"
>
Disabled
a
>
li
>
ul
>
嘗試一下 ?導(dǎo)航對齊方式
.justify-content-center 類設(shè)置導(dǎo)航居中顯示， .justify-content-end 類設(shè)置導(dǎo)航右對齊。
實例
<
ul
class
=
"
nav justify-content-center
"
>
<
ul
class
=
"
nav justify-content-end
"
>
div
>
嘗試一下 ?垂直導(dǎo)航
.flex-column 類用于創(chuàng)建垂直導(dǎo)航：
實例
<
ul
class
=
"
nav flex-column
"
>
嘗試一下 ?選項卡
使用 .nav-tabs 類可以將導(dǎo)航轉(zhuǎn)化為選項卡。然后對于選中的選項使用 .active 類來標(biāo)記。
實例
<
ul
class
=
"
nav nav-tabs
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
href
=
"
#
"
>
Active
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link disabled
"
href
=
"
#
"
>
Disabled
a
>
li
>
ul
>
嘗試一下 ?膠囊導(dǎo)航
.nav-pills 類可以將導(dǎo)航項設(shè)置成膠囊形狀。
實例
<
ul
class
=
"
nav nav-pills
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
href
=
"
#
"
>
Active
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link disabled
"
href
=
"
#
"
>
Disabled
a
>
li
>
ul
>
嘗試一下 ?導(dǎo)航等寬
.nav-justified 類可以設(shè)置導(dǎo)航項齊行等寬顯示。
實例
<
ul
class
=
"
nav nav-pills nav-justified
"
>
..
ul
>
<
ul
class
=
"
nav nav-tabs nav-justified
"
>
..
ul
>
嘗試一下 ?膠囊下拉菜單
實例
<
ul
class
=
"
nav nav-pills
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
href
=
"
#
"
>
Active
a
>
li
>
<
li
class
=
"
nav-item dropdown
"
>
<
a
class
=
"
nav-link dropdown-toggle
"
data-toggle
=
"
dropdown
"
href
=
"
#
"
>
Dropdown
a
>
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 1
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 2
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 3
a
>
div
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link disabled
"
href
=
"
#
"
>
Disabled
a
>
li
>
ul
>
嘗試一下 ?選項卡下拉菜單
實例
<
ul
class
=
"
nav nav-tabs
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
href
=
"
#
"
>
Active
a
>
li
>
<
li
class
=
"
nav-item dropdown
"
>
<
a
class
=
"
nav-link dropdown-toggle
"
data-toggle
=
"
dropdown
"
href
=
"
#
"
>
Dropdown
a
>
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 1
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 2
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 3
a
>
div
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link disabled
"
href
=
"
#
"
>
Disabled
a
>
li
>
ul
>
嘗試一下 ?動態(tài)選項卡
如果你要設(shè)置選項卡是動態(tài)可切換的，可以在每個鏈接上添加 data-toggle="tab" 屬性。 然后在每個選項對應(yīng)的內(nèi)容的上添加 .tab-pane 類，對應(yīng)選項卡內(nèi)容的
元素使用 .tab-content 類 。。如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:
實例
<
ul
class
=
"
nav nav-tabs
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
data-toggle
=
"
tab
"
href
=
"
#home
"
>
Home
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-toggle
=
"
tab
"
href
=
"
#menu1
"
>
Menu 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-toggle
=
"
tab
"
href
=
"
#menu2
"
>
Menu 2
a
>
li
>
ul
>
<
div
class
=
"
tab-content
"
>
<
div
class
=
"
tab-pane active container
"
id
=
"
home
"
>
...
div
>
<
div
class
=
"
tab-pane container
"
id
=
"
menu1
"
>
...
div
>
<
div
class
=
"
tab-pane container
"
id
=
"
menu2
"
>
...
div
>
div
>
嘗試一下 ?膠囊狀動態(tài)選項卡
膠囊狀動態(tài)選項卡只需要將以上實例的代碼中 data-toggle 屬性設(shè)置為 data-toggle="pill":
實例
<
ul
class
=
"
nav nav-pills
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
data-toggle
=
"
pill
"
href
=
"
#home
"
>
Home
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-toggle
=
"
pill
"
href
=
"
#menu1
"
>
Menu 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-toggle
=
"
pill
"
href
=
"
#menu2
"
>
Menu 2
a
>
li
>
ul
>
<
div
class
=
"
tab-content
"
>
<
div
class
=
"
tab-pane active container
"
id
=
"
home
"
>
...
div
>
<
div
class
=
"
tab-pane container
"
id
=
"
menu1
"
>
...
div
>
<
div
class
=
"
tab-pane container
"
id
=
"
menu2
"
>
...
div
>
div
>
嘗試一下 ?
網(wǎng)站題目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4導(dǎo)航
本文URL：http://www.5511xx.com/article/dpegode.html
