6.9.4 多选框和单选框
多选框和单选框虽然也是通过<input>元素来实现的,但由于它们的外观有些特殊,因此Bootstrap为它们单独提供了对应的样式。
| 样式 |
描述 |
.radio |
该样式应用于单选框所在的容器。 |
.radio-inline |
该样式应用于单选框所在的容器或直接应用于单选框的<label>元素。 |
.checkbox |
该样式应用于多选框所在的容器。 |
.checkbox-inline |
该样式应用于多选框所在的容器或直接应用于多选框的<label>元素。 |
.disabled |
该样式需要应用于多选框或单选框的父容器,该样式表示禁用多选框或单选框,将光标移动到对应<label>元素上时也会显示禁用光标。一般<input>元素会配合使用disabled属性。 |
程序示例 .radio和.checkbox
下面代码示范了.radio和.checkbox两个样式的用法。
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
| <!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">
<div class="checkbox">
<label>
<input type="checkbox" value='html5'> 疯狂前端开发讲义
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value='fk' disabled> 被禁用的多选框
</label>
</div>
<div class="radio">
<label>
<input name="color" type="radio" value='red'> 红色
</label>
</div>
<div class="radio">
<label>
<input name="color" type="radio" value='green'> 绿色
</label>
</div>
<div class="radio disabled">
<label>
<input name="color" type="radio" value='blue' disabled> 蓝色（被禁用）
</label>
</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>
|
Bootstrap 的.checkbox、.radio 样式默认将单选框、多选框以堆叠方式放在一起。
程序示例 .checkbox-inline .radio-inline
如果需要将单选框、多选框放在同一个行,则可使用.checkbox-inline、.radio-inline这两个样式,这两个样式既可作用于单选框或多选框的容器,也可作用于单选框或多选框的<label>元素。例如如下代码:
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
| <!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">
<div class="checkbox-inline">
<label>
<input type="checkbox" value='html5'> 疯狂前端开发讲义
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox" value='fk'> 第二个选项
</label>
</div>
</form>
<form action="http://www.fkit.org">
<label class="radio-inline">
<input name="color" type="radio" value='red'> 红色
</label>
<label class="radio-inline">
<input name="color" type="radio" value='green'> 绿色
</label>
<label class="radio-inline">
<input name="color" type="radio" value='blue'> 蓝色
</label>
</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>
|