建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 導(dǎo)航欄
導(dǎo)航欄一般放在頁(yè)面的頂部。
公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出江山免費(fèi)做網(wǎng)站回饋大家。
我們可以使用 .navbar 類來(lái)創(chuàng)建一個(gè)標(biāo)準(zhǔn)的導(dǎo)航欄，后面緊跟: .navbar-expand-xxl|xl|lg|md|sm 類來(lái)創(chuàng)建響應(yīng)式的導(dǎo)航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。
導(dǎo)航欄上的選項(xiàng)可以使用
- 元素并添加 class="navbar-nav" 類。 然后在
- 元素上添加 .nav-item 類， 元素上使用 .nav-link 類:
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-light
"
>
<
ul
class
=
"
navbar-nav
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 2
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 3
a
>
li
>
ul
>
nav
>
嘗試一下 ?垂直導(dǎo)航欄
通過(guò)刪除 .navbar-expand-xxl|xl|lg|md|sm 類來(lái)創(chuàng)建垂直導(dǎo)航欄:
實(shí)例
<
nav
class
=
"
navbar bg-light
"
>
<
ul
class
=
"
navbar-nav
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 2
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 3
a
>
li
>
ul
>
nav
>
嘗試一下 ?居中對(duì)齊的導(dǎo)航欄
通過(guò)添加 .justify-content-center 類來(lái)創(chuàng)建居中對(duì)齊的導(dǎo)航欄:
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-light justify-content-center
"
>
...
nav
>
嘗試一下 ?不同顏色導(dǎo)航欄
可以使用以下類來(lái)創(chuàng)建不同顏色導(dǎo)航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 對(duì)于暗色背景 .navbar-dark 需要設(shè)置文本顏色為淺色的，對(duì)于淺色背景 .navbar-light 需要設(shè)置文本顏色為深色的。
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-light navbar-light
"
>
<
ul
class
=
"
navbar-nav
"
>
<
li
class
=
"
nav-item active
"
>
<
a
class
=
"
nav-link
"
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
>
nav
>
<
nav
class
=
"
navbar navbar-expand-sm bg-dark navbar-dark
"
>
...
nav
>
<
nav
class
=
"
navbar navbar-expand-sm bg-primary navbar-dark
"
>
...
nav
>
嘗試一下 ?激活和禁用狀態(tài): 可以在 元素上添加 .active 類來(lái)高亮顯示選中的選項(xiàng)。 .disabled 類用于設(shè)置該鏈接是不可點(diǎn)擊的。
品牌/Logo
.navbar-brand 類用于高亮顯示品牌/Logo:
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-dark navbar-dark
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
Logo
a
>
...
nav
>
嘗試一下 ?可以使用 .navbar-brand 類來(lái)設(shè)置圖片自適應(yīng)導(dǎo)航欄。
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-dark navbar-dark
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
<
img
decoding
=
"
async
"
src
=
"
bird.jpg
"
alt
=
"
Logo
"
style
=
"
width:40px;
"
>
a
>
...
nav
>
嘗試一下 ?折疊導(dǎo)航欄
通常，小屏幕上我們都會(huì)折疊導(dǎo)航欄，通過(guò)點(diǎn)擊來(lái)顯示導(dǎo)航選項(xiàng)。
要?jiǎng)?chuàng)建折疊導(dǎo)航欄，可以在按鈕上添加 class="navbar-toggler", data-bs-toggle="collapse" 與 data-target="#thetarget" 類。然后在設(shè)置了 class="collapse navbar-collapse" 類的 div 上包裹導(dǎo)航內(nèi)容（鏈接）, div 元素上的 id 匹配按鈕 data-target 的上指定的 id:
實(shí)例
<
nav
class
=
"
navbar navbar-expand-md bg-dark navbar-dark
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
Navbar
a
>
<
button
class
=
"
navbar-toggler
"
type
=
"
button
"
data-bs-toggle
=
"
collapse
"
data-bs-target
=
"
#collapsibleNavbar
"
>
<
span
class
=
"
navbar-toggler-icon
"
>
span
>
button
>
<
div
class
=
"
collapse navbar-collapse
"
id
=
"
collapsibleNavbar
"
>
<
ul
class
=
"
navbar-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
>
ul
>
div
>
nav
>
嘗試一下 ?導(dǎo)航欄使用下拉菜單
導(dǎo)航欄上可以設(shè)置下拉菜單：
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-dark navbar-dark
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
Logo
a
>
<
ul
class
=
"
navbar-nav
"
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 1
a
>
li
>
<
li
class
=
"
nav-item
"
>
<
a
class
=
"
nav-link
"
href
=
"
#
"
>
Link 2
a
>
li
>
<
li
class
=
"
nav-item dropdown
"
>
<
a
class
=
"
nav-link dropdown-toggle
"
href
=
"
#
"
id
=
"
navbardrop
"
data-bs-toggle
=
"
dropdown
"
>
Dropdown link
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
>
ul
>
nav
>
嘗試一下 ?導(dǎo)航欄的表單與按鈕
導(dǎo)航欄的表單
