Bootstrap 5 组件演示 - 所有组件在线预览

Alerts

基本警告

支持所有主题色的警告框

这是一个 primary 警告框

这是一个 secondary 警告框

这是一个 success 警告框

这是一个 danger 警告框

这是一个 warning 警告框

这是一个 info 警告框

这是一个 dark 警告框

这是一个 light 警告框

<div class="alert alert-primary" role="alert">这是一个 primary 警告框</div>
<div class="alert alert-secondary" role="alert">这是一个 secondary 警告框</div>
<div class="alert alert-success" role="alert">这是一个 success 警告框</div>
<div class="alert alert-danger" role="alert">这是一个 danger 警告框</div>
<div class="alert alert-warning" role="alert">这是一个 warning 警告框</div>
<div class="alert alert-info" role="alert">这是一个 info 警告框</div>
<div class="alert alert-dark" role="alert">这是一个 dark 警告框</div>
<div class="alert alert-light" role="alert">这是一个 light 警告框</div>

可关闭警告

带关闭按钮的警告框

注意！此操作不可撤销。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意！</strong>此操作不可撤销。
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

带图标警告

与 Bootstrap Icons 结合使用

success提示

danger提示

info提示

warning提示

<div class="alert alert-success d-flex align-items-center" role="alert"><i class="bi-check-circle-fill me-2 fs-4"></i><div>success提示</div></div>
<div class="alert alert-danger d-flex align-items-center" role="alert"><i class="bi-exclamation-triangle-fill me-2 fs-4"></i><div>danger提示</div></div>
<div class="alert alert-info d-flex align-items-center" role="alert"><i class="bi-info-circle-fill me-2 fs-4"></i><div>info提示</div></div>
<div class="alert alert-warning d-flex align-items-center" role="alert"><i class="bi-exclamation-circle-fill me-2 fs-4"></i><div>warning提示</div></div>

警告链接

在警告框中添加链接

更多信息请查看官方文档。

<div class="alert alert-info" role="alert">更多信息请查看 <a href="#" class="alert-link">官方文档</a>。</div>

Badges

徽章颜色

所有主题色徽章

primary secondary success danger warning info light dark

<span class="badge bg-primary">primary</span> <span class="badge bg-secondary">secondary</span> <span class="badge bg-success">success</span> <span class="badge bg-danger">danger</span> <span class="badge bg-warning">warning</span> <span class="badge bg-info">info</span> <span class="badge bg-light">light</span> <span class="badge bg-dark">dark</span>

圆角徽章

使用 rounded-pill 实现药丸形徽章

新消息 99+

<span class="badge rounded-pill bg-primary">新消息</span>
<span class="badge rounded-pill bg-danger">99+</span>

按钮徽章

按钮内的计数徽章

<button class="btn btn-primary position-relative">收件箱 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span></button>

Buttons

按钮颜色

所有主题色按钮

<button class="btn btn-primary">primary</button> <button class="btn btn-secondary">secondary</button> <button class="btn btn-success">success</button> <button class="btn btn-danger">danger</button> <button class="btn btn-warning">warning</button> <button class="btn btn-info">info</button> <button class="btn btn-dark">dark</button> <button class="btn btn-light">light</button>

描边按钮

outline 系列按钮

<button class="btn btn-outline-primary">primary</button> <button class="btn btn-outline-success">success</button> <button class="btn btn-outline-danger">danger</button> <button class="btn btn-outline-warning">warning</button> <button class="btn btn-outline-info">info</button> <button class="btn btn-outline-secondary">secondary</button>

按钮尺寸

大、默认、小三种尺寸

<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">默认</button>
<button class="btn btn-primary btn-sm">小按钮</button>

图标按钮

结合 Bootstrap Icons

<button class="btn btn-primary"><i class="bi-download me-1"></i>下载</button>
<button class="btn btn-outline-danger"><i class="bi-trash me-1"></i>删除</button>
<button class="btn btn-success"><i class="bi-check me-1"></i>保存</button>

块级按钮

宽度占满父容器

<div class="d-grid gap-2"><button class="btn btn-primary btn-lg">块级按钮</button><button class="btn btn-outline-secondary">块级次要按钮</button></div>

禁用与激活

按钮的不同状态

<button class="btn btn-primary active me-2">激活状态</button>
<button class="btn btn-primary" disabled>禁用状态</button>
<button class="btn btn-outline-primary" disabled>禁用描边</button>

纯图标按钮

只包含图标的按钮

