建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 導(dǎo)航欄
導(dǎo)航欄一般放在頁面的頂部。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),保靖企業(yè)網(wǎng)站建設(shè),保靖品牌網(wǎng)站建設(shè),網(wǎng)站定制,保靖網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,保靖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
我們可以使用 .navbar 類來創(chuàng)建一個(gè)標(biāo)準(zhǔn)的導(dǎo)航欄，后面緊跟: .navbar-expand-xl|lg|md|sm 類來創(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)航欄
通過刪除 .navbar-expand-xl|lg|md|sm 類來創(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)航欄
通過添加 .justify-content-center 類來創(chuàng)建居中對(duì)齊的導(dǎo)航欄:
實(shí)例
<
nav
class
=
"
navbar navbar-expand-sm bg-light justify-content-center
"
>
...
nav
>
嘗試一下 ?不同顏色導(dǎo)航欄
可以使用以下類來創(chuàng)建不同顏色導(dǎo)航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 對(duì)于暗色背景需要設(shè)置文本顏色為淺色的，對(duì)于淺色背景需要設(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 類來高亮顯示選中的選項(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 類來設(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)航欄，通過點(diǎn)擊來顯示導(dǎo)航選項(xiàng)。
要?jiǎng)?chuàng)建折疊導(dǎo)航欄，可以在按鈕上添加 class="navbar-toggler", data-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-toggle
=
"
collapse
"
data-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-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)航欄的表單
