列表组（补充）、媒体对象、模态、导航、导航栏、分页、弹出框、进度条、微调器、Toast、工具提示

Posted on 9 月 28, 2026 by

一、列表组（补充）

水平列表组

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>Code language: HTML, XML (xml)

响应式断点：.list-group-horizontal-sm / md / lg / xl。水平列表组不能与 list-group-flush 组合。

等宽：给每个 <li> 加 .flex-fill。

情境颜色

<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-secondary">Secondary</li>
<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-danger">Danger</li>
<li class="list-group-item list-group-item-warning">Warning</li>
<li class="list-group-item list-group-item-info">Info</li>
<li class="list-group-item list-group-item-light">Light</li>
<li class="list-group-item list-group-item-dark">Dark</li>Code language: HTML, XML (xml)

带徽章（未读计数）

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
</ul>Code language: HTML, XML (xml)

自定义内容（链接列表组）

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>Code language: HTML, XML (xml)

二、媒体对象（Media Object）

用于构建评论、推文等重复组件。

基础

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero...
  </div>
</div>Code language: JavaScript (javascript)

嵌套

在 .media-body 内再放一个 .media：

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Parent heading</h5>
    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Nested heading</h5>
        Nested content...
      </div>
    </div>
  </div>
</div>Code language: JavaScript (javascript)

对齐方式

<img src="..." class="align-self-start mr-3">   <!-- 顶部 -->
<img src="..." class="align-self-center mr-3"> <!-- 居中 -->
<img src="..." class="align-self-end mr-3">    <!-- 底部 -->Code language: HTML, XML (xml)

顺序反转

把文字放左边、图片放右边：

<div class="media">
  <div class="media-body">
    <h5 class="mt-0">Text on left</h5>
    Content here...
  </div>
  <img src="..." class="ml-3" alt="...">
</div>Code language: JavaScript (javascript)

媒体列表

<ul class="list-unstyled">
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Content...
    </div>
  </li>
</ul>Code language: JavaScript (javascript)

三、模态（Modal）

基本结构

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>Code language: HTML, XML (xml)

触发按钮：

<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch modal</button>Code language: HTML, XML (xml)

滚动长内容

模态自动独立于页面滚动。也可使用 .modal-dialog-scrollable 让仅 body 区域滚动：

<div class="modal-dialog modal-dialog-scrollable">...</div>Code language: HTML, XML (xml)

垂直居中

<div class="modal-dialog modal-dialog-centered">...</div>Code language: HTML, XML (xml)

模态内嵌工具提示/弹出框

工具提示和弹出框可放在模态内，关闭模态时自动关闭。

模态内使用网格

在 .modal-body 内嵌套 .container-fluid，然后使用标准网格类。

JavaScript 方法

方法说明
$('#myModal').modal('toggle')切换显示/隐藏
$('#myModal').modal('show')显示
$('#myModal').modal('hide')隐藏
$('#myModal').modal('handleUpdate')高度变化时重新定位
$('#myModal').modal('dispose')销毁

四、导航（Nav）

基础导航

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1">Disabled</a></li>
</ul>Code language: HTML, XML (xml)

也可用 <nav> 标签直接包裹 <a>。

水平对齐

<ul class="nav justify-content-center">...</ul>  <!-- 居中 -->
<ul class="nav justify-content-end">...</ul>     <!-- 右对齐 -->Code language: HTML, XML (xml)

垂直堆叠

<ul class="nav flex-column">...</ul>Code language: HTML, XML (xml)

响应式：.flex-sm-column、.flex-md-column 等。

标签页（Tabs）

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>Code language: HTML, XML (xml)

胶囊导航（Pills）

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
</ul>Code language: HTML, XML (xml)

带下拉菜单的标签

<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>Code language: HTML, XML (xml)

切换内容（Tab Panes）

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home content</div>
</div>Code language: HTML, XML (xml)

垂直标签

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" role="tablist">
      <a class="nav-link active" data-toggle="pill" href="#v-pills-home">Home</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="v-pills-home">Content</div>
    </div>
  </div>
</div>Code language: HTML, XML (xml)

五、导航栏（Navbar）

基本结构

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>Code language: JavaScript (javascript)

品牌图片

<a class="navbar-brand" href="#">
  <img src="..." width="30" height="30" alt="">
</a>Code language: JavaScript (javascript)

配色方案

类效果
.navbar-light浅色背景
.navbar-dark深色背景
.bg-light / .bg-dark / .bg-primary背景色

放置方式

类效果
.fixed-top固定在顶部
.fixed-bottom固定在底部
.sticky-top滚动到顶部后粘住

六、分页（Pagination）

基本分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a></li>
  </ul>
</nav>Code language: HTML, XML (xml)

尺寸

.pagination-lg / .pagination-sm

对齐

<ul class="pagination justify-content-center">...</ul>  <!-- 居中 -->
<ul class="pagination justify-content-end">...</ul>     <!-- 右对齐 -->Code language: HTML, XML (xml)

七、弹出框（Popover）

基本用法

<button class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="Content here">
  Click to toggle popover
</button>Code language: HTML, XML (xml)

初始化：$('[data-toggle="popover"]').popover()

四个方向

<button class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Top">Top</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="right" data-content="Right">Right</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-content="Bottom">Bottom</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="Left">Left</button>Code language: HTML, XML (xml)

八、进度条（Progress）

基本进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>Code language: HTML, XML (xml)

带标签

<div class="progress">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>Code language: HTML, XML (xml)

高度

在 .progress 上设 height 即可。

背景色

.bg-success / .bg-info / .bg-warning / .bg-danger

堆叠

<div class="progress">
  <div class="progress-bar" style="width: 15%"></div>
  <div class="progress-bar bg-success" style="width: 30%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>Code language: HTML, XML (xml)

条纹

添加 .progress-bar-striped：

<div class="progress-bar progress-bar-striped bg-success" style="width: 50%"></div>Code language: HTML, XML (xml)

九、微调器（Spinner）

边框微调器

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>Code language: HTML, XML (xml)

颜色

.text-primary / .text-success / .text-danger 等。

增长微调器

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>Code language: HTML, XML (xml)

十、Toast（轻量通知）

基本结构

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button class="ml-2 mb-1 close" data-dismiss="toast"><span>&times;</span></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>Code language: HTML, XML (xml)

初始化

$('.toast').toast('show');Code language: JavaScript (javascript)

选项

选项说明
animation是否动画
autohide是否自动隐藏
delay自动隐藏延迟（毫秒）

注意事项

  • 建议包裹在 aria-live 区域
  • 重要消息用 role="alert" aria-live="assertive"
  • 一般消息用 role="status" aria-live="polite"
  • autohide: false 时必须提供关闭按钮

十一、工具提示（Tooltip）

基本用法

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>Code language: HTML, XML (xml)

初始化：$('[data-toggle="tooltip"]').tooltip()

四个方向

data-placement="top" / "right" / "bottom" / "left"

注意事项

  • 只应加在可聚焦的交互元素上
  • 不要仅依赖 hover 触发
  • disabled 元素需用包裹元素触发
Posted in Bootstrap4 教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注