6.9.4 多选框和单选框

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

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">
            <!-- .checkbox样式的元素作为容器 -->
            <div class="checkbox">
                <label>
                    <input type="checkbox" value='html5'> 疯狂前端开发讲义
                </label>
            </div>
            <div class="checkbox disabled">
                <label>
                    <input type="checkbox" value='fk' disabled> 被禁用的多选框
                </label>
            </div>
            <!-- .radio样式的元素作为容器 -->
            <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">
            <!-- .checkbox-inline样式的元素作为容器 -->
            <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">
            <!-- .radio-inline样式直接作用于label元素 -->
            <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>