前端篇——番外篇 Bootstrap框架

目录

一、Bootstrap 基础

二、核心功能

1. 栅格系统 (Grid System)

2. 全局样式

三、组件 (Components)

1. 使用步骤

2. 常用组件

3. 组件示例：导航栏

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

使用步骤：

五、重点总结

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

一、Bootstrap 基础

1. 简介

   • 由 Twitter 开发的前端 UI 框架

   • 提供预编写 CSS 样式 + HTML 结构 + JavaScript 交互

   • 中文官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

2. 使用步骤

   <!-- 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. 使用步骤

1. 引入 Bootstrap CSS + JS

2. 复制官方HTML结构

3. 修改内容/样式

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)

使用步骤：

1. 下载图标包

   • 官网：导航 → Extend → Icons → 下载 bootstrap-icons-x.x.x.zip

2. 部署文件

   • 复制 fonts 文件夹到项目

   • 引入CSS：<link rel="stylesheet" href="path/bootstrap-icons.css">

3. 调用图标

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

五、重点总结

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