Bootstrap 3 组件

按钮

Bootstrap 3 的按钮使用 .btn 和 .btn-* 类：

<button class="btn btn-default">默认</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-link">链接</button>

导航栏

Bootstrap 3 的导航栏使用 data-toggle 属性，依赖 jQuery：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar3">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar3">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

模态框

Bootstrap 3 模态框使用 jQuery 驱动：

<!-- 触发按钮 -->
<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">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
                <p>内容区域</p>
            </div>
        </div>
    </div>
</div>

提示框（Alert）

<div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">
        <span>×</span>
    </button>
    <strong>警告！</strong>请检查输入内容。
</div>

标签与徽章

Bootstrap 3 使用 .label 和 .badge：

<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-danger">危险标签</span>

<span class="badge">42</span>

与 Bootstrap 5 的主要差异

组件	Bootstrap 3	Bootstrap 5
关闭按钮	button class="close"	button class="btn-close"
导航栏	navbar-default	navbar-light/navbar-dark
按钮图标	.glyphicon	.bi-*
标签	.label	.badge
data 属性	data-toggle	data-bs-toggle
JavaScript	jQuery 必需	原生 JS，无依赖