前端篇——番外篇 Bootstrap框架

[一、Bootstrap 基础](#一、Bootstrap 基础)

二、核心功能

[1. 栅格系统 (Grid System)](#1. 栅格系统 (Grid System))

[2. 全局样式](#2. 全局样式)

三、组件 (Components)

[1. 使用步骤](#1. 使用步骤)

[2. 常用组件](#2. 常用组件)

[3. 组件示例：导航栏](#3. 组件示例：导航栏)

四、扩展功能：字体图标 (Bootstrap Icons)

使用步骤：

五、重点总结

摘要：Bootstrap是由Twitter开发的前端UI框架，提供CSS样式、HTML结构和JS交互功能。核心功能包括12列栅格系统（支持6种响应式断点）、全局样式（按钮/表格）和组件（导航栏/模态框等）。使用步骤需引入CSS/JS文件，组件需特定HTML结构。扩展功能包含Bootstrap图标库（需单独引入）。注意：组件交互需bootstrap.bundle.min.js支持。

一、Bootstrap 基础

简介
- 由 Twitter 开发的前端 UI 框架
- 提供预编写 CSS 样式 + HTML 结构 + JavaScript 交互
- 中文官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

使用步骤

复制代码

<!-- 1. 引入CSS -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

<!-- 2. 使用容器类 -->
<div class="container">响应式版心</div>

<!-- 3. 组件需额外引入JS -->
<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

二、核心功能

1. 栅格系统 (Grid System)

核心规则
- 将页面宽度 等分成12列
- 通过类名控制元素所占列数（如 .col-md-3 占3/12）

响应断点

断点前缀	设备宽度	容器宽度
无	<576px (超小屏)	auto
`sm`	≥576px (小屏)	540px
`md`	≥768px (中屏)	720px
`lg`	≥992px (大屏)	960px
`xl`	≥1200px (超大屏)	1140px
`xxl`	≥1400px (超超大)	1320px

布局类
- .row：定义行容器
- .col-{断点}-{列数}：定义列（如 .col-lg-4）

2. 全局样式

按钮 (Buttons)
复制代码
```
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-warning btn-lg">大号警告按钮</button>
```
- 样式类：btn-success（成功）/ btn-danger（危险）等
- 尺寸类：btn-sm（小） / btn-lg（大）
表格 (Tables)
复制代码
```
<table class="table table-striped table-success">
  
</table>
```
- 增强类：table-striped（斑马纹）、table-hover（悬停效果）

三、组件 (Components)

1. 使用步骤

引入 Bootstrap CSS + JS
复制官方HTML结构
修改内容/样式

2. 常用组件

导航栏 (Navbar)
警告框 (Alert)
卡片 (Card)
轮播图 (Carousel)
下拉菜单 (Dropdowns)
模态框 (Modal)
进度条 (Progress)
折叠面板 (Collapse)

3. 组件示例：导航栏

复制代码

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarID">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarID">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

四、扩展功能：字体图标 (Bootstrap Icons)

使用步骤：

下载图标包
- 官网：导航 → Extend → Icons → 下载 bootstrap-icons-x.x.x.zip
部署文件
- 复制 fonts 文件夹到项目
- 引入CSS：<link rel="stylesheet" href="path/bootstrap-icons.css">

调用图标

复制代码

<i class="bi-android2"></i>  <!-- Android图标 -->
<i class="bi-heart-fill text-danger"></i>  <!-- 红色心形 -->

五、重点总结

类别	核心知识点
栅格系统	12等分布局 + 6响应断点 + 容器宽度控制
全局样式	按钮语义化颜色(`btn-`) + 表格增强类(`table-`)
组件使用	结构复制 + JS依赖 + 容器嵌套
图标库	独立引入 + `bi-` 类名前缀

提示：组件交互功能（如导航栏折叠）需依赖 bootstrap.bundle.min.js，图标库需单独下载引入。