垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 复选框与单选框 ​

🎯 概述 ​

Bootstrap 提供了美观的复选框和单选框样式，支持多种变体和自定义选项。

☑️ 复选框 ​

html
<!-- 基本复选框 -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
        复选框选项
    </label>
</div>

<!-- 默认选中 -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check2" checked>
    <label class="form-check-label" for="check2">
        默认选中
    </label>
</div>

<!-- 禁用状态 -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check3" disabled>
    <label class="form-check-label" for="check3">
        禁用复选框
    </label>
</div>

🔘 单选框 ​

html
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="radio1" checked>
    <label class="form-check-label" for="radio1">
        选项 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="radio2">
    <label class="form-check-label" for="radio2">
        选项 2
    </label>
</div>

🔄 开关 ​

html
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">
        开关选项
    </label>
</div>

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 复选框与单选框示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 复选框与单选框示例</h1>
        
        <h2>复选框</h2>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check1">
            <label class="form-check-label" for="check1">选项 1</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check2" checked>
            <label class="form-check-label" for="check2">选项 2（默认选中）</label>
        </div>
        
        <h2 class="mt-4">单选框</h2>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radio1" id="radio1" checked>
            <label class="form-check-label" for="radio1">选项 A</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radio1" id="radio2">
            <label class="form-check-label" for="radio2">选项 B</label>
        </div>
        
        <h2 class="mt-4">开关</h2>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="switch1">
            <label class="form-check-label" for="switch1">启用功能</label>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步 ​

下一章：Bootstrap 选择区间 →