Bootstrap 简介

Tip

参考：

Bootstrap 是一个十分流行的 CSS 框架（也提供部分可交互式元件），提供大量的 HTML、CSS、JavaScript 元件，标准化的网格系统，其标准化的语义让前后端无缝整合。

Bootstrap 4 有很多新特性

基于 Sass 进行开发（.scss 文件需要编译才可以使用）
放弃对 IE8、IE9、iOS6 的兼容
排版基于 flexbox 技术（放弃 float 技术）
新增了一个中断点，可以适配更小尺寸的设备
BS3 / BS4 xs xs / sm sm / md md / lg lg / xl
Bootstrap 3 / < 768px >= 768px >= 992px >= 1200
Bootstrap 4 <= 575px 576px ~ 767px 767px ~ 991px 992px ~ 1199px >= 1200
使用相对单位 rem 可以在媒体查询切换布局时同时，基于根元素字体大小进行整体网页字体大小设置（以前版本使用绝对单位 px）
字体默认大小为 16px 与浏览器的预设相同（以前版本是 14px）
色彩更鲜艳
元件外观设计更多样

BS3 / BS4	`xs`	`xs` / `sm`	`sm` / `md`	`md` / `lg`	`lg` / `xl`
Bootstrap 3	/	< 768px	>= 768px	>= 992px	>= 1200
Bootstrap 4	<= 575px	576px ~ 767px	767px ~ 991px	992px ~ 1199px	>= 1200

加载框架

使用 Bootstrap 框架前需要先在 HTML 文档中加载相应的 CSS 样式文件和交互式脚本。

方法一：可以在官网下载预编译的 CSS 和 JS 文件（已进行压缩优化处理，源码文件是 Sass、JavaScript 和文档，需要使用编译器进行编译再使用）⚠️ 下载的文件不包括任何 JavaScript 依赖项（jQuery 和 Popper.js），如果需要使用 Bootstrap 的交互功能需要引入 jQuery 和 Popper.js。

方法二：使用 CDN 将 Bootstrap 的预编译 CSS 和 JS 文件利用缓存加载到你的项目中。可以使用官网提供的 CDN，💡 但为了优化国内访问速度可以使用 Bootstrap 中文网提供的 CDN。

模板

html

<!DOCTYPE html>
<html lang="zh-Hang">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</body>

</html>

Tip

脚本应该插入在元素 <body> 内的底部，以确保 DOM 生成完成后再加载脚本。

基本用法

Bootstrap 使用类 class 来为元素套用预设的样式或预设的交互功能。具体的预设类可以参考 Bootstrap 文档说明（中译版）。

Bootstrap 官方文档分为多个子栏目，一般根据所需查询相应的栏目，获得相应的预设类 class 对元素进行样式设置。

Getting started 快速开始：介绍如何加载 Bootstrap 框架到项目中，框架支持的浏览器/设备及使用注意事项，自己编译 Bootstrap 的方法。
Layout 排版：介绍 Bootstrap 网格系统使用方法
Content 内容：介绍 Bootstrap 重置的样式，及基础样式（如字体、图片、表格等元素的样式的用法）
Components 元件：元件的使用方法及代码示例，可以直接复制/套用到项目中添加相应的元件
Utilities 通用类别：使用更多的通用预设样式，弥补 Bootstrap 内置提供的排版、内容、元件无法满足需求的情况
Extend 扩增：补充的外部资源，如图标 Icons 资源
Migration 更版记录：版本更改日志