蓝蓝站点

Java读书笔记

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

7.2.4 分裂式按钮下拉菜单

所谓分裂式按钮下拉菜单,就是让按钮旁边的三角箭头来激发下拉菜单,因此需要将按钮旁边的三角箭头也变成按钮,且为其指定data-toggle="dropdown"属性,建议增加.dropdown-toggle样式。

程序示例

下面代码示范了如何实现一个分裂式按钮下拉菜单。

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
71
72
73
74
75
76
77
78
79
80
<!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">
        <!-- 按钮式下拉菜单 -->
        <div class="btn-group">

            <button class="btn btn-warning" type="button">分裂式按钮下拉菜单</button>
            <!-- 通过三角符号展开下拉菜单 -->
            <!-- 代码1 开始 -->
            <button class="btn btn-warning dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">开关下拉菜单</span>
            </button>
            <!-- 代码1 结束 -->
            <!-- 下拉菜单 -->
            <ul class="dropdown-menu" aria-labelledby="dropdown1">
                <!-- 菜单项 -->
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <!-- 分割条 -->
                <li role="separator" class="divider"></li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </div>
        <!-- 按钮式下来菜单 -->
        <div class="btn-group">
            <button class="btn btn-danger" type="button">分裂式按钮下拉菜单</button>
            <!-- 通过三角图标展开下拉菜单 -->
            <!-- 代码2 开始 -->
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">开关下拉菜单</span>
            </button>
            <!-- 代码2 结束 -->
            <!-- 菜单 -->
            <ul class="dropdown-menu" aria-labelledby="dropdown2">
                <!-- 菜单标题 -->
                <li class="dropdown-header">文件</li>
                <!-- 菜单项 -->
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <li class="dropdown-header">程序</li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </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>

上面的代码1,代码2就是实现分裂式按钮下拉菜单的关键代码,这两段代码将三角箭头转换成按钮,并为其指定了data-toggle="dropdown"属性,这样即可把它变成打开下拉菜单的开关。
提示:该页面代码为残疾人用户使用屏幕阅读器提供了额外的<span>元素,该元素的内容用于对三角箭头按钮进行说明,且在该<span>元素上指定了.sr-only样式,这表明只有使用屏幕阅读器时才能看到该元素。

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

7.2.3 按钮式下拉菜单

除了使用.dropdown 或.dropup 样式来设置下拉菜单的样式之外,Bootstrap 还支持将.btn-group样式应用于菜单的容器(div)—此时就变成了所谓的按钮式下拉菜单。
提示:按钮式下拉菜单同样支持设置菜单分隔条、菜单标题等。如果希望按钮式下拉菜单能向上展开,为下拉菜单的容器元素添加.dropup样式即可。

程序示例

下面的代码示范了如何实现一个按钮式下拉菜单。

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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">
        <!-- 占用一行 -->
        <div class="row" style="margin-top:180px;">
            <!-- 占用4列 -->
            <div class="col-sm-4">
                <!-- 菜单的容器:按钮式下拉菜单 -->
                <div class="btn-group">
                    <!-- 展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        按钮式下拉菜单（带分隔条）
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown1">
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 占用4列 -->
            <div class="col-sm-4">
                <!-- 按钮式下来菜单 -->
                <div class="btn-group">
                    <!-- 展开按钮 -->
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        按钮式下拉菜单（带标题）
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown2">
                        <!-- 标题菜单项 -->
                        <li class="dropdown-header">文件</li>
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <!-- 标题菜单项 -->
                        <li class="dropdown-header">程序</li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 占用四行 -->
            <div class="col-sm-4">
                <!-- 按钮式下来菜单,向上展开 -->
                <div class="btn-group dropup">
                    <!-- 展开按钮,警告类型按钮 -->
                    <button class="btn btn-warning dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        按钮式下拉菜单（带标题）
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown3">
                        <!-- 标题菜单项 -->
                        <li class="dropdown-header">文件</li>
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <!-- 标题菜单项 -->
                        <li class="dropdown-header">程序</li>
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </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>

