Bootstrap 4 组件

按钮 Buttons

<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 btn-sm">小按钮</button>

<!-- 块级按钮（v5 中已移除） -->
<button class="btn btn-primary btn-block">块级按钮</button>

徽章 Badges

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>

<!-- 胶囊形徽章（v5 中已移除） -->
<span class="badge badge-pill badge-primary">胶囊徽章</span>

Bootstrap 5 将徽章样式改为 .text-bg-* 模式，而 v4 使用 .badge-*。

卡片 Cards

<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>

卡片组（v5 中已移除）

Bootstrap 4 提供了 .card-deck 和 .card-group 来排列卡片。v5 推荐使用网格系统替代：

<div class="card-deck">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</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-toggle="collapse" data-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

注意 v4 使用 data-toggle、data-target（不带 -bs- 前缀）和 ml-auto（v5 中改为 ms-auto）。

警告框 Alerts

<div class="alert alert-primary" role="alert">一条主要提示</div>
<div class="alert alert-success">操作成功完成！</div>

<!-- 可关闭的警告框（v4 使用 .close + data-dismiss） -->
<div class="alert alert-warning alert-dismissible fade show">
    <strong>注意！</strong> 这是一个可以关闭的警告框。
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

模态框 Modals

<!-- 触发按钮（v4 使用 data-toggle / data-target） -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-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="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">主体内容</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

轮播 Carousel

<div id="carouselExample" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

注意 v4 使用 data-ride="carousel"、data-slide（v5 改为 data-bs-ride、data-bs-slide）。

Jumbotron（v5 中已移除）

Bootstrap 4 提供了 .jumbotron 组件用于超大横幅展示。v5 中已移除，推荐使用工具类组合：

<!-- Bootstrap 4 -->
<div class="jumbotron">
    <h1 class="display-4">你好，世界！</h1>
    <p class="lead">这是一个简单的 Jumbotron 示例。</p>
</div>

<!-- Bootstrap 5 替代方案 -->
<div class="bg-light p-5 rounded">
    <h1 class="display-4">你好，世界！</h1>
    <p class="lead">这是一个替代方案。</p>
</div>

Media Object（v5 中已移除）

Bootstrap 4 内置了 .media 对象用于图文混排。v5 中移除，推荐使用 Flexbox 工具类：

<!-- Bootstrap 4 -->
<div class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
        <h5 class="mt-0">标题</h5>
        <p>内容文字...</p>
    </div>
</div>

<!-- Bootstrap 5 替代方案 -->
<div class="d-flex align-items-start">
    <img src="..." class="me-3" alt="...">
    <div>
        <h5 class="mt-0">标题</h5>
        <p>内容文字...</p>
    </div>
</div>

表单 Form

Bootstrap 4 的表单系统使用 .form-group 包裹表单控件：

<form>
    <div class="form-group">
        <label for="email">邮箱地址</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="select">选择框</label>
        <select class="form-control" id="select">
            <option>选项 1</option>
        </select>
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check">同意条款</label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

Bootstrap 5 移除了 .form-group，改用 .mb-3 实现间距。

定制表单控件（v5 中移除）

Bootstrap 4 提供了一套定制表单控件，v5 中全部改用原生样式：

<!-- Bootstrap 4 定制选择框 -->
<select class="custom-select">
    <option>选项 1</option>
</select>

<!-- Bootstrap 4 定制文件上传 -->
<div class="custom-file">
    <input type="file" class="custom-file-input" id="file">
    <label class="custom-file-label" for="file">选择文件...</label>
</div>

与 Bootstrap 5 组件区别汇总

组件	Bootstrap 4	Bootstrap 5
按钮块级	.btn-block	.d-block .w-100
徽章	.badge-*	.text-bg-*
胶囊徽章	.badge-pill	.rounded-pill
关闭按钮	.close + ×	.btn-close
表单分组	.form-group	.mb-3
定制选择	.custom-select	.form-select
定制文件	.custom-file	原生文件输入
超大横幅	.jumbotron	工具类组合
媒体对象	.media	.d-flex
卡片组	.card-deck	.row-cols-*
data 属性	data-toggle	data-bs-toggle
JS 依赖	jQuery + Popper	原生 JS