蓝蓝站点

Java读书笔记

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

7.5.9 导航条中的文本和链接

有些时候,我们需要在导航条中放置一些普通文本,甚至需要在文本中放置一些普通链接。Bootstrap为导航条中的文本和链接提供了如下样式。

样式 描述
.navbar-text 该样式应用于导航条中的文本。对<p>元素应用该样式之后,即可获得正确的行距和颜色。
.navbar-link 该样式应用于导航条中的普通链接。应用该样式之后,链接就会具有正确的默认颜色和反色设置。

程序示例

下面代码示范了如何在导航条中添加文本和链接。

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航条中的文本和链接 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- 图标 -->
            <div class="navbar-header">
                <a class="navbar-brand" style="padding-top:0" href="#">
                    <img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px">
                </a>
            </div>
            <!-- 表单 -->
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <label for="keyword" class="sr-only">关键字</label>
                    <input type="text" id="keyword" class="form-control" placeholder="输入关键字">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <!-- 普通文本 -->
            <p class="navbar-text navbar-right" style="padding-right:10px">
                以游客身份<a href="#" class="navbar-link">访问</a></p>
            <!-- 下拉列表 -->
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="#">主页</a></li>
                <li role="presentation" class="dropdown">
                    <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                        aria-expanded="true">
                        课程体系 <span class="caret"></span>
                    </a>
                    <!-- 使用ul添加下拉菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">Java基础强化营</a></li>
                        <li><a href="#">全栈式程序员就业营</a></li>
                        <li><a href="#">全栈式程序员突击营</a></li>
                    </ul>
                </li>
                <li role="presentation" class="active"><a href="#">师资介绍</a></li>
                <li role="presentation"><a href="#">教育理念</a></li>
                <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
            </ul>
        </div>
    </nav>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该代码中定义了一个<p>元素,该元素被指定了.navbar-text样式,那么这段文本将会在导航条中具有正确的行距和颜色。此外还为<p>元素应用了.navbar-right样式,因此这段文本将会在导航条的右端显示。
在导航条的文本中还添加了一个超链接,为了让该链接具有正确的颜色和反色设置,为该链接应用了.navbar-link样式,如果不设置,则该链接的样式将会和普通超链接的样式一样。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.9k 阅读时长 ≈ 3 分钟

7.5.8 导航条中的表单

Bootstrap为导航条中的表单提供例了如下样式。
.navbar-form:被添加了该样式的表单可以呈现很好的垂直对齐效果,并在较窄的viewport中呈现折叠状态。还可使用对齐选项指定表单在导航条上出现的位置。

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航条中的表单 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- 导航,默认样式 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <!-- 网站图标 -->
                <a class="navbar-brand" style="padding-top:0" href="#">
                    <img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px">
                </a>
            </div>
            <!-- 下拉列表 -->
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="#">主页</a></li>
                <li role="presentation" class="dropdown">
                    <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                        aria-expanded="true">
                        课程体系 <span class="caret"></span>
                    </a>
                    <!-- 使用ul添加下拉菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">Java基础强化营</a></li>
                        <li><a href="#">全栈式程序员就业营</a></li>
                        <li><a href="#">全栈式程序员突击营</a></li>
                    </ul>
                </li>
                <li role="presentation" class="active"><a href="#">师资介绍</a></li>
                <li role="presentation"><a href="#">教育理念</a></li>
                <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
            </ul>
            <!-- 导航表单 -->
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <label for="keyword" class="sr-only">关键字</label>
                    <input type="text" id="keyword" class="form-control" placeholder="输入关键字">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
    </nav>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该代码中定义了一个表单,该表单还应用了.navbar-left样式,该样式控制表单在导航条上左对齐。该表单内包含一个文本框和一个按钮。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.6k 阅读时长 ≈ 2 分钟

7.5.7 导航条中的按钮

如果要在导航条中添加按钮,则Bootstrap为按钮提供了如下样式。
.navbar-btn:该样式应用于导航条中的按钮。该样式可以让按钮在导航条里垂直居中。如果希望辅助设备也能识别该按钮的标签,则可以为该按钮添加aria-label、aria-labelledby或title属性。

程序示例

如下代码示范了如何在导航条中添加按钮。

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
43
44
45
46
47
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航条中的按钮 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" style="padding-top:0" href="#">
                    <img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px">
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="#">主页</a></li>
                <li role="presentation" class="dropdown">
                    <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                        aria-expanded="true">
                        课程体系 <span class="caret"></span>
                    </a>
                    <!-- 使用ul添加下拉菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">Java基础强化营</a></li>
                        <li><a href="#">全栈式程序员就业营</a></li>
                        <li><a href="#">全栈式程序员突击营</a></li>
                    </ul>
                </li>
                <li role="presentation" class="active"><a href="#">师资介绍</a></li>
                <li role="presentation"><a href="#">教育理念</a></li>
                <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
            </ul>
            <!-- navbar-btn应用于导航条中的按钮 -->
            <button type="button" class="btn btn-info navbar-btn" title="打开对话">打开对话</button>
        </div>
    </nav>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

