Bootstrap参考手册
本参考手册提供了Bootstrap所有类、组件和工具的快速查阅。Bootstrap是一个强大的前端框架，通过使用预定义的CSS类，可以快速构建响应式、移动优先的网站。
使用建议： 本参考手册按照功能模块分类，每个模块都包含详细的类名、描述和使用示例。您可以使用搜索功能快速查找特定类名或组件。
Bootstrap版本信息
本参考手册基于Bootstrap 5.x版本编写。Bootstrap 5是当前最新稳定版本，与Bootstrap 4相比有以下主要变化：
- 放弃对Internet Explorer的支持
- 使用原生CSS变量进行主题定制
- 改进了网格系统，增加了新的断点
- 新增了更多实用工具类
- 优化了表单组件
注意： 如果您正在使用Bootstrap 4或更早版本，某些类名和功能可能有所不同。请参考相应版本的官方文档。
布局
布局相关的类用于控制页面整体结构和容器系统。Bootstrap使用容器、行和列来构建响应式布局。
容器
容器是Bootstrap布局的基本构建块，它们包含、填充和对齐您的内容。Bootstrap提供三种类型的容器：
| 类名 | 描述 | 示例 |
|---|---|---|
.container |
响应式固定宽度容器，在不同断点处有最大宽度限制 | <div class="container">...</div> |
.container-fluid |
全宽容器，始终占据视口的100%宽度 | <div class="container-fluid">...</div> |
.container-{breakpoint} |
响应式容器，在指定断点之前100%宽度，之后变为固定宽度 | <div class="container-md">...</div> |
最佳实践： 在大多数情况下，使用
.container类即可。只有在需要全宽布局时才使用.container-fluid。
网格系统
Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它是基于flexbox构建的，允许最多12列。
| 类名 | 描述 | 示例 |
|---|---|---|
.row |
创建一行，用于包含列 | <div class="row">...</div> |
.col |
等宽列，自动分配可用空间 | <div class="col">...</div> |
.col-{number} |
指定列宽（1-12），基于12列网格系统 | <div class="col-6">...</div> |
.col-{breakpoint}-{number} |
响应式列，在指定断点及以上应用列宽 | <div class="col-md-6">...</div> |
.offset-{number} |
列偏移，向右移动指定列数 | <div class="col-4 offset-4">...</div> |
.g-{number} |
网格间距（0-5），控制列之间的间隙 | <div class="row g-3">...</div> |
网格系统示例
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- 主要内容区域 -->
</div>
<div class="col-md-4">
<!-- 侧边栏区域 -->
</div>
</div>
</div>内容
内容相关的类用于处理文本、图像、表格等内容的样式和排版。
排版
Bootstrap提供了一套完整的排版工具，包括标题、段落、列表等样式。
| 类名 | 描述 | 示例 |
|---|---|---|
.h1 - .h6 |
标题样式，使元素看起来像标题 | <p class="h1">标题</p> |
.display-1 - .display-6 |
大标题，比普通标题更大更醒目 | <h1 class="display-1">大标题</h1> |
.lead |
引导段落，使段落更突出 | <p class="lead">...</p> |
.text-{alignment} |
文本对齐（start, center, end） | <p class="text-center">...</p> |
.fw-{weight} |
字体粗细（bold, bolder, normal, light, lighter） | <p class="fw-bold">...</p> |
.fst-{style} |
字体样式（italic, normal） | <p class="fst-italic">...</p> |
图片
Bootstrap提供了一些类来使图片具有响应式特性并添加样式。
| 类名 | 描述 | 示例 |
|---|---|---|
.img-fluid |
响应式图片，自动调整大小以适应父容器 | <img class="img-fluid" src="..."> |
.img-thumbnail |
缩略图，添加边框和圆角 | <img class="img-thumbnail" src="..."> |
.rounded |
圆角图片 | <img class="rounded" src="..."> |
.float-{direction} |
图片浮动（start, end） | <img class="float-start" src="..."> |
表格
Bootstrap提供了多种表格样式和变体，使表格更加美观和易用。
| 类名 | 描述 | 示例 |
|---|---|---|
.table |
基础表格 | <table class="table">...</table> |
.table-striped |
条纹表格，交替行背景色 | <table class="table table-striped">...</table> |
.table-bordered |
带边框表格 | <table class="table table-bordered">...</table> |
.table-hover |
悬停效果，鼠标悬停时行高亮 | <table class="table table-hover">...</table> |
.table-responsive |
响应式表格，在小屏幕上水平滚动 | <div class="table-responsive"><table>...</table></div> |
组件
Bootstrap提供了一系列预构建的组件，可以快速添加到您的项目中。
按钮
Bootstrap提供了多种按钮样式和变体，适用于各种交互场景。
| 类名 | 描述 | 示例 |
|---|---|---|
.btn |
基础按钮 | <button class="btn">按钮</button> |
.btn-{color} |
按钮颜色（primary, secondary, success等） | <button class="btn btn-primary">按钮</button> |
.btn-outline-{color} |
轮廓按钮，只有边框和文字有颜色 | <button class="btn btn-outline-primary">按钮</button> |
.btn-{size} |
按钮大小（sm, lg） | <button class="btn btn-primary btn-sm">按钮</button> |
.btn-group |
按钮组，将多个按钮组合在一起 | <div class="btn-group">...</div> |
卡片
卡片是一个灵活的可扩展内容容器，包含页眉、页脚和内容区域。
| 类名 | 描述 | 示例 |
|---|---|---|
.card |
基础卡片 | <div class="card">...</div> |
.card-body |
卡片主体 | <div class="card-body">...</div> |
.card-title |
卡片标题 | <h5 class="card-title">标题</h5> |
.card-text |
卡片文本 | <p class="card-text">文本</p> |
.card-header |
卡片头部 | <div class="card-header">...</div> |
.card-footer |
卡片底部 | <div class="card-footer">...</div> |
导航
Bootstrap提供多种导航组件，包括基础导航、标签页和导航栏。
| 类名 | 描述 | 示例 |
|---|---|---|
.nav |
基础导航 | <ul class="nav">...</ul> |
.nav-tabs |
标签页导航 | <ul class="nav nav-tabs">...</ul> |
.nav-pills |
胶囊导航 | <ul class="nav nav-pills">...</ul> |
.navbar |
导航栏 | <nav class="navbar">...</nav> |
.navbar-expand-{breakpoint} |
响应式导航栏，在指定断点处展开 | <nav class="navbar navbar-expand-lg">...</nav> |
.navbar-{color} |
导航栏颜色（light, dark） | <nav class="navbar navbar-dark">...</nav> |
其他组件
Bootstrap还提供了许多其他有用的组件，用于常见UI需求。
| 类名 | 描述 | 示例 |
|---|---|---|
.alert |
警告框，用于显示重要消息 | <div class="alert alert-primary">...</div> |
.badge |
徽章，用于突出显示小段信息 | <span class="badge bg-primary">新</span> |
.breadcrumb |
面包屑，显示当前页面在网站结构中的位置 | <nav class="breadcrumb">...</nav> |
.progress |
进度条，显示任务的完成进度 | <div class="progress">...</div> |
.spinner-border |
加载指示器，表示正在加载内容 | <div class="spinner-border"></div> |
.toast |
toast通知，轻量级的信息提示 | <div class="toast">...</div> |
工具类
Bootstrap提供了大量实用工具类，用于快速构建和自定义界面，无需编写自定义CSS。
间距
使用间距工具类控制元素的边距(margin)和内边距(padding)。
| 类名 | 描述 | 示例 |
|---|---|---|
.m-{number} |
外边距（0-5） | <div class="m-3">...</div> |
.p-{number} |
内边距（0-5） | <div class="p-3">...</div> |
.m{t|r|b|l}-{number} |
单边外边距 | <div class="mt-3">...</div> |
.p{t|r|b|l}-{number} |
单边内边距 | <div class="pt-3">...</div> |
.m{x|y}-{number} |
水平/垂直外边距 | <div class="mx-3">...</div> |
.p{x|y}-{number} |
水平/垂直内边距 | <div class="py-3">...</div> |
颜色
使用颜色工具类设置文本颜色和背景颜色。
| 类名 | 描述 | 示例 |
|---|---|---|
.text-{color} |
文本颜色 | <p class="text-primary">...</p> |
.bg-{color} |
背景颜色 | <div class="bg-primary">...</div> |
.border-{color} |
边框颜色 | <div class="border border-primary">...</div> |
显示
控制元素的显示方式、可见性和定位。
| 类名 | 描述 | 示例 |
|---|---|---|
.d-{value} |
显示属性（none, block, inline, flex等） | <div class="d-none">...</div> |
.d-{breakpoint}-{value} |
响应式显示 | <div class="d-md-block">...</div> |
.visible |
可见 | <div class="visible">...</div> |
.invisible |
不可见（但保留空间） | <div class="invisible">...</div> |
Flexbox
Flexbox工具类用于控制flex容器的对齐、方向和分布。
| 类名 | 描述 | 示例 |
|---|---|---|
.d-flex |
Flex容器 | <div class="d-flex">...</div> |
.justify-content-{value} |
主轴对齐 | <div class="justify-content-center">...</div> |
.align-items-{value} |
交叉轴对齐 | <div class="align-items-center">...</div> |
.flex-{direction} |
方向（row, column） | <div class="flex-column">...</div> |
.flex-{breakpoint}-{value} |
响应式Flex | <div class="flex-md-row">...</div> |
表单
Bootstrap提供了一系列表单控件和布局选项，用于创建美观且功能完整的表单。
表单控件
Bootstrap为各种表单元素提供了样式类。
| 类名 | 描述 | 示例 |
|---|---|---|
.form-control |
表单控件，用于输入框、文本域等 | <input class="form-control"> |
.form-select |
选择菜单 | <select class="form-select">...</select> |
.form-check |
复选框/单选按钮容器 | <div class="form-check">...</div> |
.form-check-input |
复选框/单选按钮 | <input class="form-check-input"> |
.form-check-label |
复选框/单选按钮标签 | <label class="form-check-label">...</label> |
.form-label |
表单标签 | <label class="form-label">...</label> |
表单布局
Bootstrap提供多种表单布局选项，包括水平表单和内联表单。
| 类名 | 描述 | 示例 |
|---|---|---|
.form-group |
表单组（Bootstrap 4） | <div class="form-group">...</div> |
.mb-3 |
表单组间距（Bootstrap 5） | <div class="mb-3">...</div> |
.row + .col |
水平表单布局 | <div class="row"><div class="col">...</div></div> |
.form-inline |
内联表单（Bootstrap 4） | <form class="form-inline">...</form> |
.row + .col-auto |
内联表单布局（Bootstrap 5） | <div class="row"><div class="col-auto">...</div></div> |
表单验证
Bootstrap提供表单验证样式类，用于显示验证状态和反馈信息。
| 类名 | 描述 | 示例 |
|---|---|---|
.is-valid |
验证成功 | <input class="form-control is-valid"> |
.is-invalid |
验证失败 | <input class="form-control is-invalid"> |
.valid-feedback |
成功提示 | <div class="valid-feedback">...</div> |
.invalid-feedback |
错误提示 | <div class="invalid-feedback">...</div> |
辅助类
Bootstrap提供了一些辅助类，用于处理特定样式需求。
定位
使用定位工具类控制元素的位置。
| 类名 | 描述 | 示例 |
|---|---|---|
.position-{value} |
定位（static, relative, absolute, fixed, sticky） | <div class="position-absolute">...</div> |
.top-{number} |
顶部定位（0-100） | <div class="top-0">...</div> |
.start-{number} |
左侧定位（0-100） | <div class="start-0">...</div> |
.translate-middle |
居中定位 | <div class="translate-middle">...</div> |
边框
使用边框工具类添加或移除边框，以及设置边框颜色和圆角。
| 类名 | 描述 | 示例 |
|---|---|---|
.border |
添加边框 | <div class="border">...</div> |
.border-{side} |
单边边框（top, end, bottom, start） | <div class="border-top">...</div> |
.border-{number} |
边框宽度（1-5） | <div class="border-2">...</div> |
.rounded |
圆角 | <div class="rounded">...</div> |
.rounded-{side} |
单边圆角（top, end, bottom, start, circle, pill） | <div class="rounded-top">...</div> |
阴影
使用阴影工具类为元素添加阴影效果。
| 类名 | 描述 | 示例 |
|---|---|---|
.shadow |
常规阴影 | <div class="shadow">...</div> |
.shadow-sm |
小阴影 | <div class="shadow-sm">...</div> |
.shadow-lg |
大阴影 | <div class="shadow-lg">...</div> |
.shadow-none |
无阴影 | <div class="shadow-none">...</div> |
浏览器兼容性
支持的浏览器
Chrome
最新版本
Firefox
最新版本
Safari
最新版本
Edge
最新版本
Opera
最新版本
注意： Bootstrap 5 不再支持 Internet Explorer。如果需要支持 IE，请使用 Bootstrap 4。