<button class="btn btn-outline-primary me-2" title="搜索"><i class="bi-search"></i></button>
<button class="btn btn-outline-danger me-2" title="删除"><i class="bi-trash"></i></button>
<button class="btn btn-outline-success me-2" title="保存"><i class="bi-check-lg"></i></button>
<button class="btn btn-outline-secondary" title="设置"><i class="bi-gear"></i></button>

Button Group

primary 按钮组

primary 色的水平按钮组

<div class="btn-group" role="group"><button class="btn btn-primary">左</button><button class="btn btn-primary">中</button><button class="btn btn-primary">右</button></div>

success 按钮组

success 色的水平按钮组

<div class="btn-group" role="group"><button class="btn btn-success">左</button><button class="btn btn-success">中</button><button class="btn btn-success">右</button></div>

danger 按钮组

danger 色的水平按钮组

<div class="btn-group" role="group"><button class="btn btn-danger">左</button><button class="btn btn-danger">中</button><button class="btn btn-danger">右</button></div>

secondary 按钮组

secondary 色的水平按钮组

<div class="btn-group" role="group"><button class="btn btn-secondary">左</button><button class="btn btn-secondary">中</button><button class="btn btn-secondary">右</button></div>

垂直按钮组

垂直排列的按钮组

<div class="btn-group-vertical" role="group"><button class="btn btn-outline-primary">顶部</button><button class="btn btn-primary">中部</button><button class="btn btn-outline-primary">底部</button></div>

工具栏

多个按钮组组合

<div class="btn-toolbar" role="toolbar"><div class="btn-group me-2"><button class="btn btn-outline-secondary">1</button><button class="btn btn-outline-secondary">2</button><button class="btn btn-outline-secondary">3</button></div><div class="btn-group"><button class="btn btn-outline-secondary">4</button><button class="btn btn-outline-secondary">5</button></div></div>

Cards

基本卡片

最常用的卡片组件

卡片标题

这是一张基本卡片，包含标题和正文内容。

前往

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title fw-bold">卡片标题</h5><p class="card-text text-secondary">这是一张基本卡片，包含标题和正文内容。</p><a href="#" class="btn btn-primary">前往</a></div></div>

卡片组合

含图片、头部和底部

卡片标题

这是一张包含图片的卡片。

了解更多

3 分钟前更新

<div class="card" style="width: 18rem;"><img src="/placeholder/286x180?seed=card" class="card-img-top" alt="card"><div class="card-body"><h5 class="card-title fw-bold">卡片标题</h5><p class="card-text text-secondary">这是一张包含图片的卡片。</p><a href="#" class="btn btn-primary">了解更多</a></div><div class="card-footer text-secondary small">3 分钟前更新</div></div>

卡片组

使用 card-group 并排显示

卡片一

内容区域。

卡片二

内容区域。

卡片三

内容区域。

<div class="card-group"><div class="card"><div class="card-body"><h5 class="card-title fw-bold">卡片一</h5><p class="card-text text-secondary">内容区域。</p></div></div><div class="card"><div class="card-body"><h5 class="card-title fw-bold">卡片二</h5><p class="card-text text-secondary">内容区域。</p></div></div><div class="card"><div class="card-body"><h5 class="card-title fw-bold">卡片三</h5><p class="card-text text-secondary">内容区域。</p></div></div></div>

横向卡片

使用网格布局水平排列

横向卡片

图片在左，文字在右。

<div class="card mb-3" style="max-width: 540px;"><div class="row g-0"><div class="col-md-4"><img src="/placeholder/200x200?seed=hcard" class="img-fluid rounded-start h-100" style="object-fit:cover;" alt="横向卡片"></div><div class="col-md-8"><div class="card-body"><h5 class="card-title fw-bold">横向卡片</h5><p class="card-text text-secondary">图片在左，文字在右。</p></div></div></div></div>

卡片背景色

带主题背景色的卡片

primary

内容区域

success

内容区域

danger

内容区域

warning

内容区域

info

内容区域

<div class="card text-white bg-primary mb-2"><div class="card-body"><h5 class="card-title">primary</h5><p class="card-text">内容区域</p></div></div>
<div class="card text-white bg-success mb-2"><div class="card-body"><h5 class="card-title">success</h5><p class="card-text">内容区域</p></div></div>
<div class="card text-white bg-danger mb-2"><div class="card-body"><h5 class="card-title">danger</h5><p class="card-text">内容区域</p></div></div>
<div class="card bg-warning mb-2"><div class="card-body"><h5 class="card-title">warning</h5><p class="card-text">内容区域</p></div></div>
<div class="card bg-info mb-2"><div class="card-body"><h5 class="card-title">info</h5><p class="card-text">内容区域</p></div></div>

