Bootstrap 布局组件

Bootstrap 官网地址
简要介绍 Bootstrap 布局组件

Bootstrap 下拉菜单(Dropdowns)

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

基本的下拉菜单

下面的实例演示了基本的下拉菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 下拉菜单(Dropdowns)</title>
<!-- bootstrap 3.3.7 -->
<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>

<div class="container">
<!--指定下拉菜单,下拉菜单都包裹在 .dropdown 里-->
<div class="dropdown">
<!--按钮-->
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button>
<!--创建下拉菜单-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<!--下拉菜单中的分割线-->
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</div>

<!-- jquery 3.2.1 -->
<script type="text/javascript" src="webjars/jquery/dist/jquery.min.js"></script>

<!-- bootstrap 3.3.7 -->
<script type="text/javascript" src="webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="container">
<!--指定下拉菜单,下拉菜单都包裹在 .dropdown 里-->
<div class="dropdown">
<!--按钮-->
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button>
<!--创建下拉菜单-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<!--下拉菜单中添加标题-->
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<!--下拉菜单中的分割线-->
<li role="presentation" class="divider"></li>
<!--下拉菜单中添加标题-->
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</div>

更多实例

描述
.dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:

基本的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group 的使用:

1
2
3
4
5
6
7
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 1</button>
</div>
</div>

按钮的大小

下面的实例演示了上面表格中讨论到的 class .btn-group-* 的使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 1</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 2</button>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮 3</button>
<button type="button" class="btn btn-default">按钮 3</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>

<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 4</button>
</div>
</div>

嵌套

您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时,就会用到这个。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a> </li>
<li><a href="#">下拉链接 2</a> </li>
</ul>
</div>
</div>
</div>

垂直的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a> </li>
<li><a href="#">下拉链接 2</a> </li>
</ul>
</div>
</div>
</div>

Bootstrap 按钮下拉菜单

本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。

简单的按钮下拉菜单

下面的实例演示了一个基本的简单的按钮下拉菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认 <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
</div>

分割的按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切换下拉菜单</span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切换下拉菜单</span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
</div>

按钮下拉菜单的大小

您可以使用带有各种大小按钮的下拉菜单:.btn-lg、.btn-sm 或 .btn-xs。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认 <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">原始 <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">成功 <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能 1</a> </li>
<li><a href="#">功能 2</a> </li>
<li><a href="#">功能 3</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接</a> </li>
</ul>
</div>
</div>

Bootstrap 导航元素

本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单:

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

胶囊式的导航菜单

如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步骤与上面相同。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

垂直的胶囊式导航菜单

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

两端对齐的导航

您可以在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container">
<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul><br><br><br>
</div>

禁用链接

对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态,如下面的实例所示:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li><a href="#">JAVA</a> </li>
<li class="disabled"><a href="#">VB (禁止链接)</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下,列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下:

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。

添加带有 .dropdown-menu class 的无序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
<p>带有下拉菜单的标签</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">JAVA <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a> </li>
<li><a href="#">Swing</a> </li>
<li><a href="#">Swing</a> </li>
<li class="divider"></li>
<li><a href="#">Swing</a> </li>
</ul>
</li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同,只是需要把 .nav-tabs class 改为 .nav-pills,如下面的实例所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
<p>带有下拉菜单的胶囊</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">SVN</a> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">JAVA <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a> </li>
<li><a href="#">Swing</a> </li>
<li><a href="#">Swing</a> </li>
<li class="divider"></li>
<li><a href="#">Swing</a> </li>
</ul>
</li>
<li><a href="#">VB</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">C#</a> </li>
</ul>
</div>

更多导航元素组件实例

标签页与胶囊式标签页

Bootstrap 导航栏

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

默认的导航栏

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

  • <nav> 标签添加 class .navbar、.navbar-default。
  • 向上面的元素添加 role=”navigation”,有助于增加可访问性。
  • <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  • 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="container">
<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="#">Mybatis</a> </li>
<li><a href="#">Mybatis</a> </li>
<li><a href="#">Mybatis</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接 1</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接 2</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

响应式的导航栏

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container">
<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="#">Mybatis</a> </li>
<li><a href="#">Mybatis</a> </li>
<li><a href="#">Mybatis</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接 1</a> </li>
<li class="divider"></li>
<li><a href="#">分离的链接 2</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

导航栏中的表单

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

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
<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-right" 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>
</div>

导航栏中的文本

如果需要在导航中包含文本字符串,请使用 class .navbar-text。这通常与

