和 元素上。
不要在
.navbar-nav 內(nèi)的 元素上使用
.navbar-btn，因?yàn)樗皇菢?biāo)準(zhǔn)的 button class。
下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<
nav
class
=
"
navbar navbar-default
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
div
>
<
form
class
=
"
navbar-form navbar-left
"
role
=
"
search
"
>
<
div
class
=
"
form-group
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Search
"
>
div
>
<
button
type
=
"
submit
"
class
=
"
btn btn-default
"
>
提交按鈕
button
>
form
>
<
button
type
=
"
button
"
class
=
"
btn btn-default navbar-btn
"
>
導(dǎo)航欄按鈕
button
>
div
>
div
>
nav
>
嘗試一下 ?
結(jié)果如下所示：
導(dǎo)航欄中的文本
如果需要在導(dǎo)航中包含文本字符串，請使用 class .navbar-text。這通常與
標(biāo)簽一起使用，確保適當(dāng)?shù)那皩?dǎo)和顏色。下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<
nav
class
=
"
navbar navbar-default
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
div
>
<
p
class
=
"
navbar-text
"
>
Runoob 用戶登錄
p
>
div
>
div
>
nav
>
嘗試一下 ?
結(jié)果如下所示：
結(jié)合圖標(biāo)的導(dǎo)航鏈接
如果您想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用圖標(biāo)，那么請使用 class glyphicon glyphicon-* 來設(shè)置圖標(biāo)，更多請查看 Bootstrap 圖標(biāo) ，如下面的實(shí)例所示：
實(shí)例
<
nav
class
=
"
navbar navbar-default
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
ul
class
=
"
nav navbar-nav navbar-right
"
>
<
li
>
<
a
href
=
"
#
"
>
<
span
class
=
"
glyphicon glyphicon-user
"
>
span
>
注冊
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
<
span
class
=
"
glyphicon glyphicon-log-in
"
>
span
>
登錄
a
>
li
>
ul
>
div
>
nav
>
嘗試一下 ?
結(jié)果如下所示：
組件對齊方式
您可以使用實(shí)用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導(dǎo)航欄中的 導(dǎo)航鏈接、表單、按鈕或文本 這些組件。這兩個(gè) class 都會在指定的方向上添加 CSS 浮動。下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<
nav
class
=
"
navbar navbar-default
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
div
>
<
ul
class
=
"
nav navbar-nav navbar-left
"
>
<
li
class
=
"
dropdown
"
>
<
a
href
=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Java
<
b
class
=
"
caret
"
>
b
>
a
>
<
ul
class
=
"
dropdown-menu
"
>
<
li
>
<
a
href
=
"
#
"
>
jmeter
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
EJB
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Jasper Report
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
分離的鏈接
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
另一個(gè)分離的鏈接
a
>
li
>
ul
>
li
>
ul
>
<
form
class
=
"
navbar-form navbar-left
"
role
=
"
search
"
>
<
button
type
=
"
submit
"
class
=
"
btn btn-default
"
>
向左對齊-提交按鈕
button
>
form
>
<
p
class
=
"
navbar-text navbar-left
"
>
向左對齊-文本
p
>
<
ul
class
=
"
nav navbar-nav navbar-right
"
>
<
li
class
=
"
dropdown
"
>
<
a
href
=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Java
<
b
class
=
"
caret
"
>
b
>
a
>
<
ul
class
=
"
dropdown-menu
"
>
<
li
>
<
a
href
=
"
#
"
>
jmeter
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
EJB
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Jasper Report
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
分離的鏈接
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
另一個(gè)分離的鏈接
a
>
li
>
ul
>
li
>
ul
>
<
form
class
=
"
navbar-form navbar-right
"
role
=
"
search
"
>
<
button
type
=
"
submit
"
class
=
"
btn btn-default
"
>
向右對齊-提交按鈕
button
>
form
>
<
p
class
=
"
navbar-text navbar-right
"
>
向右對齊-文本
p
>
div
>
div
>
nav
>
嘗試一下 ?
結(jié)果如下所示：
固定到頂部
Bootstrap 導(dǎo)航欄可以動態(tài)定位。默認(rèn)情況下，它是塊級元素，它是基于在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨著頁面一起滾動的靜態(tài)導(dǎo)航欄。
如果您想要讓導(dǎo)航欄固定在頁面的頂部，請向 .navbar class 添加 class .navbar-fixed-top。下面的實(shí)例演示了這點(diǎn)：
為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯(cuò)，請向
標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding），內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。
實(shí)例
<
nav
class
=
"
navbar navbar-default navbar-fixed-top
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
div
>
<
ul
class
=
"
nav navbar-nav
"
>
<
li
class
=
"
active
"
>
<
a
href
=
"
#
"
>
iOS
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
SVN
a
>
li
>
<
li
class
=
"
dropdown
"
>
<
a
href
=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Java
<
b
class
=
"
caret
"
>
b
>
a
>
<
ul
class
=
"
dropdown-menu
"
>
<
li
>
<
a
href
=
"
#
"
>
jmeter
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
EJB
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Jasper Report
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
分離的鏈接
a
>
li
>
<
li
class
=
"
divider
"
>
li
>
<
li
>
<
a
href
=
"
#
"
>
另一個(gè)分離的鏈接
a
>
li
>
ul
>
li
>
ul
>
div
>
div
>
nav
>
嘗試一下 ?
結(jié)果如下所示：
固定到底部
如果您想要讓導(dǎo)航欄固定在頁面的底部，請向 .navbar class 添加 class .navbar-fixed-bottom。下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<
nav
class
=
"
navbar navbar-default navbar-fixed-bottom
"
role
=
"
navigation
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
菜鳥教程
a
>
div
>
<
div
>
<
ul
class
=
"
nav navbar-nav
"
>
<
li
class
=
"
active
"
>
<
a
href
=
"
#
"
>
iOS
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
SVN
a
>
li
>
<
li
class
=
"
dropdown
"
>
<
a
href
=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Java
<
b
class
=
"
caret
"
>
b
>
a
>
<
ul
class
=
"
dropdown-menu
"
>
<
li
>
<
a
href
=
"
#
"
>
jmeter
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
EJB
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Jasper Report
a
>
li
>
<
li
class
=
"
divider
"
>
<
分享文章：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap導(dǎo)航欄
標(biāo)題來源：http://fisionsoft.com.cn/article/cdeodcj.html
建站
咨詢
售后
建站咨詢