卡片边框色

带主题边框色的卡片

primary

内容

success

内容

danger

内容

warning

内容

info

内容

<div class="card border-primary mb-2"><div class="card-body"><h5 class="card-title">primary</h5><p class="card-text">内容</p></div></div>
<div class="card border-success mb-2"><div class="card-body"><h5 class="card-title">success</h5><p class="card-text">内容</p></div></div>
<div class="card border-danger mb-2"><div class="card-body"><h5 class="card-title">danger</h5><p class="card-text">内容</p></div></div>
<div class="card border-warning mb-2"><div class="card-body"><h5 class="card-title">warning</h5><p class="card-text">内容</p></div></div>
<div class="card border-info mb-2"><div class="card-body"><h5 class="card-title">info</h5><p class="card-text">内容</p></div></div>

卡片文本对齐

左、中、右三种对齐方式

左对齐（默认）

文本左对齐显示。

居中对齐

文本居中对齐显示。

右对齐

文本右对齐显示。

<div class="card mb-2"><div class="card-body"><h5 class="card-title">左对齐（默认）</h5><p class="card-text">文本左对齐显示。</p></div></div>
<div class="card mb-2"><div class="card-body text-center"><h5 class="card-title">居中对齐</h5><p class="card-text">文本居中对齐显示。</p></div></div>
<div class="card"><div class="card-body text-end"><h5 class="card-title">右对齐</h5><p class="card-text">文本右对齐显示。</p></div></div>

Accordion

手风琴

经典折叠面板

这是第一项的内容。

这是第二项的内容。

<div class="accordion" id="demoAccordion">
  <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="#demoAccordion"><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="#demoAccordion"><div class="accordion-body">这是第二项的内容。</div></div></div>
</div>

始终展开

always-open 模式（移除 data-bs-parent）

多项可以同时展开。

不会影响其他项的展开状态。

<div class="accordion" id="accordionAlwaysOpen">
  <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#always1">可同时展开</button></h2><div id="always1" class="accordion-collapse collapse show"><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="#always2">第二项</button></h2><div id="always2" class="accordion-collapse collapse"><div class="accordion-body">不会影响其他项的展开状态。</div></div></div>
</div>

折叠切换

使用按钮控制单个折叠元素

展开/收起

这是可折叠的内容区域。

<p><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseDemo" role="button">展开/收起</a></p>
<div class="collapse" id="collapseDemo"><div class="card card-body">这是可折叠的内容区域。</div></div>

折叠列表

多个独立的折叠项

切换项一

项一的内容

项二的内容

<p><a class="btn btn-outline-primary me-2" data-bs-toggle="collapse" href="#multiCollapse1">切换项一</a><button class="btn btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#multiCollapse2">切换项二</button></p>
<div class="row"><div class="col"><div class="collapse" id="multiCollapse1"><div class="card card-body">项一的内容</div></div></div><div class="col"><div class="collapse" id="multiCollapse2"><div class="card card-body">项二的内容</div></div></div></div>

Forms

表单控制

输入框、选择框和文本域

邮箱

选择

备注

<div class="mb-3"><label class="form-label">邮箱</label><input type="email" class="form-control" placeholder="name@example.com"></div>
<div class="mb-3"><label class="form-label">选择</label><select class="form-select"><option selected>打开此菜单</option><option>选项一</option><option>选项二</option></select></div>
<div class="mb-3"><label class="form-label">备注</label><textarea class="form-control" rows="3"></textarea></div>

输入框尺寸

大、默认、小三种尺寸

<input class="form-control form-control-lg mb-2" placeholder="大号输入框">
<input class="form-control mb-2" placeholder="默认输入框">
<input class="form-control form-control-sm" placeholder="小号输入框">

输入框禁用/只读

不同状态的输入框

<input class="form-control mb-2" placeholder="只读" readonly>
<input class="form-control mb-2" placeholder="禁用" disabled>
<input class="form-control mb-2" placeholder="普通输入框">

复选框与单选框

开关、复选框和内联选项

开关

复选框

选项A

选项B

<div class="form-check form-switch mb-2"><input class="form-check-input" type="checkbox" id="switch1"><label class="form-check-label" for="switch1">开关</label></div>
<div class="form-check mb-2"><input class="form-check-input" type="checkbox" id="check1"><label class="form-check-label" for="check1">复选框</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="radioGroup" id="r1"><label class="form-check-label" for="r1">选项A</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="radioGroup" id="r2"><label class="form-check-label" for="r2">选项B</label></div>

复选框内联

水平排列的复选框

HTML

