标签元素与常用组件

Posted on 9 月 28, 2026 by

基础排版标签

标题 <h1> 到 <h6> 和段落 <p> 在 Bootstrap 中被重置了默认样式：

  • 所有标题的 margin-top 被移除
  • 标题新增 margin-bottom: .5rem
  • 段落新增 margin-bottom: 1rem

列表 <ul>、<ol>、<dl> 同样移除了 margin-top，设置了 margin-bottom: 1rem，嵌套列表没有 margin-bottom。

大多数 HTML 元素按原有方式使用即可，bootstrap.css 会自动为其附加样式。

警报（Alert）

用于向用户展示提示信息，支持 8 种上下文颜色。

基本用法

<div class="alert alert-primary" role="alert">A simple primary alert</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert</div>
<div class="alert alert-success" role="alert">A simple success alert</div>
<div class="alert alert-danger" role="alert">A simple danger alert</div>
<div class="alert alert-warning" role="alert">A simple warning alert</div>
<div class="alert alert-info" role="alert">A simple info alert</div>
<div class="alert alert-light" role="alert">A simple light alert</div>
<div class="alert alert-dark" role="alert">A simple dark alert</div>Code language: HTML, XML (xml)

8 种颜色对应不同语义：primary（主要）、secondary（次要）、success（成功）、danger（危险/错误）、warning（警告）、info（信息）、light（浅色）、dark（深色）。

带链接的警报

使用 .alert-link 让链接颜色与当前警报配色一致：

<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>.
</div>Code language: HTML, XML (xml)

包含其他内容

警报内部可以放标题、段落、分隔线等任意 HTML：

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities.</p>
</div>Code language: JavaScript (javascript)

可关闭的警报

添加 .alert-dismissible、.fade、.show，并放入关闭按钮：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> Check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>Code language: HTML, XML (xml)

关闭后该元素会从 DOM 中移除。

JavaScript 控制

$('.alert').alert()              // 绑定关闭事件监听
$('.alert').alert('close')       // 关闭并移除
$('.alert').alert('dispose')     // 销毁Code language: JavaScript (javascript)

徽章（Badge）

小型计数或标签组件，大小随父元素字体变化。

基本用法

<h1>Example heading <span class="badge badge-secondary">New</span></h1>Code language: HTML, XML (xml)

作为按钮计数器

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>Code language: HTML, XML (xml)

8 种情境颜色

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

药丸形状

添加 .badge-pill 获得更圆润的样式：

<span class="badge badge-pill badge-primary">Primary</span>Code language: HTML, XML (xml)

作为链接

<a href="#" class="badge badge-primary">Primary</a>Code language: HTML, XML (xml)

面包屑导航（Breadcrumb）

指示当前页面在导航层次结构中的位置：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>Code language: HTML, XML (xml)

分隔符由 CSS 自动生成，不需要手动写。

按钮（Button）

预定义样式

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>Code language: HTML, XML (xml)

适用元素

.btn 类可用于 <button>、<a>、<input>：

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">Code language: HTML, XML (xml)

轮廓按钮

使用 .btn-outline-* 替代实心背景：

<button type="button" class="btn btn-outline-primary">Primary</button>Code language: HTML, XML (xml)

尺寸

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>Code language: HTML, XML (xml)

块级按钮

添加 .btn-block 让按钮占满父容器宽度：

<button class="btn btn-primary btn-lg btn-block">Block level button</button>Code language: HTML, XML (xml)

活跃与禁用状态

<a href="#" class="btn btn-primary active">Active link</a>
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Disabled link</a>Code language: HTML, XML (xml)

切换状态

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>Code language: HTML, XML (xml)

复选框和单选按钮样式

用 .btn-group-toggle + data-toggle="buttons" 将按钮组变为复选/单选组：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
</div>Code language: JavaScript (javascript)

按钮组（Button Group）

将多个按钮组合在一起：

<div class="btn-group" role="group">
  <button class="btn btn-secondary">Left</button>
  <button class="btn btn-secondary">Middle</button>
  <button class="btn btn-secondary">Right</button>
</div>Code language: HTML, XML (xml)

按钮工具栏

组合多个按钮组：

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group mr-2" role="group">
    <button class="btn btn-secondary">1</button>
    <button class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary">3</button>
  </div>
</div>Code language: HTML, XML (xml)

尺寸

在 .btn-group 上加 .btn-group-lg 或 .btn-group-sm。

嵌套下拉菜单

<div class="btn-group" role="group">
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-secondary">2</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>Code language: HTML, XML (xml)

垂直排列

<div class="btn-group-vertical">...</div>Code language: HTML, XML (xml)

卡片（Card）

Bootstrap 4 中替代 Bootstrap 3 面板、well、缩略图的综合组件。

基础卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>Code language: JavaScript (javascript)

内容类型

类名用途
.card-body卡片内边距容器
.card-title标题
.card-subtitle副标题
.card-text正文文本
.card-link链接
.card-header头部
.card-footer尾部
.list-group + .list-group-flush列表组

卡片头部带导航

<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="#">Active</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    </ul>
  </div>
  <div class="card-body">...</div>
</div>Code language: HTML, XML (xml)

图片处理

  • 顶部图片：.card-img-top
  • 底部图片：.card-img-top（放在 body 后）
  • 图片叠加：.card-img-overlay 覆盖在图片上
<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay title</h5>
    <p class="card-text">Overlay text.</p>
  </div>
</div>Code language: JavaScript (javascript)

水平卡片

<div class="row no-gutters">
  <div class="col-md-4">
    <img src="..." class="card-img">
  </div>
  <div class="col-md-8">
    <div class="card-body">...</div>
  </div>
</div>Code language: JavaScript (javascript)

背景色与边框

<div class="card text-white bg-primary">...</div>
<div class="card border-success">...</div>Code language: HTML, XML (xml)

卡片布局模式

类名效果
.card-group等宽等高，无间距
.card-deck等宽等高，有间距
.card-columns瀑布流/砌体布局

轮播（Carousel）

幻灯片组件，用于循环播放图片或文本。

基础轮播

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>Code language: JavaScript (javascript)

带指示器

<ol class="carousel-indicators">
  <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExample" data-slide-to="1"></li>
</ol>Code language: HTML, XML (xml)

带字幕

<div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Slide text.</p>
  </div>
</div>Code language: JavaScript (javascript)

淡入淡出效果

添加 .carousel-fade 到 .carousel 容器。

自动播放间隔

在 .carousel-item 上加 data-interval="毫秒数"。

折叠/手风琴（Collapse）

基本折叠

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Toggle</a>
<div class="collapse" id="collapseExample">
  <div class="card card-body">Collapsed content</div>
</div>Code language: HTML, XML (xml)

多个目标

通过 class 选择器同时控制多个：

<button class="btn btn-primary" data-toggle="collapse" data-target=".multi-collapse">Toggle both</button>Code language: HTML, XML (xml)

手风琴

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
        Item #1
      </button>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
      <div class="card-body">Content 1</div>
    </div>
  </div>
</div>Code language: HTML, XML (xml)

data-parent 属性确保同一时间只展开一个面板。

Posted in Bootstrap4 教程

发表回复

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