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">&laquo;</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 = '服务端返回的错误信息';
第 1 / 36 节