CSS

JavaScript

<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline1"><label class="form-check-label" for="inline1">HTML</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline2"><label class="form-check-label" for="inline2">CSS</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline3"><label class="form-check-label" for="inline3">JavaScript</label></div>

范围与进度

滑块选择器

音量: 50

<label class="form-label">音量: <span id="rangeVal">50</span></label>
<input type="range" class="form-range" min="0" max="100" value="50" oninput="document.getElementById('rangeVal').textContent=this.value">

输入组

带前后缀的输入框

@

¥.00

<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"><button class="btn btn-primary">搜索</button></div>
<div class="input-group"><span class="input-group-text">¥</span><input type="text" class="form-control"><span class="input-group-text">.00</span></div>

浮动标签

Material Design 风格标签

邮箱地址

密码

<div class="form-floating mb-3"><input class="form-control" id="floatingInput" placeholder="name@example.com"><label for="floatingInput">邮箱地址</label></div>
<div class="form-floating"><input class="form-control" id="floatingPwd" type="password" placeholder="密码"><label for="floatingPwd">密码</label></div>

表单校验

有效/无效反馈样式

输入正确！

请检查输入。

<div class="mb-3"><input class="form-control is-valid" placeholder="有效输入"><div class="valid-feedback">输入正确！</div></div>
<div class="mb-3"><input class="form-control is-invalid" placeholder="无效输入"><div class="invalid-feedback">请检查输入。</div></div>

文件上传

文件选择输入框

上传文件支持 PNG、JPG、PDF 格式

<div class="mb-3"><label class="form-label">上传文件</label><input class="form-control" type="file"><small class="text-secondary">支持 PNG、JPG、PDF 格式</small></div>

多选列表

可多选的选择框

<select class="form-select" multiple><option>JavaScript</option><option>TypeScript</option><option>Python</option><option>Go</option><option>Rust</option></select>

浮动选择框

带浮动标签的选择框

下拉选择

<div class="form-floating"><select class="form-select"><option selected>请选择</option><option>选项一</option><option>选项二</option></select><label>下拉选择</label></div>

颜色选择

原生颜色选择器

选择颜色

<label class="form-label">选择颜色</label><input type="color" class="form-control form-control-color" value="#7952b3">

内联表单

水平排列的表单控件

<form class="row g-3"><div class="col-auto"><input class="form-control" placeholder="搜索..."></div><div class="col-auto"><button class="btn btn-primary">搜索</button></div></form>

List Group

基本列表组

简单列表

项目一
项目二（激活）
项目三（禁用）

<ul class="list-group"><li class="list-group-item">项目一</li><li class="list-group-item active">项目二（激活）</li><li class="list-group-item disabled">项目三（禁用）</li></ul>

链接列表组

可点击的列表项

首页关于联系

<div class="list-group"><a href="#" class="list-group-item list-group-item-action active">首页</a><a href="#" class="list-group-item list-group-item-action">关于</a><a href="#" class="list-group-item list-group-item-action">联系</a></div>

带徽章列表

列表项右侧徽章

收件箱12
垃圾邮件3

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">收件箱<span class="badge bg-primary rounded-pill">12</span></li><li class="list-group-item d-flex justify-content-between align-items-center">垃圾邮件<span class="badge bg-danger rounded-pill">3</span></li></ul>

彩色列表项

带主题色的列表项

<button class="list-group-item list-group-item-action list-group-item-primary">primary提示</button>
<button class="list-group-item list-group-item-action list-group-item-success">success提示</button>
<button class="list-group-item list-group-item-action list-group-item-danger">danger提示</button>
<button class="list-group-item list-group-item-action list-group-item-warning">warning提示</button>

列表组编号

带编号的列表项

需求分析
收集项目需求
进行中
设计原型
UI/UX 设计
待开始

<ol class="list-group list-group-numbered"><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">需求分析</div>收集项目需求</div><span class="badge bg-primary rounded-pill">进行中</span></li><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">设计原型</div>UI/UX 设计</div><span class="badge bg-secondary rounded-pill">待开始</span></li></ol>

Modal

模态框触发

通过按钮打开模态框

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">打开模态框</button>
<div class="modal fade" id="demoModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title fw-bold">确认</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p>确定要执行此操作吗？</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button class="btn btn-primary">确定</button></div></div></div></div>

模态框尺寸

不同尺寸的模态框

<button class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#smModal">小号</button><button class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#lgModal">大号</button>
<div class="modal fade" id="smModal" tabindex="-1"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-body">小型模态框</div></div></div></div>
<div class="modal fade" id="lgModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body">大型模态框</div></div></div></div>

