下面的实例演示了这点：

实例

<
nav

class
=
"
navbar navbar-default
"

role
=
"
navigation
"
>

<
div

class
=
"
container-fluid
"
>

<
div

class
=
"
navbar-header
"
>

<
button

type
=
"
button
"

class
=
"
navbar-toggle
"

data-toggle
=
"
collapse
"

data-target
=
"
#example-navbar-collapse
"
>

<
span

class
=
"
sr-only
"
>
切换导航
span
>

<
span

class
=
"
icon-bar
"
>
span
>

<
span

class
=
"
icon-bar
"
>
span
>

<
span

class
=
"
icon-bar
"
>
span
>

button
>

<
a

class
=
"
navbar-brand
"

href
=
"
#
"
>
菜鸟教程
a
>

div
>

<
div

class
=
"
collapse navbar-collapse
"

id
=
"
example-navbar-collapse
"
>

<
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
=
"
#
"
>
另一个分离的链接
a
>
li
>

ul
>

li
>

ul
>

div
>

div
>

nav
>

尝试一下 »

结果如下所示：

导航栏中的表单

导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。

下面的实例演示了这点：

实例

<
nav

class
=
"
navbar navbar-default
"

role
=
"
navigation
"
>

<
div

class
=
"
container-fluid
"
>

<
div

class
=
"
navbar-header
"
>

<
a

class
=
"
navbar-brand
"

href
=
"
#
"
>
菜鸟教程
a
>

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
>

div
>

nav
>

尝试一下 »

结果如下所示：

导航栏中的按钮

您可以使用 class .navbar-btn 向不在