创新互联Bootstrap教程：Bootstrap导航栏

Bootstrap 导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

创建一个默认的导航栏的步骤如下：

下面的实例演示了这点：

实例

<
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
"
>

<
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
>

尝试一下 »

结果如下所示：

响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse
中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

下面的实例演示了这点：

实例

<
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 向不在

中的

成都快上网为您推荐相关内容

手机网站建设知识

分类信息网

盐亭网站建设　　 　重庆移动机房托管　　 　四川雅安服务器托管　　 　成都包装设计公司　　 　绵阳梓潼网站建设　　 　定制网站设计　　 　公路打桩机　　 　成都主机托管　　 　网站维护　　 　tpbzx.cn　　 　SSL证书　　 　小谭建站　　 　教育培训网站建设方案　　 　温江网站设计　　 　seo网络营销推广　　 　成都高电机柜租用　　 　谷歌优化排名　　 　卡多尼人工智　　 　SSL认证　　 　成都网络推广