7.5.6 导航条中的品牌图标

在导航条的最前端一般可以添加文字或图标来标识公司的品牌。Bootstrap 为品牌图标提供了如下两个样式。

样式 描述
.navbar-header 该样式应用于导航条的头部。
.navbar-brand 该样式应用于导航条的品牌图标上。该样式为品牌图标设置了合适的padding和height。如果有特殊需要,开发者也可添加一些CSS代码覆盖默认设置。

程序示例

下面的代码示范了如何为导航条添加品牌图标。

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
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 品牌图标 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- navbar-header放在导航条的头部 -->
            <div class="navbar-header">
                <!-- navbar-brand放在导航头的品牌图标上 -->
                <!-- 1号代码 -->
                <a class="navbar-brand" style="padding-top:0" href="#">
                    <img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px">
                </a>
            </div>
            <!-- 导航条组件:下拉菜单 -->
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="#">主页</a></li>
                <li role="presentation" class="dropdown">
                    <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                        aria-expanded="true">
                        课程体系 <span class="caret"></span>
                    </a>
                    <!-- 使用ul添加下拉菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">Java基础强化营</a></li>
                        <li><a href="#">全栈式程序员就业营</a></li>
                        <li><a href="#">全栈式程序员突击营</a></li>
                    </ul>
                </li>
                <li role="presentation" class="active"><a href="#">师资介绍</a></li>
                <li role="presentation"><a href="#">教育理念</a></li>
                <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
            </ul>
        </div>
    </nav>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该代码中的1号代码为<a>元素设置了.nav-brand 样式,因此该元素将会作为品牌图标。此外,为了更好地放置品牌图标,本例将图标的padding-top值设为0,这样使得图标可以居于最上面。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.6k 阅读时长 ≈ 3 分钟

7.5.5 基础导航条

前面介绍的导航只是一个导航组件,除了可以单独使用导航组件外,还可以将它放在导航条中使用。换句话说,导航条往往会作为导航组件的容器。导航条除了可包含导航组件外,导航条通常具有自己的背景色,导航条还可包含按钮、表单、文本和普通链接等。
导航条在移动设备上可以折叠起来(并可开可关),当viewport宽度超过768px时导航条会再次恢复水平展开模式。
提示:当浏览器viewport的宽度小于@grid-float-breakpoint值时,导航条的元素变为折叠排列(移动设备的展现方式);当浏览器viewport 的宽度大于@grid-float-breakpoint值时,导航条的元素变为水平排列(非移动设备展现模式)。@grid-float-breakpoint变量的默认值是768px,如有必要,可通过源代码修改该变量的值。

导航条样式

Bootstrap为导航条提供了如下样式。

样式 描述
.navbar 该样式用于设置导航条。导航条通常是一个<nav>元素,或一个被指定了role="navigation"属性的<div>元素。建议使用<nav>元素。
.navbar-default 或navbar-inverse 设置导航条的风格。该样式设置在导航条<nav>上,其中.navbar-default 用于设置默认的导航条风格,而.navbar-inverse则用于设置反色的导航条风格。
.navbar-nav 将导航组件放置到导航条中时应在导航组件设置该样式。

开发简单的导航条的步骤

通过上面的介绍不难发现,开发最简单的导航条只需要如下两步:

  1. 定义导航条容器,该容器可以是<nav>元素或被指定了role="navigation"的<div>元素。建议在导航条内嵌套一个样式为container-fluid的容器。
  2. 将放入导航条中的导航组件的.nav-tabs或.nav-pills样式改为.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航条 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- 1号代码 开始 -->
    <!-- 定义导航条,默认风格:浅色背景-->
    <!-- <nav class="navbar navbar-default"> -->
    <!-- 定义导航条,反色风格:深色背景-->
    <nav class="navbar navbar-inverse">
    <!-- 1号代码 结束 -->
        <div class="container-fluid">
            <!-- 导航条组件 -->
            <!-- 2号代码 -->
            <ul class="nav navbar-nav">
                <li role="presentation"><a href="#">主页</a></li>
                <!-- 下拉菜单 -->
                <li role="presentation" class="dropdown">
                    <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                        aria-expanded="true">
                        课程体系 <span class="caret"></span>
                    </a>
                    <!-- 使用ul添加下拉菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">Java基础强化营</a></li>
                        <li><a href="#">全栈式程序员就业营</a></li>
                        <li><a href="#">全栈式程序员突击营</a></li>
                    </ul>
                </li>
                <!-- 激活该导航默认 -->
                <li role="presentation" class="active"><a href="#">师资介绍</a></li>
                <li role="presentation"><a href="#">教育理念</a></li>
                <!-- 禁用该导航 -->
                <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
            </ul>
        </div>
    </nav>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该页面中的:
1号代码定义了一个class="navbar navbar-default"样式的<nav>元素,该元素就可以作为导航条容器。
2号代码将导航组件的样式设为class="nav navbar-nav",这样该导航组件就可以被添加到导航条中了。

导航条的两种风格

该导航条的样式是.navbar-default,因此可以看到导航条显示淡灰色的背景色。如果将导航条的样式改为.navbar-inverse,则该导航条将会显示深色背景.

如何解决导航条占据两行的情况

由于Bootstrap并不知道导航条内放置的元素需要占据多宽的空间,因此可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。解决该问题的方法有如下几种:

  1. 减少导航条内各元素所占据的宽度。
  2. 使用下拉式菜单,将部分导航项放在下拉式菜单中。
  3. 利用响应式工具类隐藏导航条内的一些元素,让用户通过按钮才能展开被隐藏的导航元素。
  4. 修改触发导航条在水平排列和折叠排列之间转换的viewport宽度值,该宽度值由@grid-float-breakpoint变量控制,其默认值是768px。

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

7.5.4 路径导航

路径导航通常用于在一个带有层次关系的导航结构中以便标明当前页面的位置。
实现路径导航非常简单,只要为<ul>或<ol>元素设置class="breadcrumb"样式即可。

程序示例

例如如下代码。

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 路径导航 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
             <!-- 设置路径导航 -->
        <ul class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
            <li><a href="#">设置</a></li>
            <li><a href="#">界面设置</a></li>
            <li><a href="#">用户习惯设置</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

提示:有关路径导航的样式是.breadcrumb,breadcrumb是面包屑的意思,因此有些地方也把这种导航方式称为面包屑导航。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.7k 阅读时长 ≈ 3 分钟

7.5.3 导航嵌套下拉菜单

在导航中嵌套下拉菜单只要完成如下两步:

  1. 将导航项中的链接元素(<a>)变成能激发下拉菜单的按钮,需要将该元素的data-toggle 属性设为dropdown。最好还指定class="dropdown-toggle"和role="button",其中role="button"主要用于告诉辅助设备该链接的角色是一个按钮。
  2. 添加使用<ul>元素构建的下拉菜单—需要为该<ul>元素指定class="dropdown"。

从Bootstrap官方文档来看,建议为导航项的<li>元素设置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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 嵌套下拉菜单 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <!-- 标签式导航,两端对齐 -->
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation"><a href="#">主页</a></li>
            <!-- 嵌套下拉菜单 -->
            <li role="presentation" class="dropdown">
                <!-- 将链接元素变成能激发下拉菜单的按钮 -->
                <!-- 1号代码 开始-->
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                    aria-expanded="true">
                    课程体系 <span class="caret"></span>
                </a>
                <!-- 1号代码 结束-->
                <!-- 使用ul添加下拉菜单 -->
                <!-- 2号代码 开始-->
                <ul class="dropdown-menu">
                    <li><a href="#">Java基础强化营</a></li>
                    <li><a href="#">全栈式程序员就业营</a></li>
                    <li><a href="#">全栈式程序员突击营</a></li>
                </ul>
                <!-- 2号代码 结束-->
            </li>
            <!-- 激活状态 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- 禁用状态 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
        <br>
        <!-- 胶囊式导航,两端对齐 -->
        <ul class="nav nav-pills nav-justified">
            <li role="presentation"><a href="#">主页</a></li>
            <!-- 嵌套下拉菜单 -->
            <li role="presentation" class="dropdown">
                <!-- 用来激活下拉菜单 -->
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                    aria-expanded="true">
                    课程体系 <span class="caret"></span>
                </a>
                <!-- 下拉菜单 -->
                <ul class="dropdown-menu">
                    <li><a href="#">Java基础强化营</a></li>
                    <li><a href="#">全栈式程序员就业营</a></li>
                    <li><a href="#">全栈式程序员突击营</a></li>
                </ul>
            </li>
            <!-- 激活状态 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- 禁用状态 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该代码中的1号代码负责将<a>元素变成能激发下拉菜单的按钮;2号代码负责使用<ul>元素构建了下拉菜单。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

7.5.2 导航两端对齐

如果要实现两端对齐的导航,则只要为导航的<ul>或<ol>元素增加.nav-justified样式即可,这样导航将会自动占满父容器并且两端对齐。

程序示例