在该代码中定义了3 个按钮式下拉菜单,**第一个按钮式下拉菜单与前面的下拉菜单的唯一区别是,这里将下拉菜单的容器的样式改成了.btn-group**。
第二个按钮式下拉菜单的容器依然使用.btn-group 样式,只是该按钮使用了.btn-primary 样式,因此该按钮会显示首选项按钮的样式,且下拉菜单中包含标题。

第三个按钮式下拉菜单的容器使用了.btn-group和.dropup样式,因此该菜单将会向上展开。

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

7.2.2 禁用下拉菜单的某个菜单项

如果要禁用某个菜单项,只要为该菜单项对应的<li>元素添加.disabled样式即可。

程序示例

例如如下菜单。

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
<!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">
        <!-- 网格布局的一行 -->
        <div class="row">
            <!-- 占用三列 -->
            <div class="col-sm-3">
                <!-- 下拉菜单的容器 -->
                <div class="dropdown">
                    <!-- 展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单（带分隔条）
                        <!-- 展开图标 -->
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown3">
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <!-- 禁用该菜单项 -->
                        <li class="disabled">
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <!-- 分割条 -->
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </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>

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

7.2.1 下拉菜单对齐方式

在默认情况下,下拉菜单自动沿着父元素的上、下边(下拉菜单沿下边、上拉菜单沿上边)和左侧对齐,并被设定为100%宽度。
为了改变下拉菜单的定位方式,Bootstrap提供了如下样式。

样式 描述
.dropdown-menu-left 左对齐,这是默认的对齐方式。设置在菜单(<ul>元素)上
.dropdown-menu-right 右对齐,下拉菜单沿着容器右边对齐。设置在菜单(<ul>元素)上
.open 设置该样式的菜单默认是打开的,这个样式要设置在下拉菜单的容器(<div>)上。

下拉菜单可能会由于设置了overflow属性的父元素而被部分遮挡或超出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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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">
        <div class="row">
            <div class="col-sm-3">
                <!-- 下拉菜单容器,自动打开 -->
                <div class="dropdown open">
                    <!-- 展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单（带分隔条）
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单,右对齐 -->
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown3">
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3">
                <!-- 下拉菜单容器,自动打开 -->
                <div class="dropdown open">
                    <!-- 展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单,右对齐 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown3">
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </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>

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

7.2 下拉菜单

Bootstrap为下拉菜单提供了如下样式。

样式 描述
.dropdown或.drowup 该样式应用于下拉菜单的容器元素上。下拉菜单的容器通常是一个<div>元素。
.dropdown-toggle 该样式应用于下拉菜单的展开按钮上,该展开按钮可以是前面介绍的任意一种按钮。不过不使用该样式影响也不大,只不过Bootstrap官方文档上都应用了该样式。且在下拉菜单按钮上必须指定data-toggle="dropdown"。
.dropdown-menu 该样式应用于下拉菜单中。通常使用一个<ul>元素来构建下拉菜单,它包含的每个<li>元素将会被构建一个菜单项。
.dropdown-header 该样式应用于下拉菜单项(即<li>元素)上,该样式用于将下拉菜单项变成标题。
.divider 该样式应用于下拉菜单项(即<li>元素)上,该样式用于将下拉菜单项变成分隔条。

通常需要在<li>元素内放链接元素来表示下拉菜单。标题和分隔条则直接使用<li>元素即可。

下拉菜单不是通过一个简单的HTML元素就可搞定的,而是需要配合使用多个元素。下图示意了下拉菜单各元素之间的包含关系。
这里有一张图片

提示:Bootstrap的下拉菜单支持JS插件,具体可参考本书第8章内容。

程序示例

