https://getbootstrap.com/docs/5.3/forms/checks-radios/
复选框有不同的标记,它们被设置了.form-check
类的容器元素包围。label设置.form-check-label
类,而复选框和单选按钮使用.form-check-input
。希望默认选中复选框,可以使用checked属性。
复选框
使用.form-check
类包装元素,来确保标签和复选框有适当的外边距。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">选项1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">选项2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">选项3</label>
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-check">
<input type="radio" name="gender" checked class="form-check-input">
<label for="" class="form-check-label">男</label>
</div>
<div class="form-check">
<input type="radio" name="gender" class="form-check-input">
<label for="" class="form-check-label">女</label>
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
拨动开关
https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches
将复选框设置为切换开关的样式,可以将.form-switch
类和 .form-check
类一起使用。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" checked>
<label for="" class="form-check-label">开关</label>
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
滑块
https://getbootstrap.com/docs/5.3/forms/range/
.form-range
类添加到type="range"
的input元素,可以设置范围菜单的样式。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<input type="range" class="form-range">
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>