前端 Bootstrap 框架基本介绍与使用
前端 Bootstrap 框架基本介绍与使用
Bootstrap 概述
Bootstrap 是目前使用最广泛的前端 UI 框架，由 Twitter 团队于 2011 年开源。它提供了一套预定义的 CSS 类和 JavaScript 插件，让开发者无需从零写样式就能快速搭建响应式页面。
核心优势：
- 响应式栅格：一套 12 列弹性网格，自动适配手机、平板、桌面。
- 丰富的组件：按钮、导航、卡片、模态框、表单等开箱即用。
- 一致性设计：统一的设计语言，避免样式割裂。
- 可定制：通过 Sass 变量覆盖默认主题色、间距等。
引入方式
最简单的引入方式是通过 CDN（内容分发网络）：
<!-- 在 <head> 中引入 CSS --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet"><!-- 在 </body> 前引入 JS（已含 Popper） --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>引入后，所有 Bootstrap 类即可直接使用，无需额外配置。
栅格系统
栅格是 Bootstrap 最核心的布局机制。页面被划分为 12 列，通过.container→.row→.col-*三级结构来分配宽度。
三层结构
| 层级 | 类名 | 作用 |
|---|---|---|
| 容器 | .container | 固定宽度并水平居中，各断点有不同最大宽度 |
| 容器 | .container-fluid | 100% 宽度，始终撑满视口 |
| 行 | .row | 包裹列，用负边距抵消容器的 padding |
| 列 | .col/.col-{断点}-{份数} | 按 12 份分配宽度 |
五种断点
| 断点前缀 | 适用宽度 | 典型设备 |
|---|---|---|
无前缀.col- | < 576px | 手机（超小屏） |
.col-sm- | ≥ 576px | 手机横屏 |
.col-md- | ≥ 768px | 平板 |
.col-lg- | ≥ 992px | 小桌面 |
.col-xl- | ≥ 1200px | 大桌面 |
核心逻辑：断点以上生效，断点以下堆叠。例如.col-md-6在 ≥768px 时占 6/12 宽，更小屏幕则占满一整行。
基础示例
<divclass="container"><divclass="row"><divclass="col-md-4">侧边栏</div><divclass="col-md-8">主内容区</div></div></div>常用列组合
<!-- 等宽列：自动均分 --><divclass="row"><divclass="col">列1</div><divclass="col">列2</div><divclass="col">列3</div></div><!-- 指定列宽 --><divclass="row"><divclass="col-4">占4份</div><divclass="col-8">占8份</div></div><!-- 响应式：大屏4列、小屏2列 --><divclass="row"><divclass="col-md-3 col-sm-6">1</div><divclass="col-md-3 col-sm-6">2</div><divclass="col-md-3 col-sm-6">3</div><divclass="col-md-3 col-sm-6">4</div></div><!-- 列偏移：实现居中 --><divclass="row"><divclass="col-4 offset-4">居中显示</div></div>注：将浏览器窗口缩窄即可看到断点切换效果——
.col-md-3在大屏上一行四个，小屏上变为一行两个（.col-sm-6）。
常用组件
Bootstrap 提供了大量预置组件，只需复制文档中的代码片段即可使用。
3.1 按钮
通过.btn基类 + 变体类组合，共有七种语义变体和四种尺寸。
<buttonclass="btn btn-primary">主按钮</button><buttonclass="btn btn-secondary">次要按钮</button><buttonclass="btn btn-success">成功按钮</button><buttonclass="btn btn-danger">危险按钮</button><buttonclass="btn btn-warning">警告按钮</button><buttonclass="btn btn-info">信息按钮</button><!-- 轮廓样式 --><buttonclass="btn btn-outline-primary">轮廓按钮</button><!-- 尺寸 --><buttonclass="btn btn-primary btn-lg">大号</button><buttonclass="btn btn-primary btn-sm">小号</button>3.2 警告框
<divclass="alert alert-success"role="alert">操作成功！</div><divclass="alert alert-warning alert-dismissible fade show">注意：库存不足<buttonclass="btn-close"data-bs-dismiss="alert"></button></div>带.alert-dismissible和关闭按钮的提示框可被用户关闭。
3.3 卡片
.card是 Bootstrap 中最灵活的容器组件，由头部、内容、图片、底部等子模块自由组合。
<divclass="card"style="width:18rem;"><divclass="card-body"><h5class="card-title">卡片标题</h5><pclass="card-text">卡片内容文字，可搭配任意子元素。</p><ahref="#"class="btn btn-primary">详情</a></div></div>3.4 导航栏
<navclass="navbar navbar-expand-lg navbar-dark bg-dark"><divclass="container"><aclass="navbar-brand"href="#">Brand</a><divclass="navbar-nav"><aclass="nav-link active"href="#">首页</a><aclass="nav-link"href="#">产品</a><aclass="nav-link"href="#">关于</a></div></div></nav>navbar-expand-lg：在 lg 断点以上展开为横向导航，以下折叠为汉堡菜单。navbar-dark bg-dark：深色背景 + 浅色文字主题。
工具类
工具类是 Bootstrap 的一大亮点——无需写任何 CSS，通过类名就能控制间距、对齐、显示、颜色等。
间距
格式：{属性}{边}-{尺寸}，尺寸范围 0~5（或 auto）。
| 属性 | 含义 | 边 | 含义 |
|---|---|---|---|
m | margin | t / b / s / e / x / y | 上 / 下 / 左 / 右 / X轴 / Y轴 |
p | padding | （省略） | 四边同时设置 |
<divclass="mt-3 mb-2 px-4"><!-- margin-top: 1rem; margin-bottom: .5rem; padding-left/right: 1.5rem --></div>尺寸对照：0= 0，1= 0.25rem，2= 0.5rem，3= 1rem，4= 1.5rem，5= 3rem。
常用工具类
| 类别 | 类名示例 | 效果 |
|---|---|---|
| 文本对齐 | .text-start/.text-center/.text-end | 左 / 中 / 右对齐 |
| 文本颜色 | .text-primary/.text-danger/.text-muted | 语义色文字 |
| 背景色 | .bg-light/.bg-dark/.bg-primary | 背景色 |
| 显示控制 | .d-none/.d-flex/.d-md-block | 隐藏 / 弹性 / 断点显示 |
| Flex 对齐 | .justify-content-center/.align-items-center | 主轴居中 / 交叉轴居中 |
| 圆角 | .rounded/.rounded-circle/.rounded-pill | 圆角 / 圆形 / 胶囊形 |
| 阴影 | .shadow/.shadow-sm/.shadow-lg | 阴影层级 |
| 宽度 | .w-25/.w-50/.w-100 | 25% / 50% / 100% 宽度 |
表单
Bootstrap 的表单控件通过.form-control和.form-label等类实现统一外观，配合栅格系统可以快速搭建各类布局。
基础登录表单
<form><divclass="mb-3"><labelfor="email"class="form-label">邮箱</label><inputtype="email"class="form-control"id="email"placeholder="name@example.com"></div><divclass="mb-3"><labelfor="password"class="form-label">密码</label><inputtype="password"class="form-control"id="password"></div><divclass="mb-3 form-check"><inputtype="checkbox"class="form-check-input"id="remember"><labelclass="form-check-label"for="remember">记住我</label></div><buttontype="submit"class="btn btn-primary w-100">登录</button></form>要点：
.form-control统一输入框、下拉框、文本域的样式。.form-label统一标签的字体、间距。.form-check配合.form-check-input+.form-check-label处理 checkbox/radio。
输入组
在输入框两侧附加文本或按钮：
<divclass="input-group mb-3"><spanclass="input-group-text">¥</span><inputtype="text"class="form-control"><spanclass="input-group-text">.00</span></div>表单栅格布局
将表单元素放入栅格，实现多列布局：
<divclass="row"><divclass="col-md-6 mb-3"><labelclass="form-label">姓</label><inputtype="text"class="form-control"></div><divclass="col-md-6 mb-3"><labelclass="form-label">名</label><inputtype="text"class="form-control"></div></div>小结
- 栅格：
container > row > col-断点-份数，永远 12 列。 - 组件：记住
btn、card、alert、navbar四个最常用组件即可覆盖大部分场景。 - 工具类：
m/p调间距，text/bg调颜色，d-flex调布局，无需手写 CSS。 - 表单：
form-control+form-label+mb-3三件套，快速搭建整齐的表单。