下面代码示范了如何开发下拉菜单。

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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">
        <!-- 一行 -->
        <div class="row" style="margin-top:150px;">
            <div class="col-sm-3">
                <!-- 下拉菜单1 dropdown放在下拉菜单的容器上-->
                <div class="dropdown">
                    <!-- dropdown-toggle放在展开按钮-->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单
                        <!-- 三角箭头 -->
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown1">
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3">
                <!-- 下拉菜单2 .dropup下拉菜单的容器 -->
                <div class="dropup">
                    <!-- dropdown-toggle下拉菜单的展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单（向上拉）
                        <!-- 展开图标 -->
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown2">
                        <!-- 菜单项 -->
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3">
                <!-- 下拉菜单3 -->
                <div class="dropdown">
                    <!-- .dropdown-toggle表示这是个展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单（带分隔条）
                        <span class="caret"></span>
                    </button>
                    <!-- .dropdown-menu表示这是菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown3">
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <!-- 分割条 -->
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3">
                <!-- 下拉菜单的容器 -->
                <div class="dropdown">
                    <!-- 展开按钮 -->
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown4" data-toggle="dropdown" aria-haspopup="true"
                     aria-expanded="true">
                        下拉菜单（带标题）
                        <!-- 展开按钮图标 -->
                        <span class="caret"></span>
                    </button>
                    <!-- 菜单 -->
                    <ul class="dropdown-menu" aria-labelledby="dropdown4">
                        <!-- 标题 -->
                        <li class="dropdown-header">文件</li>
                        <li>
                            <a href="#">新建</a>
                        </li>
                        <li>
                            <a href="#">打开</a>
                        </li>
                        <li>
                            <a href="#">保存</a>
                        </li>
                        <!-- 标题 -->
                        <li class="dropdown-header">程序</li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </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>

该页面代码中定义了4个不同的下拉菜单:
第一个下拉菜单最普通,只要按前面介绍的方法组织各HTML元素并指定CSS样式即可。
第二个下拉菜单与第一个下拉菜单差别不大,只是将容器上的.dropdown 改成了.dropup,因此该菜单将会向上展开。
第三个下拉菜单中添加了如下元素:

1
2
<!-- 分割条 -->
<li role="separator" class="divider"></li>

这个元素代表一条分隔条
第四个下拉菜单中添加了两个元素：

1
2
<li class="dropdown-header">文件</li>
<li class="dropdown-header">程序</li>

每个元素都表示一个标题
代码还为下拉菜单的按钮指定了aria-haspopup="true"和aria-expanded="true"两个属性,这两个属性主要为残疾人用户准备的,当他们使用屏幕阅读器等辅助工具浏览网页时,这两个属性会告诉屏幕阅读器展开下拉菜单,因此在下拉菜单<ul>元素中指定了aria-labelledby属性,该属性用于指定该下拉菜单为哪个按钮服务。

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

7.1.2 按钮状态

Bootstrap为按钮的激活和禁用状态提供了一些额外的样式。同时Bootstrap还为按钮的如下状态提供了样式。

样式 描述
.hover 鼠标悬停的样式。
.active 按钮被单击的样式。
.focus 按钮获得焦点的样式。

