组件

按钮 Buttons

使用 .btn 类创建按钮，配合色彩类改变样式：

<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-dark">深色</button>

按钮尺寸

<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">默认按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>

卡片 Cards

卡片是 Bootstrap 5 中最通用的内容容器组件：

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是一张示例卡片，包含图片、标题和文字。</p>
        <a href="#" class="btn btn-primary">了解更多</a>
    </div>
</div>

卡片布局

使用栅格系统排列多张卡片：

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 1</h5>
                <p class="card-text">内容</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 2</h5>
                <p class="card-text">内容</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">卡片 3</h5>
                <p class="card-text">内容</p>
            </div>
        </div>
    </div>
</div>

导航栏 Navbar

导航栏是网站的核心导航组件，支持响应式折叠：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">品牌</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

警告框 Alerts

用于向用户显示提示信息：

<div class="alert alert-primary" role="alert">一条主要提示</div>
<div class="alert alert-success">操作成功完成！</div>
<div class="alert alert-danger">发生错误，请重试。</div>
<div class="alert alert-warning">请注意此警告信息。</div>

可关闭的警告框

<div class="alert alert-warning alert-dismissible fade show">
    <strong>注意！</strong> 这是一个可以关闭的警告框。
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

模态框 Modals

模态框是覆盖在主内容上的对话框：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                主体内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>