Bootstrap5 教程
什么是 Bootstrap 5?
Bootstrap 5 是当前主流的开源 CSS 框架,由 Twitter 团队开发维护。它提供了一套完整的响应式布局、预置组件与工具类,让开发者无需从零编写样式,即可快速构建现代化的网页界面。
核心特性
- 移动优先:默认从手机端开始设计,再向大屏扩展
- 栅格系统:12 列响应式网格,适配各种屏幕尺寸
- 组件丰富:按钮、卡片、轮播、模态框等 30+ 常用组件
- 工具类:间距、对齐、显示等实用类,无需自定义 CSS
Bootstrap 5 与 4 的主要区别
- 移除了对 jQuery 的依赖,改用原生 JavaScript
- 移除了 IE 浏览器支持
- 新增了图标库 Bootstrap Icons
- CSS 变量系统全面升级,主题定制更简单
- 表单样式与工具类 API 重新设计
快速体验
使用 CDN 引入,几行代码即可体验 Bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-primary">主按钮</button>
本章后续内容将带你从安装配置开始,系统学习 Bootstrap 5 的每一个模块。
Bootstrap5 安装使用
Bootstrap 5 安装使用
安装 Bootstrap 5 主要有三种方式:CDN 引入、包管理器安装、本地下载。
1. CDN 引入(最快捷)
在 HTML 的 head 中引入 CSS,在 body 底部引入 JS:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
2. 包管理器安装
npm install bootstrap
# 或
yarn add bootstrap
然后在入口文件中引入:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
3. 离线下载
从官网 getbootstrap.com 下载编译好的 CSS/JS 文件,放到项目目录中引用。
必需的标签
Bootstrap 5 使用 HTML5 文档结构,建议包含:
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1">
其中 viewport 标签是响应式布局的关键。
Bootstrap5 容器
Bootstrap 5 容器(Container)
容器是 Bootstrap 布局的基本单位,用于包裹页面内容并控制最大宽度与水平内边距。
三种容器类型
- .container:响应式固定宽度,根据断点自动调整
- .container-fluid:始终占满整个视口宽度
- .container-{breakpoint}:在指定断点以下全宽,以上为固定宽度
示例
<div class="container">响应式固定宽度容器</div>
<div class="container-fluid">全宽容器</div>
<div class="container-md">在 md 断点(768px)以上为固定宽度</div>
容器断点尺寸
.container-sm max-width: 540px (≥576px)
.container-md max-width: 720px (≥768px)
.container-lg max-width: 960px (≥992px)
.container-xl max-width: 1140px (≥1200px)
.container-xxl max-width: 1320px (≥1400px)
嵌套使用
容器可以嵌套,但通常一个页面使用一个主容器即可。容器内部搭配栅格系统(row/col)实现复杂布局。
注意:容器默认有 15px 的左右内边距,若需要无内边距布局,可使用 .p-0 工具类清除。
Bootstrap5 网格系统
Bootstrap 5 网格系统
Bootstrap 5 采用 12 列栅格系统,通过 row 和 col 组合实现响应式布局。
基本结构
<div class="row">
<div class="col">列 1</div>
<div class="col">列 2</div>
<div class="col">列 3</div>
</div>
三个 col 会自动平分 12 列,各占 1/3 宽度。
指定列宽
<div class="row">
<div class="col-8">占 8 列</div>
<div class="col-4">占 4 列</div>
</div>
响应式断点类
.col-sm-* ≥576px .col-md-* ≥768px
.col-lg-* ≥992px .col-xl-* ≥1200px .col-xxl-* ≥1400px
综合示例
<div class="row">
<div class="col-md-6 col-lg-4">手机全宽,平板一半,桌面 1/3</div>
<div class="col-md-6 col-lg-4">同上</div>
<div class="col-md-12 col-lg-4">平板换行全宽,桌面 1/3</div>
</div>
对齐与排序
使用 justify-content-*、align-items-* 控制对齐,使用 order-* 控制列顺序,使用 offset-* 偏移列。
Bootstrap5 文字排版
Bootstrap 5 文字排版
Bootstrap 5 对 HTML 标题、段落、引用等文本元素提供了统一的默认样式。
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<p class="h3">使用类名呈现标题样式</p>
自定义标题尺寸
<h1 class="display-1">大号展示标题</h1>
<h1 class="display-6">较小展示标题</h1>
段落与强调
<p class="lead">lead 类让段落更突出</p>
<mark>标记文本</mark> <small>小号文本</small>
<strong>加粗</strong> <em>斜体</em>
文本工具类
<p class="text-start">左对齐</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>
<p class="text-uppercase">全大写</p>
<p class="fw-bold">粗体字重</p>
引用块
<figure>
<blockquote class="blockquote">
<p>这是一段引用内容。</p>
</blockquote>
<figcaption class="blockquote-footer">
引用来源 <cite>某人</cite>
</figcaption>
</figure>
列表
.list-unstyled 去除默认样式,.list-inline 制作水平列表,.list-group 制作分组列表。
Bootstrap5 颜色
Bootstrap 5 颜色
Bootstrap 5 内置了一套语义化颜色系统,通过 CSS 变量定义,便于主题定制。
文本颜色
<p class="text-primary">主色(蓝)</p>
<p class="text-secondary">次色(灰)</p>
<p class="text-success">成功(绿)</p>
<p class="text-danger">危险(红)</p>
<p class="text-warning">警告(黄)</p>
<p class="text-info">信息(青)</p>
<p class="text-dark">深色</p>
<p class="text-light bg-dark">浅色</p>
<p class="text-muted">弱化文本</p>
背景颜色
<div class="bg-primary text-white">蓝色背景</div>
<div class="bg-success text-white">绿色背景</div>
<div class="bg-warning">黄色背景</div>
<div class="bg-danger text-white">红色背景</div>
透明颜色
<div class="bg-primary bg-opacity-25">25% 透明度</div>
<div class="bg-primary bg-opacity-50">50% 透明度</div>
CSS 变量自定义
:root {
--bs-primary: #0d6efd;
--bs-success: #198754;
}
/* 可在编译前覆盖这些变量实现换肤 */
渐变
<div class="bg-gradient-primary">渐变背景</div>
Bootstrap5 表格
Bootstrap 5 表格
给 table 添加 .table 类即可获得 Bootstrap 风格表格样式。
基础表格
<table class="table">
<thead>
<tr><th>姓名</th><th>城市</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>北京</td><td>28</td></tr>
<tr><td>李四</td><td>上海</td><td>32</td></tr>
</tbody>
</table>
表格修饰类
<table class="table table-striped"> <!-- 斑马纹 -->
<table class="table table-bordered"> <!-- 边框 -->
<table class="table table-hover"> <!-- 悬停高亮 -->
<table class="table table-sm"> <!-- 紧凑型 -->
<table class="table table-dark"> <!-- 深色 -->
行与单元格颜色
<tr class="table-primary"><td>主色行</td></tr>
<tr class="table-success"><td>成功色行</td></tr>
<td class="table-danger">危险色单元格</td>
响应式表格
<div class="table-responsive">
<table class="table">...</table>
</div>
<!-- 在 sm 断点以下可横向滚动: table-responsive-sm -->
对齐与垂直对齐
<table class="table align-middle">垂直居中</table>
<td class="text-end">单元格右对齐</td>
Bootstrap5 图像形状
Bootstrap 5 图像形状
Bootstrap 5 为图片提供了圆角、圆形、缩略图等实用样式类。
响应式图片
<img src="photo.jpg" class="img-fluid" alt="响应式图片">
<!-- img-fluid 设置 max-width:100%,自动缩放 -->
圆角与圆形
<img src="a.jpg" class="rounded" alt="小圆角">
<img src="a.jpg" class="rounded-circle" alt="圆形">
<img src="a.jpg" class="rounded-pill" alt="胶囊形">
<img src="a.jpg" class="rounded-0" alt="无圆角">
<img src="a.jpg" class="rounded-3" alt="自定义圆角">
缩略图
<img src="a.jpg" class="img-thumbnail" alt="带边框的缩略图">
图片对齐
<img src="a.jpg" class="float-start" alt="左浮动">
<img src="a.jpg" class="float-end" alt="右浮动">
<img src="a.jpg" class="mx-auto d-block" alt="水平居中">
文字与图片配合
<div class="clearfix">
<img src="a.jpg" class="float-end w-25" alt="右侧小图">
<p>文本环绕图片排列。</p>
</div>
图片宽度工具类
<img src="a.jpg" class="w-25" alt="25% 宽">
<img src="a.jpg" class="w-50" alt="50% 宽">
<img src="a.jpg" class="w-75" alt="75% 宽">
<img src="a.jpg" class="w-100" alt="100% 宽">
Bootstrap5 Jumbotron
Bootstrap 5 Jumbotron(巨型屏幕)
Jumbotron 用于展示页面头部的大块宣传区域,通常包含大标题和简要说明。在 Bootstrap 5 中,Jumbotron 不再作为独立组件,推荐使用 p-5 等工具类 + bg-light 自行组合。
经典实现方式
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">欢迎来到示例网站</h1>
<p class="col-md-8 fs-4">这是一个使用 Bootstrap 5 工具类构建的 Jumbotron 风格区域,用于吸引访客注意力。</p>
<button class="btn btn-primary btn-lg" type="button">了解更多</button>
</div>
</div>
深色版本
<div class="p-5 mb-4 bg-dark text-white rounded-3">
<h1 class="display-4">深色 Jumbotron</h1>
<p>深色背景上使用浅色文字形成对比。</p>
</div>
渐变背景版本
<div class="p-5 text-center bg-primary text-white rounded">
<h1>居中 Jumbotron</h1>
<p class="lead">背景色、圆角、内边距自由组合</p>
</div>
关键工具类说明
p-5:四周 3rem 内边距mb-4:底部 1.5rem 外边距rounded-3:大圆角display-5:大号展示字体fw-bold:加粗
通过工具类的自由组合,你可以实现任意风格的 Jumbotron 效果。
Bootstrap5 信息提示框
Bootstrap 5 信息提示框(Alert)
Alert 用于向用户展示操作反馈、警告或提示信息,支持关闭和自定义内容。
基础提示框
<div class="alert alert-primary">主要提示</div>
<div class="alert alert-secondary">次要提示</div>
<div class="alert alert-success">成功提示</div>
<div class="alert alert-danger">危险提示</div>
<div class="alert alert-warning">警告提示</div>
<div class="alert alert-info">信息提示</div>
<div class="alert alert-light">浅色提示</div>
<div class="alert alert-dark">深色提示</div>
带链接的提示框
<div class="alert alert-success">
操作成功!<a href="#" class="alert-link">查看详情</a>
</div>
可关闭提示框
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>注意!</strong> 这是一个可关闭的提示框。
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
带图标
<div class="alert alert-success d-flex align-items-center">
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#check-circle-fill"/></svg>
<div>操作成功完成!</div>
</div>
JS 控制关闭
// 关闭单个
var alert = bootstrap.Alert.getOrCreateInstance(element);
alert.close();
Bootstrap5 按钮
Bootstrap 5 按钮
Bootstrap 5 提供多色、多样式的按钮组件,支持尺寸、状态与图标组合。
按钮颜色
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-secondary">次按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-light">浅色</button>
<button class="btn btn-dark">深色</button>
<button class="btn btn-link">链接样式</button>
描边按钮
<button class="btn btn-outline-primary">主色描边</button>
<button class="btn btn-outline-success">成功描边</button>
尺寸
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">默认</button>
<button class="btn btn-primary btn-sm">小按钮</button>
块级按钮
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">占满整行</button>
</div>
按钮状态
<button class="btn btn-primary" disabled>禁用状态</button>
<button class="btn btn-primary active">激活状态</button>
加载动画
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
加载中...
</button>
按钮组
<div class="btn-group" role="group">
<button class="btn btn-outline-primary">左</button>
<button class="btn btn-outline-primary">中</button>
<button class="btn btn-outline-primary">右</button>
</div>
Bootstrap5 徽章
Bootstrap 5 徽章(Badge)
徽章用于在元素上附加小型的计数或状态标记,常见于按钮、标题和通知场景。
基础徽章
<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning text-dark">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light text-dark">浅色</span>
<span class="badge bg-dark">深色</span>
胶囊徽章
<span class="badge rounded-pill bg-primary">胶囊样式</span>
按钮内徽章
<button type="button" class="btn btn-primary position-relative">
收件箱
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">未读消息</span>
</span>
</button>
标题内徽章
<h1>示例标题 <span class="badge bg-secondary">New</span></h1>
<h2>二级标题 <span class="badge bg-success">Hot</span></h2>
纯文字徽章(无背景)
<span class="badge text-bg-primary">text-bg 组合类</span>
<!-- Bootstrap 5.2+ 推荐使用 text-bg-* 代替 bg-* 保证文字对比度 -->
Bootstrap5 进度条
Bootstrap 5 进度条(Progress)
进度条用于展示任务或操作的完成百分比,支持多种颜色、条纹和动画。
基础进度条
<div class="progress">
<div class="progress-bar" style="width:50%">50%</div>
</div>
不同颜色
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">成功</div>
</div>
<div class="progress mt-2">
<div class="progress-bar bg-info" style="width:60%">信息</div>
</div>
条纹进度条
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:70%">70%</div>
</div>
动画条纹
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
多段进度条
<div class="progress">
<div class="progress-bar" style="width:15%">15%</div>
<div class="progress-bar bg-success" style="width:30%">30%</div>
<div class="progress-bar bg-warning" style="width:20%">20%</div>
</div>
设置高度
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width:50%"></div>
</div>
无障碍访问
<div class="progress" role="progressbar" aria-label="下载进度" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width:50%"></div>
</div>
Bootstrap5 加载效果
Bootstrap 5 加载效果(Spinners)
加载动画用于提示用户操作正在进行,有旋转圆圈与进度条两种形式。
旋转圆圈
<div class="spinner-border" role="status">
<span class="visually-hidden">加载中...</span>
</div>
颜色变化
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
小尺寸与描边样式
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm text-success"></div>
增长动画
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
按钮内加载
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
提交中...
</button>
<button class="btn btn-success" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
加载数据...
</button>
对齐方式
<div class="text-center">
<div class="spinner-border"></div>
</div>
JS 控制显示隐藏
// 通过添加/移除 d-none 类控制
document.getElementById('loading').classList.toggle('d-none');
Bootstrap5 分页
Bootstrap 5 分页(Pagination)
分页组件用于在多页内容之间导航,常用于列表、表格和搜索结果页。
基础分页
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>
禁用与激活
<li class="page-item disabled"><span class="page-link">上一页</span></li>
<li class="page-item active" aria-current="page"><span class="page-link">2</span></li>
尺寸
<ul class="pagination pagination-lg">大分页</ul>
<ul class="pagination pagination-sm">小分页</ul>
对齐
<nav aria-label="...">
<ul class="pagination justify-content-center">居中</ul>
</nav>
<ul class="pagination justify-content-end">右对齐</ul>
省略号与箭头图标
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="page-item disabled"><span class="page-link">...</span></li>
面包屑导航(相关组件)
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">当前页</li>
</ol>
</nav>
Bootstrap5 列表组
Bootstrap 5 列表组(List Group)
列表组用于展示一组相关的列表项,支持徽章、链接、按钮与自定义内容。
基础列表组
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
激活与禁用
<li class="list-group-item active">激活项(高亮)</li>
<li class="list-group-item disabled">禁用项(灰显)</li>
链接式列表
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">链接项 1</a>
<a href="#" class="list-group-item list-group-item-action active">链接项 2</a>
</div>
颜色主题
<li class="list-group-item list-group-item-primary">主色</li>
<li class="list-group-item list-group-item-success">成功</li>
<li class="list-group-item list-group-item-danger">危险</li>
<li class="list-group-item list-group-item-warning">警告</li>
<li class="list-group-item list-group-item-info">信息</li>
带徽章
<li class="list-group-item d-flex justify-content-between align-items-center">
消息通知
<span class="badge bg-primary rounded-pill">14</span>
</li>
自定义内容
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">列表标题</h5>
<small>3 天前</small>
</div>
<p class="mb-1">这里是列表项的详细描述内容。</p>
<small>更多信息</small>
</a>
</div>
水平列表组
<ul class="list-group list-group-horizontal">
<li class="list-group-item">项 1</li>
<li class="list-group-item">项 2</li>
</ul>
<!-- 响应式: list-group-horizontal-sm/md/lg/xl -->
无边框与数字列表
<ul class="list-group list-group-flush">无边框列表</ul>
<ol class="list-group list-group-numbered">
<li class="list-group-item">数字编号项</li>
</ol>
Bootstrap5 卡片
Bootstrap 5 卡片(Card)
卡片是 Bootstrap 5 最常用的内容容器,可以组合图片、标题、正文、按钮等元素。
基础卡片
<div class="card" style="width: 18rem;">
<img src="photo.jpg" 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 class="card">
<div class="card-header">卡片头部</div>
<div class="card-body">卡片主体内容</div>
<div class="card-footer text-muted">卡片页脚</div>
</div>
列表组卡片
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">项目一</li>
<li class="list-group-item">项目二</li>
<li class="list-group-item">项目三</li>
</ul>
</div>
网格布局中的卡片
<div class="row">
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">卡片 A</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">卡片 B</div>
</div>
</div>
</div>
等高手卡片
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">等高卡片</div>
</div>
</div>
卡片导航
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link active" href="#">标签 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">标签 2</a></li>
</ul>
</div>
<div class="card-body">卡片内容</div>
</div>
Bootstrap5 下拉菜单
Bootstrap 5 下拉菜单(Dropdown)
下拉菜单用于在点击或悬停时展示一组操作选项,基于 Popper.js 实现定位。
基础下拉菜单
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
下拉菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项一</a></li>
<li><a class="dropdown-item" href="#">选项二</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">选项三</a></li>
</ul>
</div>
方向控制
<div class="dropdown dropend">向右展开</div>
<div class="dropdown dropstart">向左展开</div>
<div class="dropdown dropup">向上展开</div>
菜单标题与禁用项
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">分组标题</h6></li>
<li><a class="dropdown-item" href="#">选项 A</a></li>
<li><a class="dropdown-item disabled" href="#">禁用项</a></li>
</ul>
对齐
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
右对齐菜单
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">选项</a></li>
</ul>
</div>
按钮组内使用
<div class="btn-group">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">切换下拉</span>
</button>
<ul class="dropdown-menu">...</ul>
</div>
JS 控制
var dropdown = new bootstrap.Dropdown(document.getElementById('myDropdown'));
dropdown.show(); // 显示
dropdown.hide(); // 隐藏
dropdown.toggle(); // 切换
Bootstrap5 折叠
Bootstrap 5 折叠(Collapse)
折叠组件用于实现内容的展开与收起,常用于 FAQ、面板和手风琴。
基础折叠
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button">
展开内容
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这是默认隐藏的内容,点击按钮后展开显示。
</div>
</div>
按钮控制多个目标
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#c1 #c2">
同时展开两个区域
</button>
手风琴
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
第一项
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">第一项内容</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
第二项
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">第二项内容</div>
</div>
</div>
</div>
默认展开
<div class="collapse show">添加 show 类默认展开</div>
JS 方法
var collapseEl = document.getElementById('myCollapse');
var collapse = new bootstrap.Collapse(collapseEl, { toggle: false });
collapse.show(); // 展开
collapse.hide(); // 收起
Bootstrap5 导航
Bootstrap 5 导航(Navs)
导航组件用于构建标签页、胶囊导航、对齐导航等页面内导航结构。
基础导航
<ul class="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>
胶囊导航
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">激活项</a></li>
</ul>
对齐方式
<ul class="nav justify-content-center">居中导航</ul>
<ul class="nav justify-content-end">右对齐导航</ul>
<ul class="nav flex-column">垂直导航</ul>
标签页切换
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button">首页</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" type="button">资料</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">首页内容</div>
<div class="tab-pane fade" id="profile">资料内容</div>
</div>
下拉导航
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">下拉</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项</a></li>
</ul>
</li>
</ul>
Bootstrap5 导航栏
Bootstrap 5 导航栏(Navbar)
导航栏是网站顶部的主要导航区域,支持响应式折叠、品牌标志、搜索框等。
基础导航栏
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<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>
</ul>
</div>
</div>
</nav>
深色导航栏
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">深色品牌</a>
<div class="collapse navbar-collapse" id="navDark">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">链接</a></li>
</ul>
</div>
</div>
</nav>
固定导航栏
<nav class="navbar navbar-expand-lg bg-light fixed-top">固定在顶部</nav>
<nav class="navbar navbar-expand-lg bg-light fixed-bottom">固定在底部</nav>
<nav class="navbar navbar-expand-lg bg-light sticky-top">滚动吸顶</nav>
带表单
<nav class="navbar bg-light">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="搜索">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</div>
</nav>
响应式断点
<!-- navbar-expand-sm/md/lg/xl/xxl 控制折叠断点 -->
<nav class="navbar navbar-expand-md">
<!-- md 以下显示汉堡按钮,md 以上水平展开 -->
</nav>
Bootstrap5 轮播
Bootstrap 5 轮播(Carousel)
轮播组件用于循环展示多张图片或内容,支持自动播放、控制按钮和指示器。
基础轮播
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="第一张">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="第二张">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
带说明文字
<div class="carousel-caption d-none d-md-block">
<h5>幻灯片标题</h5>
<p>幻灯片说明文字</p>
</div>
淡入淡出过渡
<div id="carouselFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
停止自动播放与循环
<div id="carouselNoAuto" class="carousel slide" data-bs-ride="false">
<!-- data-bs-ride="false" 不自动播放;去掉 data-bs-wrap 或设为 data-bs-wrap="false" 不循环 -->
间隔控制
<div class="carousel-item" data-bs-interval="2000">2 秒切换</div>
<div class="carousel-item" data-bs-interval="5000">5 秒切换</div>
JS API
var carousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
interval: 3000, wrap: true, ride: 'carousel'
});
carousel.next(); // 下一张
carousel.prev(); // 上一张
carousel.cycle(); // 开始播放
Bootstrap5 模态框
Bootstrap 5 模态框(Modal)
模态框是覆盖在页面上的对话框,用于聚焦用户操作,支持多种尺寸和自定义内容。
基础模态框
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
模态框内容区域。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>
尺寸
<div class="modal-dialog modal-sm">小尺寸</div>
<div class="modal-dialog">默认</div>
<div class="modal-dialog modal-lg">大尺寸</div>
<div class="modal-dialog modal-xl">超大尺寸</div>
<div class="modal-dialog modal-fullscreen">全屏</div>
居中与滚动
<div class="modal-dialog modal-dialog-centered">垂直居中</div>
<div class="modal-dialog modal-dialog-scrollable">内容可滚动</div>
JS API
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
backdrop: 'static', // 点击遮罩不关闭
keyboard: false // Esc 不关闭
});
myModal.show(); // 打开
myModal.hide(); // 关闭
事件监听
var modalEl = document.getElementById('exampleModal');
modalEl.addEventListener('shown.bs.modal', function () {
console.log('模态框已显示');
});
Bootstrap5 提示框
Bootstrap 5 提示框(Tooltip)
提示框是在鼠标悬停或聚焦时显示的小气泡说明,依赖 Popper.js 定位。
基础提示框
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="top"
title="这是一个提示框">
悬停查看提示
</button>
启用(必须初始化)
var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
var tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
位置方向
data-bs-placement="top" 上方
data-bs-placement="bottom" 下方
data-bs-placement="left" 左侧
data-bs-placement="right" 右侧
HTML 内容
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip" data-bs-html="true"
title="<em>斜体</em> <b>加粗</b> 内容">
富文本提示
</button>
JS 配置
var tooltip = new bootstrap.Tooltip(element, {
placement: 'right',
trigger: 'hover', // hover / focus / click
delay: { show: 500, hide: 100 },
customClass: 'my-tooltip'
});
方法
tooltip.show(); // 显示
tooltip.hide(); // 隐藏
tooltip.toggle(); // 切换
tooltip.dispose(); // 销毁
动态内容更新
// 更新 title 后需要刷新
element.setAttribute('title', '新内容');
var tooltip = bootstrap.Tooltip.getInstance(element);
tooltip.setContent({ '.tooltip-inner': '新内容' });
Bootstrap5 弹出框
Bootstrap 5 弹出框(Popover)
弹出框是提示框的增强版,支持标题与更多内容,同样基于 Popper.js。
基础弹出框
<button type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover" data-bs-title="弹出框标题"
data-bs-content="这里是弹出框的详细内容。">
点击触发弹出框
</button>
初始化
var popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
var popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
四个方向
data-bs-placement="top" 上方
data-bs-placement="bottom" 下方
data-bs-placement="left" 左侧
data-bs-placement="right" 右侧
触发方式
data-bs-trigger="hover" 悬停触发
data-bs-trigger="focus" 聚焦触发
data-bs-trigger="click" 点击触发(默认)
JS 配置
var popover = new bootstrap.Popover(element, {
placement: 'top',
html: true,
title: '自定义标题',
content: '<p>支持 HTML 内容</p>',
trigger: 'click',
delay: { show: 300, hide: 100 }
});
方法
popover.show(); // 显示
popover.hide(); // 隐藏
popover.toggle(); // 切换
popover.dispose(); // 销毁
与提示框的区别
- Popover 支持标题(title)+ 内容(content)两部分
- Popover 默认尺寸更大,适合展示较多信息
- Popover 默认点击触发,Tooltip 默认悬停触发
- 两者定位逻辑相同,均依赖 Popper.js
Bootstrap5 消息弹窗
Bootstrap 5 消息弹窗(Toast)
Toast 是轻量级的通知组件,从屏幕角落滑出,用于展示短暂的操作反馈,可自动消失。
基础 Toast
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">通知标题</strong>
<small>刚刚</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
这是通知的具体内容。
</div>
</div>
初始化并显示
var toastEl = document.getElementById('myToast');
var toast = new bootstrap.Toast(toastEl, { delay: 3000 });
toast.show(); // 显示,3 秒后自动隐藏
定位到角落
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert">
<div class="toast-header">
<strong class="me-auto">右上角通知</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">右下角/右上角均可定位。</div>
</div>
</div>
颜色主题
<div class="toast align-items-center text-bg-success border-0">
<div class="d-flex">
<div class="toast-body">操作成功!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
</div>
触发按钮
<button class="btn btn-primary" id="showToastBtn">显示 Toast</button>
<script>
document.getElementById('showToastBtn').addEventListener('click', function () {
var toast = new bootstrap.Toast(document.getElementById('liveToast'));
toast.show();
});
</script>
配置选项
new bootstrap.Toast(el, {
animation: true, // 动画
autohide: true, // 自动隐藏
delay: 5000 // 5 秒
});
Bootstrap5 滚动监听
Bootstrap 5 滚动监听(Scrollspy)
滚动监听让导航自动高亮当前浏览的页面区块,常见于文档页和长页面的目录导航。
完整示例
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="80" tabindex="0">
<nav id="navbar-example" class="navbar bg-light px-3">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#section1">第一节</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">第二节</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">第三节</a></li>
</ul>
</nav>
<h4 id="section1">第一节内容</h4>
<p>滚动到此处时,导航会高亮"第一节"。</p>
<h4 id="section2">第二节内容</h4>
<p>滚动到此处时,导航会高亮"第二节"。</p>
<h4 id="section3">第三节内容</h4>
<p>滚动到此处时,导航会高亮"第三节"。</p>
</body>
关键点
- 在
body或滚动容器上设置data-bs-spy="scroll" data-bs-target指向导航的 id- 导航链接的
href必须对应内容区块的 id - 内容区块需要足够的滚动空间才能触发
嵌套滚动容器
<div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#list-example"
style="height: 200px; overflow-y: auto;">
<h4 id="item1">区块 1</h4>
<h4 id="item2">区块 2</h4>
</div>
JS 配置
var spy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example',
offset: 100,
rootMargin: '0px 0px -40%',
smoothScroll: true
});
spy.refresh(); // 动态添加内容后刷新
Bootstrap5 侧边栏导航
Bootstrap 5 侧边栏导航(Offcanvas)
Offcanvas 是从屏幕侧边滑出的面板,常用于移动端的侧边菜单和筛选面板。
基础侧边栏
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
打开侧边栏
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
<div class="offcanvas-header">
<h5 class="offcanvas-title">侧边栏标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>侧边栏内容区域。</p>
<ul class="nav flex-column">
<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>
四个方向
<div class="offcanvas offcanvas-start">左侧滑出(默认)</div>
<div class="offcanvas offcanvas-end">右侧滑出</div>
<div class="offcanvas offcanvas-top">顶部滑出</div>
<div class="offcanvas offcanvas-bottom">底部滑出</div>
无遮罩
<div class="offcanvas offcanvas-start" data-bs-backdrop="false">
不显示背景遮罩
</div>
JS API
var offcanvasEl = document.getElementById('offcanvasExample');
var offcanvas = new bootstrap.Offcanvas(offcanvasEl, { backdrop: true, scroll: false });
offcanvas.show(); // 打开
offcanvas.hide(); // 关闭
事件
var el = document.getElementById('offcanvasExample');
el.addEventListener('shown.bs.offcanvas', function () {
console.log('侧边栏已打开');
});
Bootstrap5 小工具
Bootstrap 5 小工具(Utilities)
工具类是 Bootstrap 5 的快捷样式,覆盖间距、排版、显示、边框、阴影等常用需求,无需编写自定义 CSS。
间距
m-1~5 外边距 p-1~5 内边距
mt-* 上 mb-* 下 ms-* 左 me-* 右
mx-* 水平 my-* 垂直 auto 自动
示例: mt-3 = margin-top: 1rem; p-2 = padding: 0.5rem;
显示
d-none 隐藏 d-block 块级
d-inline 行内 d-flex Flex
d-inline-flex d-grid 网格
d-md-none md 断点以上隐藏
Flex 布局
d-flex justify-content-center 水平居中
d-flex align-items-center 垂直居中
d-flex flex-row / flex-column 方向
flex-fill 等宽填充 flex-grow-1 扩展
边框
border 加边框 border-0 去边框
border-top 上边框 border-danger 红色边框
rounded 圆角 rounded-circle 圆形
border-2 2px 边框 border-5 5px 边框
阴影
shadow-none 无阴影 shadow-sm 小阴影
shadow 默认阴影 shadow-lg 大阴影
尺寸
w-25 / w-50 / w-75 / w-100 宽度百分比
h-25 / h-50 / h-75 / h-100 高度百分比
文字
text-truncate 单行省略
text-decoration-none 去下划线
text-break 长单词换行
text-nowrap 不换行
定位
position-relative / position-absolute
top-0 / start-0 / end-0 / bottom-0
translate-middle 水平垂直居中定位
Bootstrap5 Flex
Bootstrap 5 Flex 布局
Bootstrap 5 内置完整的 Flexbox 工具类,无需写 CSS 即可实现复杂弹性布局。
启用 Flex
<div class="d-flex">弹性容器</div>
<div class="d-inline-flex">行内弹性容器</div>
<div class="d-flex d-md-inline-flex">响应式切换</div>
方向
flex-row 水平(默认)
flex-row-reverse 水平反向
flex-column 垂直
flex-column-reverse 垂直反向
主轴对齐
justify-content-start 起始对齐
justify-content-end 末尾对齐
justify-content-center 居中
justify-content-between 两端对齐
justify-content-around 均匀分布
justify-content-evenly 完全均匀
交叉轴对齐
align-items-start 顶部对齐
align-items-center 垂直居中
align-items-end 底部对齐
align-items-stretch 拉伸填满(默认)
align-items-baseline 基线对齐
排序
<div class="order-3">第三</div>
<div class="order-1">第一</div>
<div class="order-2">第二</div>
<!-- order-first / order-last / order-0~5 -->
自动边距
<div class="d-flex">
<div>左侧</div>
<div class="ms-auto">推到最右</div>
</div>
伸缩控制
flex-fill 等宽填充
flex-grow-1 扩展占满剩余空间
flex-shrink-0 不收缩
flex-wrap 允许换行
flex-nowrap 不换行
内容换行对齐
align-content-start / center / between / stretch
Bootstrap5 表单
Bootstrap 5 表单(Forms)
Bootstrap 5 对表单控件提供了统一样式,支持布局、校验与尺寸控制。
基础输入框
<form>
<div class="mb-3">
<label for="email" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password">
</div>
</form>
尺寸
<input class="form-control form-control-lg"> 大号
<input class="form-control"> 默认
<input class="form-control form-control-sm"> 小号
禁用与只读
<input class="form-control" disabled> 禁用
<input class="form-control" readonly> 只读
<input class="form-control" value="不可编辑" aria-label="只读">
表单布局
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">名</label>
<input class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">姓</label>
<input class="form-control">
</div>
</div>
水平表单
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
帮助文本
<div id="emailHelp" class="form-text">我们不会泄露你的邮箱。</div>
选择框
<select class="form-select">
<option selected>请选择...</option>
<option value="1">选项一</option>
</select>
Bootstrap5 复选框与单选框
Bootstrap 5 复选框与单选框
复选框支持多选,单选框只能选一个,两者都支持开关样式和行内排列。
复选框
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
默认复选框
</label>
</div>
选中与禁用
<input class="form-check-input" type="checkbox" checked> 默认选中
<input class="form-check-input" type="checkbox" disabled> 禁用
<input class="form-check-input" type="checkbox" checked disabled> 选中且禁用
单选框
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadio" id="r1">
<label class="form-check-label" for="r1">选项一</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadio" id="r2">
<label class="form-check-label" for="r2">选项二</label>
</div>
行内排列
<div class="form-check form-check-inline">行内复选框 A</div>
<div class="form-check form-check-inline">行内复选框 B</div>
开关样式
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="switch1">
<label class="form-check-label" for="switch1">开关状态</label>
</div>
按钮组样式
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">按钮复选框</label>
</div>
无标签(无障碍)
<input class="form-check-input" type="checkbox" id="noLabel" aria-label="...>
Bootstrap5 选择区间
Bootstrap 5 选择区间(Range)
Range 滑块用于在数值范围内选择,适合音量、价格区间等场景。
基础滑块
<label for="customRange1" class="form-label">音量调节</label>
<input type="range" class="form-range" id="customRange1">
指定范围与步长
<label for="customRange2" class="form-label">价格区间: 0-100,步长 5</label>
<input type="range" class="form-range" id="customRange2" min="0" max="100" step="5">
默认值
<input type="range" class="form-range" min="0" max="100" value="60">
<!-- 默认滑块位置在 60 -->
禁用滑块
<input type="range" class="form-range" disabled>
实时显示数值
<input type="range" class="form-range" id="rangeValue" min="0" max="100">
<p>当前值: <span id="rangeShow">50</span></p>
<script>
const range = document.getElementById('rangeValue');
const show = document.getElementById('rangeShow');
range.value = 50;
range.addEventListener('input', function () {
show.textContent = range.value;
});
</script>
自定义样式
/* 修改滑块颜色 */
.form-range::-webkit-slider-thumb {
background-color: #0d6efd;
}
/* 修改轨道 */
.form-range::-webkit-slider-runnable-track {
height: 6px;
background-color: #dee2e6;
}
Bootstrap5 输入框组
Bootstrap 5 输入框组(Input Group)
输入框组将输入框与前后缀文字、按钮组合在一起,提升表单可用性。
前缀与后缀
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="金额">
<span class="input-group-text">.00</span>
</div>
两侧都有
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
<span class="input-group-text">元</span>
</div>
带按钮
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="搜索关键词">
<button class="btn btn-primary" type="button">搜索</button>
</div>
按钮组
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">-</button>
<input type="text" class="form-control" value="1">
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
下拉按钮
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
选项
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">动作一</a></li>
</ul>
<input type="text" class="form-control">
</div>
尺寸
<div class="input-group input-group-lg">大号输入组</div>
<div class="input-group input-group-sm">小号输入组</div>
复选框/单选框前缀
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control">
</div>
Bootstrap5 表单浮动标签
Bootstrap 5 表单浮动标签(Floating Labels)
浮动标签让占位符与标签合二为一,输入时标签上浮,界面更简洁现代。
基础浮动标签
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">邮箱地址</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">密码</label>
</div>
关键要求
placeholder属性必须有,用于触发浮动效果label的for必须与 input 的id对应- label 必须放在 input 之后
文本域
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">留言内容</label>
</div>
选择框
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="选择示例">
<option selected>打开此菜单</option>
<option value="1">选项一</option>
</select>
<label for="floatingSelect">请选择</label>
</div>
带默认值
<div class="form-floating">
<input type="text" class="form-control" id="floatVal" placeholder="示例" value="已有内容">
<label for="floatVal">默认值输入框</label>
</div>
<!-- 有 value 时标签自动上浮,无需交互 -->
禁用状态
<div class="form-floating">
<input type="text" class="form-control" id="floatDis" placeholder="示例" disabled>
<label for="floatDis">禁用输入框</label>
</div>
Bootstrap5 表单验证
Bootstrap 5 表单验证(Validation)
表单验证提供浏览器原生校验样式与自定义 JS 校验两种方式。
HTML5 原生验证
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">姓名</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">输入正确!</div>
<div class="invalid-feedback">请输入姓名。</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">提交表单</button>
</div>
</form>
<script>
(() => {
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
})();
</script>
校验状态类
<input class="form-control is-valid"> 合法样式(绿)
<input class="form-control is-invalid"> 非法样式(红)
<div class="valid-feedback">成功提示</div>
<div class="invalid-feedback">错误提示</div>
<div class="valid-tooltip">成功提示(气泡式)</div>
工具提示式校验
<div class="col-md-4">
<label for="validationTooltip01" class="form-label">用户名</label>
<input type="text" class="form-control" id="validationTooltip01" required>
<div class="valid-tooltip">用户名可用!</div>
<div class="invalid-tooltip">用户名已被占用。</div>
</div>
自定义正则校验
<input type="text" class="form-control" pattern="[0-9]{11}" placeholder="11 位手机号">
<div class="invalid-feedback">请输入 11 位数字。</div>
服务端校验回显
<!-- 服务端返回错误时动态添加类 -->
input.classList.add('is-invalid');
errorDiv.textContent = '服务端返回的错误信息';