全屏模态框

全屏显示的模态框

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullModal">全屏模态框</button>
<div class="modal fade" id="fullModal" tabindex="-1"><div class="modal-dialog modal-fullscreen"><div class="modal-content"><div class="modal-header"><h5 class="modal-title fw-bold">全屏模态框</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p class="text-secondary">全屏模态框内容区域，适合展示大量内容或表单。</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button></div></div></div></div>

滚动模态框

长内容可滚动的模态框

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollModal">滚动模态框</button>
<div class="modal fade" id="scrollModal" tabindex="-1"><div class="modal-dialog modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title fw-bold">滚动内容</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p>内容 1</p><p>内容 2</p><p>内容 3</p><p>内容 4</p><p>内容 5</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button></div></div></div></div>

居中模态框

垂直居中的模态框

<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#centerModal">居中模态框</button>
<div class="modal fade" id="centerModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title fw-bold">居中显示</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p>此模态框在屏幕上垂直居中。</p></div></div></div></div>

Navs & Tabs

标签页

使用 nav-tabs

<ul class="nav nav-tabs mb-3"><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>

胶囊导航

使用 nav-pills

<ul class="nav nav-pills"><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 nav-fill"><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><li class="nav-item"><a class="nav-link" href="#">联系</a></li></ul>

Justify 对齐

等宽对齐的导航

<ul class="nav nav-pills nav-justified mb-3"><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><li class="nav-item"><a class="nav-link" href="#">关于</a></li></ul>

下划线导航

下划线样式的导航

<ul class="nav nav-underline"><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>

选项卡内容

结合 Tab pane 的内容切换

Tab 1 的内容

Tab 2 的内容

<ul class="nav nav-tabs mb-3" id="tabDemo"><li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Tab 1</button></li><li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">Tab 2</button></li></ul>
<div class="tab-content"><div class="tab-pane fade show active" id="tab1">Tab 1 的内容</div><div class="tab-pane fade" id="tab2">Tab 2 的内容</div></div>

Pagination

基本分页

标准分页组件

<nav><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">«</a></li><li class="page-item active"><a class="page-link" href="#">1</a></li><li class="page-item"><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>

分页尺寸

大、中、小三档

<nav><ul class="pagination pagination-lg"><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></ul></nav>
<nav><ul class="pagination pagination-sm"><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></ul></nav>

分页对齐

居中与两端对齐

<nav class="mb-2"><ul class="pagination justify-content-center"><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></ul></nav>
<nav><ul class="pagination justify-content-end"><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></ul></nav>

Breadcrumb

基本面包屑

页面导航路径

<nav><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">文档</a></li><li class="breadcrumb-item active">当前页面</li></ol></nav>

带图标面包屑

结合图标的面包屑导航

<nav><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#"><i class="bi-house me-1"></i>首页</a></li><li class="breadcrumb-item"><a href="#">分类</a></li><li class="breadcrumb-item active">详情</li></ol></nav>

多级面包屑

多层级的面包屑导航

<nav><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">产品</a></li><li class="breadcrumb-item"><a href="#">分类</a></li><li class="breadcrumb-item active">当前商品</li></ol></nav>

Progress

基本进度条

基础进度条

25%

50%

75%

<div class="progress mb-2"><div class="progress-bar" style="width:25%">25%</div></div>
<div class="progress mb-2"><div class="progress-bar bg-success" style="width:50%">50%</div></div>
<div class="progress mb-2"><div class="progress-bar bg-danger" style="width:75%">75%</div></div>

进度条颜色

不同主题色

45%

60%

35%

70%

<div class="progress mb-2"><div class="progress-bar bg-success" style="width:45%">45%</div></div>
<div class="progress mb-2"><div class="progress-bar bg-info" style="width:60%">60%</div></div>
<div class="progress mb-2"><div class="progress-bar bg-warning" style="width:35%">35%</div></div>
<div class="progress mb-2"><div class="progress-bar bg-danger" style="width:70%">70%</div></div>

条纹动画

带动画的条纹进度条

55%

加载中 80%

<div class="progress mb-3"><div class="progress-bar progress-bar-striped" style="width:55%">55%</div></div>
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width:80%">加载中 80%</div></div>

多层进度

多颜色分段进度

40%

25%

15%

<div class="progress"><div class="progress-bar bg-success" style="width:40%">40%</div><div class="progress-bar bg-warning" style="width:25%">25%</div><div class="progress-bar bg-danger" style="width:15%">15%</div></div>

不同高度

自定义进度条高度

50%

