何雨果的知识库

Appearance

Bootstrap 组件库 ​

FrameworkUI Components

Bootstrap 提供数十种 预制组件，只需在 HTML 中添加特定的类名即可获得专业级的 UI 元素。本文涵盖最常用的核心组件。

一、🔘 按钮（Buttons） ​

1.1 基本用法 ​

html
<button class="btn btn-primary">主要按钮</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-secondary">次要</button>
<button class="btn btn-dark">深色</button>
<button class="btn btn-light">浅色</button>

所有按钮都需要基础类 btn + 颜色类 btn-{color}。

1.2 颜色语义 ​

类名颜色语义典型用途
btn-primary蓝主操作提交、确认、下载
btn-secondary灰次要操作取消、返回
btn-success绿成功/确认保存成功、确认操作
btn-danger红危险/警告删除、移除
btn-warning黄提醒注意、待处理
btn-info浅蓝信息更多信息、帮助

1.3 变体 ​

html
<!-- 轮廓按钮 -->
<button class="btn btn-outline-primary">轮廓按钮</button>
<button class="btn btn-outline-danger">轮廓危险</button>

<!-- 尺寸 -->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>

<!-- 禁用状态 -->
<button class="btn btn-primary" disabled>禁用</button>

<!-- 链接作为按钮 -->
<a href="#" class="btn btn-primary">链接按钮</a>

<!-- 块级按钮（全宽） -->
<div class="d-grid">
  <button class="btn btn-primary">块级按钮</button>
</div>

1.4 按钮组（Button Group） ​

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

二、🃏 卡片（Cards） ​

2.1 基本结构 ​

html
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="卡片图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">副标题</h6>
    <p class="card-text">卡片描述文本内容。</p>
    <a href="#" class="btn btn-primary">操作按钮</a>
  </div>
</div>

2.2 卡片组成部分 ​

类名作用
card卡片容器
card-img-top顶部图片
card-img-bottom底部图片
card-body内容区域（包含 padding）
card-title标题
card-subtitle副标题
card-text正文
card-header头部（灰色背景）
card-footer底部
card-link链接

2.3 卡片变体 ​

html
<!-- 带头部和底部 -->
<div class="card">
  <div class="card-header">头部</div>
  <div class="card-body">
    <h5 class="card-title">标题</h5>
    <p class="card-text">内容</p>
  </div>
  <div class="card-footer text-body-secondary">底部信息</div>
</div>

<!-- 列表卡片 -->
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">项目 1</li>
    <li class="list-group-item">项目 2</li>
    <li class="list-group-item">项目 3</li>
  </ul>
</div>

<!-- 水平卡片 -->
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">水平卡片</h5>
        <p class="card-text">图文并排的卡片布局。</p>
      </div>
    </div>
  </div>
</div>

2.4 卡片网格 ​

html
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col"><div class="card">...</div></div>
  <div class="col"><div class="card">...</div></div>
  <div class="col"><div class="card">...</div></div>
</div>

row-cols-* 控制每行显示几张卡片，g-4 设置间距。

三、🧭 导航栏（Navbar） ​

3.1 完整结构 ​

html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- 品牌 -->
    <a class="navbar-brand" href="#">Logo</a>

    <!-- 汉堡按钮（移动端） -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 可折叠内容 -->
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            下拉菜单
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">选项 1</a></li>
            <li><a class="dropdown-item" href="#">选项 2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">其他</a></li>
          </ul>
        </li>
      </ul>

      <!-- 搜索框 -->
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜索</button>
      </form>
    </div>
  </div>
</nav>

3.2 关键类解析 ​

类名作用
navbar导航栏基础类
navbar-expand-lg≥992px 展开，更小则折叠为汉堡菜单
navbar-dark浅色文字（配合深色背景）
navbar-light深色文字（配合浅色背景）
bg-dark / bg-primary背景颜色
navbar-brandlogo / 品牌名
navbar-toggler汉堡按钮
navbar-collapse可折叠区域
nav-link active当前激活的链接

需要 Bootstrap JS

Navbar 的折叠/展开和下拉菜单功能 需要引入 Bootstrap JavaScript。

3.3 固定导航栏 ​

html
<!-- 固定在顶部 -->
<nav class="navbar fixed-top navbar-dark bg-dark">...</nav>

<!-- 固定在底部 -->
<nav class="navbar fixed-bottom navbar-light bg-light">...</nav>

<!-- 滚动时吸附顶部 -->
<nav class="navbar sticky-top navbar-dark bg-dark">...</nav>

4.1 基本结构 ​

html
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- 指示器 -->
  <div class="carousel-indicators">
    <button data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
    <button data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
  </div>

  <!-- 幻灯片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>标题一</h5>
        <p>描述文字</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>

  <!-- 前/后控件 -->
  <button class="carousel-control-prev" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

第一个 carousel-item 必须有 active

缺少 active 类，轮播将不显示任何内容。

4.2 配置选项 ​

属性说明示例
data-bs-ride="carousel"自动播放页面加载后开始轮播
data-bs-interval="3000"切换间隔（毫秒）3 秒切换
data-bs-pause="hover"悬停暂停默认行为
class="carousel slide"添加 slide 类启用滑动动画—

五、🪗 手风琴（Accordion） ​

html
<div class="accordion" id="faqAccordion">
  <!-- 项目 1（默认展开） -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">
        什么是 Bootstrap？
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap 是最流行的前端 CSS 框架，提供预制组件和栅格系统...
      </div>
    </div>
  </div>

  <!-- 项目 2（默认折叠） -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">
        如何引入 Bootstrap？
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        通过 CDN 链接引入 CSS 和 JS 文件...
      </div>
    </div>
  </div>
</div>
要点说明
data-bs-parent设定后，展开一项会 自动关闭 其他项
collapse show默认展开的项
collapsed添加到按钮上，表示默认折叠状态

六、🪟 模态框（Modal） ​

html
<!-- 触发按钮 -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <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>

尺寸变体 ​

html
<div class="modal-dialog modal-sm">小模态框</div>
<div class="modal-dialog modal-lg">大模态框</div>
<div class="modal-dialog modal-xl">超大模态框</div>
<div class="modal-dialog modal-fullscreen">全屏模态框</div>

七、🚨 警告框（Alerts） ​

html
<div class="alert alert-success alert-dismissible fade show">
  <strong>成功！</strong> 操作已完成。
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div class="alert alert-danger">
  <strong>错误！</strong> 请检查输入。
</div>

<div class="alert alert-warning">
  <strong>警告！</strong> 请注意此操作不可逆。
</div>

alert-dismissible + btn-close 允许用户关闭警告框。

八、📋 其他常用组件 ​

8.1 列表组（List Group） ​

html
<ul class="list-group">
  <li class="list-group-item active">激活项</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
  <li class="list-group-item disabled">禁用项</li>
</ul>

8.2 徽章（Badges） ​

html
<h4>消息 <span class="badge bg-danger">4</span></h4>
<button class="btn btn-primary">
  通知 <span class="badge bg-secondary">99+</span>
</button>

<!-- 药丸形 -->
<span class="badge rounded-pill bg-success">完成</span>

8.3 面包屑导航（Breadcrumb） ​

html
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">分类</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前页</li>
  </ol>
</nav>

8.4 进度条（Progress） ​

html
<div class="progress">
  <div class="progress-bar bg-success" style="width: 75%">75%</div>
</div>

<!-- 条纹 + 动画 -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%"></div>
</div>

九、📚 参考资源 ​

← 返回 Web 开发研究