标签一起使用,确保适当的前导和颜色。下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<a class="navbar-text">Runoob 用户登录</a>
</div>
</div>
</nav>
</div>

结合图标的导航链接

如果您想在常规的导航栏导航组件内使用图标,那么请使用 class glyphicon glyphicon-* 来设置图标,更多请查看 Bootstrap 图标 ,如下面的实例所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<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>
</div>

固定到顶部

Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏。

如果您想要让导航栏固定在页面的顶部,请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li class="divider"></li>
<li><a href="#">Java</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

静态的顶部

如需创建能随着页面一起滚动的导航栏,请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距(padding)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="navbar navbar-default navbar-static-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="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li class="divider"></li>
<li><a href="#">Java</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<div style="margin-bottom: 2200px"></div>

反色的导航栏

为了创建一个带有黑色背景白色文本的反色的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可,如下面的实例所示:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
<nav class="navbar navbar-inverse" 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="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li><a href="#">Java</a> </li>
<li class="divider"></li>
<li><a href="#">Java</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

Bootstrap 面包屑导航(Breadcrumbs)

面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

1
2
3
4
5
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}

1
2
3
4
5
6
7
<div class="container">
<ol class="breadcrumb">
<li><a href="#">Home</a> </li>
<li><a href="#">Home</a> </li>
<li class="active">Home</li>
</ol>
</div>

Bootstrap 分页

本章将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。

分页(Pagination)

下表列出了 Bootstrap 提供的处理分页的 class。

默认的分页

下面的实例演示了上表中所讨论的 class .pagination 的用法:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<ul class="pagination">
<li><a href="#">&laquo;</a> </li>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
<li><a href="#">&raquo;</a> </li>
</ul>
</div>

分页的状态

下面的实例演示了上表中所讨论的 class .disabled、.active 的用法:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<ul class="pagination">
<li><a href="#">&laquo;</a> </li>
<li class="active"><a href="#">1</a> </li>
<li class="disabled"><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
<li><a href="#">&raquo;</a> </li>
</ul>
</div>

翻页(Pager)

如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。

默认的翻页

下面的实例演示了上表中所讨论的 class .pager 的用法:

1
2
3
4
5
6
<div class="container">
<ul class="pager">
<li><a href="#">Previous</a> </li>
<li><a href="#">Next</a> </li>
</ul>
</div>

对齐的链接

下面的实例演示了上表中所讨论的 class .previous、.next 的用法:

1
2
3
4
5
6
<div class="container">
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a> </li>
<li class="next"><a href="#">Newer &rarr;</a> </li>
</ul>
</div>

分页更多实例

Bootstrap 面板(Panels)

本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向

元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示:
1
2
3
4
5
6
7
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>

面板标题

我们可以通过以下两种方式来添加面板标题:

  • 使用 .panel-heading class 可以很简单地向面板添加标题容器。
  • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

下面的实例演示了这两种方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
不带title的面板标题
</div>
<div class="panel-body">
面板内容
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带title的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
</div>

面板脚注

我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
面板内容
</div>
<div class="panel-footer">
面板脚注
</div>
</div>
</div>

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板,实例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well:

1
2
3
<div class="container">
<div class="well">您好,我在 Well 中!</div>
</div>

尺寸大小

您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。

1
2
3
4
<div class="container">
<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>
</div>

Bootstrap 超大屏幕(Jumbotron)

本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:

  • 创建一个带有 class .jumbotron. 的容器 <div>
  • 除了更大的 <h1>,字体粗细 font-weight 被减为 200。

下面的实例演示了这点:

1
2
3
4
5
6
7
<div class="container">
<div class="jumbotron">
<h1>欢迎登录页面!</h1>
<p>这是一个超大屏幕(Jumbotron)的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">学习更多</a> </p>
</div>
</div>

Bootstrap 警告(Alerts)

本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件。

您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。下面的实例演示了这点:

1
2
3
4
5
6
<div class="container">
<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
</div>

可取消的警告(Dismissal Alerts)

创建一个可取消的警告(Dismissal Alert)步骤如下:

  • 通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
  • 同时向上面的 <div> class 添加可选的 .alert-dismissable。
  • 添加一个关闭按钮。

下面的实例演示了这点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
成功!很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
信息!请注意这个信息。</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
警告!请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
错误!请进行一些更改。
</div>
</div>

Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

从 v3.2.0 版本起,形如 .visible-- 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

打印类

下表列出了打印类。使用这些切换打印内容。

实例

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</div>
</div>
</div>