<div class="progress mb-2" style="height:5px"><div class="progress-bar bg-success" style="width:40%"></div></div>
<div class="progress mb-2" style="height:10px"><div class="progress-bar bg-warning" style="width:60%"></div></div>
<div class="progress" style="height:20px"><div class="progress-bar bg-danger" style="width:50%">50%</div></div>

无标签进度条

不显示百分比文字

<div class="progress"><div class="progress-bar bg-primary" style="width:65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div></div>

Spinners

主题色旋转器

所有主题色的边框旋转动画

<div class="spinner-border text-primary me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-border text-secondary me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-border text-success me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-border text-danger me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-border text-warning me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-border text-info me-2" role="status"><span class="visually-hidden">加载中...</span></div>

增长型旋转器

增长型加载动画

<div class="spinner-grow text-primary me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-grow text-secondary me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-grow text-success me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-grow text-danger me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-grow text-warning me-2" role="status"><span class="visually-hidden">加载中...</span></div><div class="spinner-grow text-info me-2" role="status"><span class="visually-hidden">加载中...</span></div>

旋转器尺寸

大小对比

<div class="d-flex align-items-center gap-3"><div class="spinner-border spinner-border-sm text-primary" role="status"></div><div class="spinner-border text-primary" role="status"></div><div style="width:3rem;height:3rem"><div class="spinner-border text-primary" style="width:3rem;height:3rem" role="status"></div></div></div>

按钮加载

按钮中的加载动画

<button class="btn btn-primary me-2" disabled><span class="spinner-border spinner-border-sm me-2"></span>提交中...</button>
<button class="btn btn-success" disabled><span class="spinner-grow spinner-grow-sm me-2"></span>保存中...</button>

居中旋转器

Flexbox 居中显示

<div class="d-flex justify-content-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div></div>

Tooltips

提示工具

四个方向的工具提示

<button class="btn btn-outline-secondary me-2" data-bs-toggle="tooltip" title="上侧提示">上</button>
<button class="btn btn-outline-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">右</button>
<button class="btn btn-outline-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="下侧提示">下</button>
<button class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示">左</button>

Toasts

通知提示

可关闭的 toast 通知

这是一条通知消息。

<div class="toast show" role="alert"><div class="toast-header"><i class="bi-bell me-2 text-primary"></i><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>

堆叠通知

多个 Toast 堆叠

文件已成功保存。

请注意检查输入内容。

<div class="toast show mb-2" role="alert"><div class="toast-header"><i class="bi-check-circle me-2 text-success"></i><strong class="me-auto">保存成功</strong><small>1 分钟前</small><button type="button" class="btn-close" data-bs-dismiss="toast"></button></div><div class="toast-body">文件已成功保存。</div></div>
<div class="toast show" role="alert"><div class="toast-header"><i class="bi-exclamation-triangle me-2 text-warning"></i><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>

Dropdowns

基本下拉菜单

基本的下拉菜单

<div class="dropdown d-inline-block"><button class="btn btn-primary dropdown-toggle" 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 text-danger" href="#">删除</a></li></ul></div>

分割下拉菜单

带分割线的下拉按钮

<div class="btn-group"><button class="btn btn-success">保存</button><button class="btn btn-success dropdown-toggle dropdown-toggle-split" 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></ul></div>

带图标下拉

菜单项带图标的下拉菜单

<div class="dropdown"><button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="bi-gear me-1"></i>设置</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#"><i class="bi-person me-2"></i>个人资料</a></li><li><a class="dropdown-item" href="#"><i class="bi-bell me-2"></i>通知设置</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item text-danger" href="#"><i class="bi-box-arrow-right me-2"></i>退出登录</a></li></ul></div>

下拉方向

向上、向右展开

<div class="d-flex gap-3"><div class="dropup"><button class="btn btn-outline-primary dropdown-toggle" 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></ul></div>
<div class="dropend"><button class="btn btn-outline-primary dropdown-toggle" 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></ul></div></div>

Tables

基本表格

带条纹和悬停效果的表格

#	姓名	角色	状态
1	张三	管理员	在线
2	李四	编辑	离线
3	王五	用户	禁用

<table class="table table-striped table-hover"><thead class="table-dark"><tr><th>#</th><th>姓名</th><th>角色</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>管理员</td><td><span class="badge bg-success">在线</span></td></tr><tr><td>2</td><td>李四</td><td>编辑</td><td><span class="badge bg-warning text-dark">离线</span></td></tr><tr><td>3</td><td>王五</td><td>用户</td><td><span class="badge bg-secondary">禁用</span></td></tr></tbody></table>

