Bootstrap是一套开源的前端CSS框架，内置了丰富的预定义样式和布局组件，开发者无需从零编写基础CSS代码，就能快速搭建出适配多终端的响应式页面，大幅提升前端开发效率。
Bootstrap的基础引入方式
使用Bootstrap前需要先将其引入项目，目前主流的引入方式有两种，开发者可以根据项目需求选择。
CDN引入
如果是小型项目或者临时测试，直接通过CDN引入是最便捷的方式，无需下载本地文件，在HTML的<head>标签中添加以下代码即可：
<!-- 引入Bootstrap CSS --> <link href="https://cdn.ipipp.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap JS，依赖Popper.js --> <script src="https://cdn.ipipp.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
本地引入
如果是长期维护的中大型项目，建议下载Bootstrap的源码包，解压后将css和js文件夹放到项目的静态资源目录中，再通过相对路径引入：
<link rel="stylesheet" href="./static/css/bootstrap.min.css"> <script src="./static/js/bootstrap.bundle.min.js"></script>
核心布局组件的使用方法
Bootstrap提供了大量开箱即用的布局组件，其中栅格系统、导航栏、卡片是最常用的三类，覆盖了大部分页面布局场景。
栅格系统
栅格系统是Bootstrap响应式布局的核心，它将页面水平方向分为12等份，开发者可以通过指定元素占据的份数来控制布局。栅格系统需要配合container、row、col-*类使用，其中container是容器类，row是行类，col-*是列类。
以下是一个简单的两列布局示例，在中等屏幕及以上左侧占4份，右侧占8份，小屏幕下两列各占12份自动换行：
<div class="container">
<div class="row">
<!-- 中等屏幕及以上占4/12，小屏幕占12/12 -->
<div class="col-md-4 col-12">
<p>左侧侧边栏内容</p>
</div>
<!-- 中等屏幕及以上占8/12，小屏幕占12/12 -->
<div class="col-md-8 col-12">
<p>右侧主体内容</p>
</div>
</div>
</div>
栅格系统还支持响应式断点设置，常见的断点类前缀有col-（超小屏幕，<576px）、col-sm-（小屏幕，≥576px）、col-md-（中等屏幕，≥768px）、col-lg-（大屏幕，≥992px）、col-xl-（超大屏幕，≥1200px）。
导航栏组件
导航栏是页面顶部的常用组件，Bootstrap的导航栏支持响应式折叠，在小屏幕下会自动变成汉堡菜单。以下是一个基础导航栏示例：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">站点名称</a>
<!-- 汉堡菜单按钮，小屏幕下显示 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
</div>
</div>
</nav>
卡片组件
卡片组件常用于展示图文结合的内容，比如商品列表、文章列表等，支持自定义头部、主体、底部内容。以下是一个基础卡片示例：
<div class="container">
<div class="row">
<div class="col-md-4 col-12">
<div class="card">
<img src="https://picsum.photos/300/200?random=2" 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>
</div>
</div>
Bootstrap实战技巧
掌握基础组件使用后，结合以下实战技巧可以进一步提升开发效率，解决常见的适配问题。
间距调整技巧
Bootstrap提供了完善的间距工具类，无需手动编写margin和padding的CSS代码。间距类格式为{属性}{方向}-{尺寸}，其中属性有m（margin）和p（padding），方向有t（上）、b（下）、s（左）、e（右）、x（左右）、y（上下）、空白（四周），尺寸从0到5对应不同的间距大小。
例如给元素添加上下16px的padding，可以使用py-3类；给元素添加左侧24px的margin，可以使用ms-4类：
<div class="py-3 ms-4"> <p>这个元素有上下内边距和左侧外边距</p> </div>
自定义样式覆盖
如果Bootstrap的默认样式不符合需求，不要直接修改Bootstrap的源码文件，建议在项目自己的CSS文件中编写覆盖样式，利用CSS的优先级规则实现自定义效果。例如要修改按钮的背景色：
/* 项目自定义CSS文件 */
.btn-custom {
background-color: #ff6b6b;
border-color: #ff6b6b;
}
.btn-custom:hover {
background-color: #ff4c4c;
border-color: #ff4c4c;
}
在HTML中使用自定义按钮类：
<button class="btn btn-custom">自定义按钮</button>
响应式显示控制
如果需要在不同屏幕下显示或隐藏元素，可以使用Bootstrap的显示工具类。例如只在中等屏幕及以上显示某个元素，可以使用d-none d-md-block类：
<div class="d-none d-md-block"> <p>这个内容只在中等屏幕及以上显示</p> </div>
常见的显示类有d-block（显示为块级元素）、d-none（隐藏）、d-flex（显示为弹性盒子），配合断点前缀可以实现不同屏幕下的显示控制。
常见问题解答
- Bootstrap 4和Bootstrap 5有什么区别？ Bootstrap 5不再依赖jQuery，删除了一些过时组件，新增了更多工具类，响应式断点也做了调整，新项目建议直接使用Bootstrap 5。
- 引入Bootstrap后样式冲突怎么办？ 尽量使用Bootstrap提供的类来编写样式，减少自定义CSS的编写，如果必须自定义，注意选择器的优先级，避免全局样式污染。
- 栅格系统的列加起来超过12份会怎么样？ 超过12份的列会自动换行到下一行，不会影响页面布局，但是建议合理分配列数，保持布局整齐。