免費(fèi)AI編程助手
Bootstrap5 復(fù)選框與單選框
2023-07-11 15:10 更新
如果您希望用戶從預(yù)設(shè)選項(xiàng)列表中選擇任意數(shù)量的選項(xiàng)，可以使用復(fù)選框：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>復(fù)選框</h2>
<p>.form-check-label 類(lèi)添加到標(biāo)簽元素，.form-check 容器內(nèi)添加 .form-check-input 類(lèi)來(lái)設(shè)置復(fù)選框的樣式。</p>
<p>以下三個(gè)復(fù)選框，第一個(gè)默認(rèn)選中，最后一個(gè)禁止選擇：</p>
<form action="/action_page.php">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>復(fù)選框通過(guò)使用 class="form-check" 來(lái)確保標(biāo)簽和復(fù)選框有適當(dāng)邊距。
.form-check-label 類(lèi)添加到標(biāo)簽元素，.form-check 容器內(nèi)添加 .form-check-input 類(lèi)來(lái)設(shè)置復(fù)選框的樣式。
checked 屬性用于設(shè)置默認(rèn)選中的選項(xiàng)。
單選框
如果您希望用戶從預(yù)設(shè)選項(xiàng)列表中選擇一個(gè)選項(xiàng)，可以使用單選框：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>單選框</h2>
<p>下面的表單包含三個(gè)單選按鈕，默認(rèn)選中第一個(gè)選項(xiàng)，禁用最后一個(gè)選項(xiàng)：</p>
<form action="/action_page.php">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>切換開(kāi)關(guān)
如果你想把復(fù)選框變成一個(gè)可切換的開(kāi)關(guān)，可以在 .form-check 容器內(nèi)使用 .form-switch 類(lèi):
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>切換開(kāi)關(guān)</h2>
<p>如果你想把復(fù)選框變成一個(gè)可切換的開(kāi)關(guān)，可以在 .form-check 容器內(nèi)使用 .form-switch 類(lèi):</p>
<form action="">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：