表格颜色

行和表格主题色

#	类名	说明
1	table-primary	主要提示
2	table-success	成功提示
3	table-danger	危险提示

<table class="table"><thead><tr><th>#</th><th>类名</th><th>说明</th></tr></thead><tbody><tr class="table-primary"><td>1</td><td>table-primary</td><td>主要提示</td></tr><tr class="table-success"><td>2</td><td>table-success</td><td>成功提示</td></tr><tr class="table-danger"><td>3</td><td>table-danger</td><td>危险提示</td></tr></tbody></table>

响应式表格

小屏可横向滚动

#	标题	作者	日期	操作
1	Bootstrap 入门	Admin	2026-07-01	编辑 \| 删除

<div class="table-responsive"><table class="table table-bordered"><thead class="table-light"><tr><th>#</th><th>标题</th><th>作者</th><th>日期</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>Bootstrap 入门</td><td>Admin</td><td>2026-07-01</td><td><a href="#">编辑</a> | <a href="#" class="text-danger">删除</a></td></tr></tbody></table></div>

表格边框

带边框的表格

#	名称	价格
1	Bootstrap 5	免费
2	Bootstrap Icons	免费

<table class="table table-bordered"><thead><tr><th>#</th><th>名称</th><th>价格</th></tr></thead><tbody><tr><td>1</td><td>Bootstrap 5</td><td>免费</td></tr><tr><td>2</td><td>Bootstrap Icons</td><td>免费</td></tr></tbody></table>

Carousel

轮播图

带控制按钮的图片轮播

<div id="carouselDemo" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="/placeholder/600x300?seed=slide1" class="d-block w-100" alt="slide1"></div><div class="carousel-item"><img src="/placeholder/600x300?seed=slide2" class="d-block w-100" alt="slide2"></div></div><button class="carousel-control-prev" data-bs-target="#carouselDemo" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" data-bs-target="#carouselDemo" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button></div>

轮播指示器

带底部指示点的轮播

<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel"><div class="carousel-indicators"><button data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active"></button><button data-bs-target="#carouselIndicators" data-bs-slide-to="1"></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="/placeholder/600x300?seed=ind1" class="d-block w-100" alt="ind1"></div><div class="carousel-item"><img src="/placeholder/600x300?seed=ind2" class="d-block w-100" alt="ind2"></div></div><button class="carousel-control-prev" data-bs-target="#carouselIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" data-bs-target="#carouselIndicators" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button></div>

Navbar

深色导航栏

深色主题导航栏

<nav class="navbar navbar-expand navbar-dark bg-dark rounded-3"><div class="container-fluid"><a class="navbar-brand fw-bold" href="#"><i class="bi-bootstrap-fill me-2"></i>Brand</a><div class="collapse navbar-collapse"><ul class="navbar-nav me-auto"><li class="nav-item"><a class="nav-link active" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li><li class="nav-item"><a class="nav-link" href="#">联系</a></li></ul></div></div></nav>

浅色导航栏

浅色主题导航栏

<nav class="navbar navbar-expand navbar-light bg-light rounded-3"><div class="container-fluid"><a class="navbar-brand fw-bold" href="#"><i class="bi-bootstrap-fill me-2 text-primary"></i>Brand</a><ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link active" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li><li class="nav-item"><a class="nav-link" href="#">联系</a></li></ul></div></nav>

带搜索导航栏

集成搜索框的导航栏

<nav class="navbar navbar-dark bg-dark rounded-3"><div class="container-fluid"><a class="navbar-brand fw-bold" href="#">Brand</a><form class="d-flex ms-auto"><input class="form-control me-2" type="search" placeholder="搜索..."><button class="btn btn-outline-light" type="submit">搜索</button></form></div></nav>

固定顶部导航栏

固定在页面顶部

<nav class="navbar navbar-dark bg-primary rounded-3"><div class="container-fluid"><a class="navbar-brand fw-bold" href="#"><i class="bi-bootstrap-fill me-2"></i>顶部导航</a><span class="navbar-text text-white-50">position: sticky top</span></div></nav>

Offcanvas

左右抽屉

从左右两侧滑出的面板

右侧滑出内容区域。

左侧滑出内容区域。

<button class="btn btn-primary me-2" data-bs-toggle="offcanvas" data-bs-target="#rightCanvas">右侧</button><button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#leftCanvas">左侧</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="rightCanvas"><div class="offcanvas-header"><h5 class="offcanvas-title fw-bold">右侧面板</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div><div class="offcanvas-body"><p>右侧滑出内容区域。</p></div></div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="leftCanvas"><div class="offcanvas-header"><h5 class="offcanvas-title fw-bold">左侧面板</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div><div class="offcanvas-body"><p>左侧滑出内容区域。</p></div></div>

