建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 導(dǎo)航
如果你想創(chuàng)建一個(gè)簡單的水平導(dǎo)航欄，可以在
- 元素上添加 .nav類，在每個(gè)
- 選項(xiàng)上添加 .nav-item 類，在每個(gè)鏈接上添加 .nav-link 類:
10年積累的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有屯留免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
實(shí)例
<
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)航對(duì)齊方式
.justify-content-center 類設(shè)置導(dǎo)航居中顯示， .justify-content-end 類設(shè)置導(dǎo)航右對(duì)齊。
實(shí)例
<
ul
class
=
"
nav justify-content-center
"
>
<
ul
class
=
"
nav justify-content-end
"
>
div
>
嘗試一下 ?垂直導(dǎo)航
.flex-column 類用于創(chuàng)建垂直導(dǎo)航：
實(shí)例
<
ul
class
=
"
nav flex-column
"
>
嘗試一下 ?選項(xiàng)卡
使用 .nav-tabs 類可以將導(dǎo)航轉(zhuǎn)化為選項(xiàng)卡。然后對(duì)于選中的選項(xiàng)使用 .active 類來標(biāo)記。
實(shí)例
<
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)航項(xiàng)設(shè)置成膠囊形狀。
實(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)航項(xiàng)齊行等寬顯示。
實(shí)例
<
ul
class
=
"
nav nav-pills nav-justified
"
>
..
ul
>
<
ul
class
=
"
nav nav-tabs nav-justified
"
>
..
ul
>
嘗試一下 ?膠囊下拉菜單
實(shí)例
<
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-bs-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
>
嘗試一下 ?選項(xiàng)卡下拉菜單
實(shí)例
<
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-bs-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
>
嘗試一下 ?動(dòng)態(tài)選項(xiàng)卡
如果你要設(shè)置選項(xiàng)卡是動(dòng)態(tài)可切換的，可以在每個(gè)鏈接上添加 data-bs-toggle="tab" 屬性。 然后在每個(gè)選項(xiàng)對(duì)應(yīng)的內(nèi)容的上添加 .tab-pane 類，對(duì)應(yīng)選項(xiàng)卡的內(nèi)容的
標(biāo)簽使用 .tab-content 類 。如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:
實(shí)例
<
ul
class
=
"
nav nav-tabs
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
data-bs-toggle
=
"
tab
"
href
=
"
#home
"
>
Home
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-bs-toggle
=
"
tab
"
href
=
"
#menu1
"
>
Menu 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-bs-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
>
嘗試一下 ?膠囊狀動(dòng)態(tài)選項(xiàng)卡
膠囊狀動(dòng)態(tài)選項(xiàng)卡只需要將以上實(shí)例的代碼中 data-bs-toggle 屬性設(shè)置為 data-bs-toggle="pill":
實(shí)例
<
ul
class
=
"
nav nav-pills
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link active
"
data-bs-toggle
=
"
pill
"
href
=
"
#home
"
>
Home
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-bs-toggle
=
"
pill
"
href
=
"
#menu1
"
>
Menu 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
data-bs-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
>
嘗試一下 ?
分享名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5導(dǎo)航
網(wǎng)站鏈接：http://www.5511xx.com/article/djpsjdo.html
