何雨果的知识库

Appearance

Bootstrap 框架入门 ​

FrameworkUI Components

Bootstrap 是最流行的 CSS 框架，由 Twitter 开发者 Mark Otto 和 Jacob Thornton 于 2010 年创建。它提供预制的 CSS 类和 JavaScript 组件，使开发者能够 快速构建响应式网站。

一、📦 什么是 CSS 框架 ​

CSS 框架是 预编写的 CSS 文件，通过在 HTML 中添加特定的类名来应用预制的样式和布局。

1.1 框架格局 ​

框架市场份额特点
Bootstrap~80%最流行，社区大，组件丰富
Foundation较小灵活，高级定制能力强
Tailwind CSS增长中原子化 CSS，高度可定制
MUI增长中专注 React，Material Design

原生 CSS 仍是主流

即使在框架盛行的时代，互联网上最大比例的网站仍然使用 原生 CSS（Flexbox、Grid 等），框架并不是必需品。

1.2 优缺点 ​

✅ 优点❌ 缺点
快速开发Class 膨胀：HTML 中堆积大量类名
预制组件（按钮、卡片、导航等）自定义困难：深度定制需大量覆盖
一致的视觉风格网站容易"千篇一律"
跨浏览器兼容引入整个框架增加文件体积

1.3 适用场景 ​

✅ 适合❌ 不适合
快速原型 / MVP极简单页面（纯 HTML/CSS 即可）
后台管理系统需要完全自定义设计的品牌网站
移动优先响应式网站对性能极致要求的项目

二、🔌 引入 Bootstrap ​

2.1 CDN 引入（推荐新手） ​

在 <head> 中添加 CSS：

html
<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet" />
</head>

在 </body> 前添加 JavaScript（按钮交互、下拉菜单等需要）：

html
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

min.css 是什么？

.min.css 是 压缩版（minified），去掉了所有空格和换行，体积更小，加载更快。内容与普通版完全相同。

2.2 自定义 CSS 覆盖 ​

当需要覆盖 Bootstrap 的默认样式时：

html
<head>
  <!-- 1. 先引入 Bootstrap -->
  <link href="bootstrap.min.css" rel="stylesheet" />

  <!-- 2. 再引入自定义样式（顺序很重要！） -->
  <link href="custom.css" rel="stylesheet" />
</head>

自定义 CSS 文件必须在 Bootstrap 之后，才能成功覆盖。也可以使用 Internal CSS 或 Inline CSS 覆盖。

三、📊 12 列栅格系统 ​

3.1 三层结构 ​

html
<div class="container">          <!-- 外层容器 -->
  <div class="row">              <!-- 行 -->
    <div class="col">Item 1</div>  <!-- 列 -->
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
  </div>
</div>
  • Container → 居中，设定最大宽度
  • Row → 水平排列子元素（基于 Flexbox）
  • Col → 控制每个项目占父容器的比例

3.2 Container 类型 ​

类名行为
container各断点有固定最大宽度，两侧留白
container-fluid始终 100% 宽度，无留白
container-sm≥576px 时有最大宽度，更小时 100%
container-md≥768px 时有最大宽度
container-lg≥992px 时有最大宽度
container-xl≥1200px 时有最大宽度

3.3 列的比例 ​

每行被分为 12 等份，通过 col-N 指定每列占几份：

html
<div class="row">
  <div class="col-2">2/12</div>   <!-- 16.7% -->
  <div class="col-4">4/12</div>   <!-- 33.3% -->
  <div class="col-6">6/12</div>   <!-- 50% -->
</div>

不指定数字（col）时，自动 均分 剩余空间。

3.4 响应式断点 ​

断点类前缀屏幕宽度典型设备
X-Small（无）<576px折叠屏/窄手机
Smallsm≥576px手机
Mediummd≥768px平板
Largelg≥992px笔记本
X-Largexl≥1200px桌面显示器
XX-Largexxl≥1400px大屏/电视

断点的含义：col-lg-6 表示当屏幕 ≥992px 时，此列占 6/12（50%）。低于该断点时，默认回退为 100% 宽度。

3.5 多断点响应式 ​

一个元素可以设置 多个断点：

html
<div class="col-12 col-sm-8 col-lg-4">
  <!-- 手机：100% | 平板：66% | 桌面：33% -->
</div>
屏幕应用的类宽度
<576pxcol-12100%
≥576pxcol-sm-866.7%
≥992pxcol-lg-433.3%

3.6 混合定义 ​

可以给部分列指定大小，让其余列自动填充：

html
<div class="row">
  <div class="col-2">固定 2/12</div>
  <div class="col-4">固定 4/12</div>
  <div class="col">自动填充剩余 6/12</div>
</div>

四、🧩 Bootstrap 组件 ​

4.1 按钮（Buttons） ​

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-outline-primary">轮廓按钮</button>
颜色类用途色调
btn-primary主操作蓝
btn-secondary次要操作灰
btn-success成功/确认绿
btn-danger危险/删除红
btn-warning警告黄
btn-info信息浅蓝
btn-dark / btn-light深/浅色黑/白

4.2 卡片（Cards） ​

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>
    <p class="card-text">卡片描述文本。</p>
    <a href="#" class="btn btn-primary">操作按钮</a>
  </div>
</div>

4.3 导航栏（Navbar） ​

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="#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>

关键类：

类作用
navbar-expand-lg在 ≥992px 时展开，更小屏幕显示汉堡菜单
navbar-dark bg-dark深色主题
navbar-toggler汉堡按钮（需 Bootstrap JS）
navbar-collapse可折叠的导航区域

4.4 轮播（Carousel） ​

html
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <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" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

第一个 carousel-item 必须有 active 类

不添加 active 类的话，轮播不会显示任何内容。

4.5 手风琴（Accordion） ​

html
<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse"
              data-bs-target="#collapseOne">
        问题一
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">答案内容...</div>
    </div>
  </div>
</div>

五、🔧 工具类（Utilities） ​

Bootstrap 提供大量工具类，用于快速微调样式：

5.1 间距（Spacing） ​

格式：{属性}{方向}-{大小}

属性说明方向说明
mmarginttop
ppaddingbbottom
sstart (left)
eend (right)
x水平
y垂直
html
<div class="mt-3 px-4 mb-5">
  <!-- margin-top: 1rem, padding-x: 1.5rem, margin-bottom: 3rem -->
</div>

大小：0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem

5.2 显示与隐藏 ​

html
<div class="d-none d-md-block">
  <!-- 手机隐藏，平板及以上显示 -->
</div>

5.3 文本 ​

html
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>
<p class="fw-bold">加粗</p>
<p class="fs-1">最大字号</p>

六、🎨 Z-Index 层级系统 ​

Bootstrap 为常见 UI 组件定义了 z-index 层级：

组件z-index
Dropdown1000
Sticky1020
Fixed1030
Modal Backdrop1040
Modal1050
Popover1060
Tooltip1070

七、💡 实践要点 ​

#要点说明
112 列永远加和到 12同一行内的 col-N 应合计为 12，否则会换行
2自定义 CSS 放在 Bootstrap 后面确保能成功覆盖
3查阅官方文档getbootstrap.com/docs 是最好的参考
4不要过度使用框架简单场景用原生 CSS，复杂场景再上框架
5组件需要 JSNavbar 折叠、Carousel、Accordion 等需要引入 Bootstrap JS
6居中用 Flexboxd-flex justify-content-center align-items-center 或直接写 CSS

八、📚 参考资源 ​

← 返回 Web 开发研究