顶部底部抽屉

从顶部或底部滑出

顶部滑出内容。

底部滑出内容。

<button class="btn btn-primary me-2" data-bs-toggle="offcanvas" data-bs-target="#topCanvas">顶部</button><button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#bottomCanvas">底部</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="topCanvas" style="height:200px"><div class="offcanvas-header"><h5 class="offcanvas-title fw-bold">顶部面板</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div><div class="offcanvas-body">顶部滑出内容。</div></div>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomCanvas" style="height:200px"><div class="offcanvas-header"><h5 class="offcanvas-title fw-bold">底部面板</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div><div class="offcanvas-body">底部滑出内容。</div></div>

Popovers

弹出框

四个方向的弹出提示

<button class="btn btn-lg btn-danger me-2" data-bs-toggle="popover" title="标题" data-bs-content="这是弹出框的内容。">点击我</button>
<button class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-trigger="hover" title="悬停提示" data-bs-content="鼠标悬停时显示。">悬停触发</button>

弹出框方向

不同方向的弹出框

<button class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="top" title="上" data-bs-content="上侧弹出">上</button>
<button class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="right" title="右" data-bs-content="右侧弹出">右</button>
<button class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="bottom" title="下" data-bs-content="下侧弹出">下</button>
<button class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-placement="left" title="左" data-bs-content="左侧弹出">左</button>

Close Button

关闭按钮

通用的关闭按钮

<div class="d-flex gap-3 align-items-center"><button type="button" class="btn-close" aria-label="关闭"></button><button type="button" class="btn-close" disabled aria-label="禁用关闭"></button><div class="bg-dark p-2 rounded"><button type="button" class="btn-close btn-close-white" aria-label="白色关闭"></button></div></div>

Placeholder

加载占位符

内容加载时的占位动画

<div class="card" style="width: 18rem;"><img src="/placeholder/286x180?seed=phcard" class="card-img-top" alt="placeholder"><div class="card-body"><h5 class="card-title placeholder-glow"><span class="placeholder col-6"></span></h5><p class="card-text placeholder-glow"><span class="placeholder col-10"></span> <span class="placeholder col-8"></span></p><a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a></div></div>

占位符尺寸

不同宽度的占位符

<p class="placeholder-glow"><span class="placeholder col-12"></span><br><span class="placeholder col-8"></span><br><span class="placeholder col-6"></span><br><span class="placeholder col-4"></span></p>

波浪动画

使用 placeholder-wave 动画

<p class="placeholder-glow"><span class="placeholder col-12 placeholder-wave"></span></p><p class="placeholder-wave"><span class="placeholder col-8"></span> <span class="placeholder col-6"></span> <span class="placeholder col-10"></span></p>

Ratio

16:9 比例

标准的宽屏视频比例

16:9 比例容器

<div class="ratio ratio-16x9"><div class="bg-light d-flex align-items-center justify-content-center rounded-3"><p class="text-secondary mb-0">16:9 比例容器</p></div></div>

4:3 比例

传统屏幕比例

4:3 比例容器

<div class="ratio ratio-4x3"><div class="bg-light d-flex align-items-center justify-content-center rounded-3"><p class="text-secondary mb-0">4:3 比例容器</p></div></div>

1:1 比例

正方形比例

1:1 正方形

<div class="ratio ratio-1x1"><div class="bg-light d-flex align-items-center justify-content-center rounded-3"><p class="text-secondary mb-0">1:1 正方形</p></div></div>

21:9 比例

超宽屏比例

21:9 超宽比例

<div class="ratio ratio-21x9"><div class="bg-light d-flex align-items-center justify-content-center rounded-3"><p class="text-secondary mb-0">21:9 超宽比例</p></div></div>

Figures

图片插图

带标题的图片

<figure class="figure"><img src="/placeholder/300x200?seed=figure1" class="figure-img img-fluid rounded" alt="示例图片"><figcaption class="figure-caption">这是一张带标题的示例图片。</figcaption></figure>

右对齐插图

右对齐的图片插图

这是一段文字，插图显示在右侧，文字环绕显示。

<figure class="figure float-end ms-3"><img src="/placeholder/200x150?seed=figure2" class="figure-img img-fluid rounded" alt="示例图片"><figcaption class="figure-caption text-end">右对齐的图片</figcaption></figure><p class="text-secondary">这是一段文字，插图显示在右侧，文字环绕显示。</p><div class="clearfix"></div>