例如如下代码。

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 两端对齐的导航 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <!-- 标签式导航,两端对齐 -->
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation"><a href="#">主页</a></li>
            <li role="presentation"><a href="#">课程体系</a></li>
            <!-- 激活 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- 禁用 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
        <hr>
        <!-- 胶囊式导航,两端对齐 -->
        <ul class="nav nav-pills nav-justified">
            <li role="presentation"><a href="#">主页</a></li>
            <li role="presentation"><a href="#">课程体系</a></li>
            <!-- 激活 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- 禁用 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

发表于 更新于 分类于 ， ， Waline： 本文字数： 5k 阅读时长 ≈ 5 分钟

7.5 导航

Bootstap提供了一些简单的样式来实现简单导航和复杂的导航条。

7.5.1 简单导航的基础样式

简单导航就是将一些超链接以列表的形似展示出来,用户可通过单击超链接进行导航。简单导航涉及如下CSS样式。

样式 描述
.nav 导航样式。要实现简单导航必须先设置该样式。
.nav-tabs或.nav-pills 设置导航风格。其中,.nav-tabs是标签式导航,.nav-pills是胶囊式导航。这两个样式都依赖于.nav样式。
.nav-stacked 当使用胶囊式导航时,可通过设置该样式进行堆叠排列。
.active 将某个导航项设为激活状态。
.disabled 将某个导航项设为禁用状态。
由于标签页需要控制内容区的展示,因此在标签页上实现导航功能需要依赖JavaScript标签页插件。
另外,如果希望使用导航组件实现导航条功能,则必须在<ul>最外侧的逻辑父元素上添加role="navigation"属性,或者用一个<nav>元素包裹整个导航组件。总之不要将role属性添加到<ul>上,否则会被辅助设备(残疾人用的)识别为列表。

程序示例 实现简单的标签式导航

下面代码示范了如何开发简单的标签式导航。

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <!-- 使用nav定义一个导航,`.nav-tabs`表示该导航是`标签式导航`-->
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="#">主页</a></li>
            <li role="presentation"><a href="#">课程体系</a></li>
            <!-- `.active`将`某个导航项`设为`激活状态`。 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- `.disabled将`某个导航项`设为`禁用`状态。 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该代码中使用.nav、.nav-tabs定义了一个导航,该导航内包含5个超链接,其中为第三个超链接设置了激活状态,为第五个超链接设置了禁用状态。
提示:Bootstrap既可使用<ul>元素来定义导航,也可使用<ol>元素来定义导航。但如果希望通过导航组件来实现导航条,则建议使用<nav>元素来包裹<ul>或<ol>元素。

程序示例 实现简单的胶囊式导航

下面代码示范了如何开发简单的胶囊式导航。

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <ol class="nav nav-pills">
            <li role="presentation"><a href="#">主页</a></li>
            <li role="presentation"><a href="#">课程体系</a></li>
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ol>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

胶囊式导航支持堆叠方式排列,只要为导航的<ul>或<ol>元素增加.nav-stacked 样式即可。

胶囊式导航支持堆叠方式排列

例如如下代码。

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 导航 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <ul class="nav nav-pills nav-stacked">
            <li role="presentation"><a href="#">主页</a></li>
            <li role="presentation"><a href="#">课程体系</a></li>
            <!-- 设置为激活 -->
            <li role="presentation" class="active"><a href="#">师资介绍</a></li>
            <li role="presentation"><a href="#">教育理念</a></li>
            <!-- 设为禁用 -->
            <li role="presentation" class="disabled"><a href="#">退出系统</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

7.4.5 多按钮

Bootstrap不允许在输入框组的单独一侧同时添加多个附加元素,但如果我们将多个按钮包裹在同一个附加元素内,这样即可实现在输入框组的单独一侧同时添加多个附加按钮。

程序示例

例如如下代码。

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 多个按钮作为附加元素 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        .container>div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-group">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="a">
            <!-- .input-group-btn样式应用于输入框组的附件按钮 -->
            <!-- 1号代码 开始 -->
            <div class="input-group-btn">
                <!-- 放置多个按钮 -->
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-align-left" aria-label="左对齐"></span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-align-right" aria-label="右对齐"></span>
                </button>
            </div>
            <!-- 1号代码 结束 -->
        </div>
        <div class="input-group">
            <!-- .input-group-btn样式应用于输入框组的附件按钮 -->
            <!-- 2号代码 开始 -->
            <div class="input-group-btn">
                <!-- 放置多个按钮 -->
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-align-center" aria-label="居中对齐"></span>
                </button>
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-align-justify" aria-label="两端对齐"></span>
                </button>
            </div>
            <!-- 2号代码 结束 -->
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="b">
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

只要先定义一个<div class="input-group-btn">元素,接下来即可在该元素内添加多个按钮,如此就可以在输入框组中添加多个按钮了。