下面代码示范了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
<!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">
        button,
        a {
            margin: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button type="button" class="btn btn-default">默认状态</button>
        <button type="button" class="btn btn-default hover">悬停状态</button>
        <button type="button" class="btn btn-default active">激活状态</button>
        <button type="button" class="btn btn-default focus">焦点状态</button>
    </div>
    <div class="container">
        <a role="button" class="btn btn-default">默认状态</a>
        <a role="button" class="btn btn-default hover">悬停状态</a>
        <a role="button" class="btn btn-default active">激活状态</a>
        <a role="button" class="btn btn-default focus">焦点状态</a>
    </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>

将按钮设置为禁用状态

如果要将按钮设为禁用状态,则要分两种情况。

按钮类型 描述
<button>和<input>按钮 为按钮添加disabled属性即可。Bootstrap会将按钮背景色调得更淡,并使用not-allow光标来表示禁用。
<a>按钮 为按钮添加.disabled样式(链接不支持disabled属性)。Bootstrap会将按钮背景色调得更淡来表示禁用。
需要说明的是,为<a>元素添加.disabled样式只是设置了pointer-events:none;属性来禁止<a>作为链接的原始功能,但该CSS属性并未被标准化,且Opera 18及更低版本的浏览器并没有完全支持这一属性,同时IE 11也不支持该属性。即使在那些支持pointer-events: none;属性的浏览器中,使用键盘导航或辅助技术的用户依然可激活这些链接,因此建议使用JS代码来禁止链接的原始功能。

下面代码示范了如何设置按钮的禁用状态。

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
<!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">
        button,
        a {
            margin: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button type="button" disabled class="btn btn-default">默认按钮</button>
        <button type="button" disabled class="btn btn-primary">首选项按钮</button>
    </div>
    <div class="container">
        <a role="button" class="btn btn-default disabled">默认按钮</a>
        <a role="button" class="btn btn-primary disabled">首选项按钮</a>
    </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： 本文字数： 6.2k 阅读时长 ≈ 6 分钟

7.1 按钮

Bootstrap支持将<a>、<button>或<input>元素变成按钮。Bootstrap为按钮提供了如下样式。

样式 描述
.btn 所有按钮都需要添加该样式。
.btn-default 设置默认的按钮样式,按钮背景色为蓝色。
.btn-primary 设置代表首选项的按钮样式,按钮背景色为蓝色。
.btn-success 设置代表成功的按钮样式,按钮背景色为绿色。
.btn-info 设置一般信息的按钮样式,按钮背景色为浅蓝色。
.btn-warning 设置代表警告的按钮样式,按钮背景色为黄色。
.btn-danger 设置代办危险的按钮样式,按钮背景色为红色。
.btn-link 设置链接形式的按钮样式。

有一点需要说明的是,虽然Bootstrap可以将<a>、<input>和<button>元素变成按钮,但导航和导航条上的按钮只支持<button>元素。
如果<a>元素被作为按钮使用,而不是作为链接链接到其他页面或当前页面的其他地方,需要为该元素设置role="button"属性。
建议尽可能使用<button>元素来创建按钮,这样可以获得最佳的跨浏览器效果。当使用Firefox 30及更早版本的浏览器时,Firefox会阻止为<input>元素的按钮设置line-height属性,这样就会导致该按钮在Firefox和其他浏览器上不能保持一致的高度。

程序示例

下面的页面代码示范了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
<!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">
        button {
            margin: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button type="button" class="btn btn-default">默认样式</button>
        <button type="button" class="btn btn-primary">首选项</button>
        <button type="button" class="btn btn-success">成功按钮</button>
        <button type="button" class="btn btn-info">一般信息按钮</button>
        <button type="button" class="btn btn-warning">警告按钮</button>
        <button type="button" class="btn btn-danger">危险按钮</button>
        <button type="button" class="btn btn-link">链接</button>
    </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>

7.1.1 按钮大小

除了前面介绍的各种按钮样式之外,Bootstrap还提供了如下控制按钮大小的样式。

样式 描述
.btn-lg 设置大按钮。
.btn-sm 设置小按钮。
.btn-xs 设置超小的按钮。
.btn-block 设置块级按钮,这种按钮的宽度会自动占满父容器。

可以将这些样式和前面介绍的.btn-default、.btn-primary等表示按钮风格的样式结合使用。

程序示例

例如如下代码示范了如何控制按钮的大小。

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>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <button type="button" class="btn btn-default btn-lg">大默认按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-default">默认按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-default btn-sm">小默认按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-default btn-xs">超小默认按钮</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-lg">大首选项按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary">默认首选项按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-sm">小首选项按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-xs">超小首选项按钮</button>
            </div>
        </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>

以上代码使用.btn-lg、.btn-sm、.btn-xs等样式来控制按钮的大小。

如果使用.btn-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
26
27
28
29
30
31
32
33
<!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">
        <div class="row">
            <div class="col-sm-2">
                <button type="button" class="btn btn-primary btn-lg btn-block">大primary按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-block">默认primary按钮</button>
            </div>
            <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-sm btn-block">小primary按钮</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-xs btn-block ">超小primary按钮</button>
            </div>
        </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>

块级按钮的宽度总会自动占满其父容器,比如上面页面中的第一个按钮使用了btn-lg btn-block样式,它的高度虽然是大按钮的尺寸,但其宽度只能占2列—因为它位于.col-sm-2的单元格中;第四个按钮使用了btn-xs btn-block样式,它的高度虽然是超小按钮的尺寸,但其宽度却能占4列—因为它位于.col-sm-4的单元格中。

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

第7章 Bootstrap内置组件

本章要点

  • Bootstrap的按钮组件
  • 下拉菜单、按钮式下拉菜单和分裂式下拉菜单
  • 按钮组和工具栏的用法
  • 按钮组嵌套下拉菜单
  • Bootstrap的输入框组
  • 标签式导航和胶囊式导航
  • 两端对齐的导航
  • 路径导航
  • 基础导航条
  • 在航条中添加品牌图标
  • 在导航条中添加表单
  • 在导航条中添加文本和链接
  • 导航条的排列方式和位置
  • 响应式导航条
  • 分页导航
  • 翻页导航
  • Bootstrap的标签和徽章
  • 使用Bootstrap的面板
  • 面板嵌套表格
  • 面板嵌套列表组
  • 巨幕、页头和Well
  • Bootstrap的缩略图
  • 使用警告框组件
  • 使用进度条组件
  • 使用媒体对象设计界面
  • 使用Bootstrap的列表组组件
  • 链接列表组和按钮列表组

Bootstrap是一个优秀的CSS前端框架,它除了提供大量全局可用的CSS样式之外,还提供大量的UI组件,这些UI组件都是Web页面开发中最常用的组件,如按钮、下拉菜单、按钮组、输入框组、导航、导航条、分页导航、标签、进度条等。
使用Bootstrap 提供的这些UI组件很简单,通常只要为传统的HTML 元素添加少量Bootstrap的CSS样式即可,这样系统就可生成优雅、美观的UI界面。因此在Web页面开发中使用这些UI组件不仅事半功倍,而且还使界面更加专业、美观。

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

6.10 本章小结

本章主要介绍了Bootstrap入门的相关知识,Bootstrap是一个CSS前端框架,也涉及一些JS插件,因此安装Bootstrap主要就是在页面导入CSS库和JS库。本章还重点介绍了Bootstrap提供的全局CSS 样式,包括网格布局相关的样式、排版相关的样式、表格相关样式、图片相关样式、各种辅助样式、响应式布局相关样式、表单相关样式等。
使用这些样式也很简单,通常只要在传统HTML标签上添加Bootstrap样式即可。

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

6.9.10 校验状态的图标

Bootstrap 还允许为表单控件的校验状态设置图标。为表单控件的校验状态设置图标需要注意两点:

  1. 在包含<label>元素和表单控件的容器上添加.has-feedback样式。
  2. 为空的<span>元素添加一个前面介绍的小图标,并为该元素添加.form-control-feedback样式。

表示校验状态的图标只能应用在文本输入框<input class="form-control">元素上。
下面的示例示范了校验状态图标的使用方法:

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
<!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">
        <form action="http://www.fkit.org" class="form-horizontal">
            <!-- 1号代码 -->
            <div class="form-group has-success has-feedback">
                <label for="succ" class="col-sm-2 control-label">正确</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="succ" aria-describedby="successStatus">
                    <!-- 增加图标提示 -->
                    <!-- 2号代码 -->
                    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <!-- 3号代码 -->
                    <span id="successStatus" class="help-block sr-only">校验通过</span>
                </div>
            </div>
            <div class="form-group has-warning has-feedback">
                <label for="warning" class="col-sm-2 control-label">警告</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="warning" aria-describedby="warningStatus">
                    <!-- 增加图标提示 -->
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <span id="warningStatus" class="help-block sr-only">校验有点问题</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="error" class="col-sm-2 control-label">错误</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="error" aria-describedby="errorStatus">
                    <!-- 增加图标提示 -->
                    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <span id="errorStatus" class="help-block sr-only">校验有点问题</span>
                </div>
            </div>
        </form>
    </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>元素,并在每个<div>元素中定义一组label 和表单控件。

  • 其中1号代码添加了.has-feedback样式;
  • 第2号代码添加了一个表示校验状态的图标,并添加了.form-control-feedback样式;
  • 第3号代码定义了额外的帮助文本(.help-block),并指定了.sr-only 样式,这表明这段额外的帮助文本专门用于向屏幕阅读器提供信息。

需要说明的是,对于不带<label>标签的输入框以及右侧带有附加组件的输入框组,需要手动定位图标。为了让所有用户都能访问你的网站,Bootstrap 建议为所有输入框添加<label>标签。如果不希望将<label>标签展示出来,添加.sr-only样式即可。如果确实不能添加<label>标签,则需要调整图标的top值。对于输入框组,要根据实际情况调整图标的right值。