20 Bootstrap

Bootstrap是别人已经写好的CSS样式，如果我们想要使用这个Bootstrap，需要先下载，然后再引入文件。 编写HTML时，按照Bootsrap的规定来编写，但是Bootstrap不能完全满足开发需求，有时需要自己编写CSS。

20.1 下载和引入Bootstrap

  1. Bootstrap的下载

去中文官网下载Bootstrap，目前（2023年9月）官网最新版本为5.3.0。下载时选择下载Bootsrap生产文件， 下载好文件之后，首先解压文件。然后放入项目文件夹中，项目文件夹的目录如下所示：

├── 项目文件夹/
│   ├── static/
│   ├── css/
│   ├── img/
│   ├── js/
│   ├── plugins/
│       ├──bootstrap-5.3.0/
│       ├── css/
│       ├── js/
│   ├── html文件/

注：我这里下载的最新版的5.3.0版，但是目前大多中文教程还是基于3.X版。

  1. Bootsrap的引入

一般开发的时候引入开发版本的Bootstrap，部署上线的时候选择引入生产版本，因为生产版本的文件提交小一些。 VS Code实现Bootsrap代码不全：下载插件“IntelliSense for CSS class names in HTML”，这个只是目前发现方插件，也可以自己去寻找其他代码补全插件。

<head>
    <!-- 开发版本的引入 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/css/bootstrap.css">
  
    <!-- 生产版本的引入 -->
    <!--<link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/css/bootstrap.min.css">-->
</head>
  1. Bootstrap的图标（icon）的下载和引入模块

下载网址：https://icons.getbootstrap.com/#install

引入

<head>
    <!-- 开发版本的引入 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-icons-1.10.5/font/bootstrap-icons.css">
</head>
  1. Awesome font的icon引入

因为Bootstrap的icon库中的图标数量较少，且检索起来不是很方便。可以使用Awesome font的图标。

下载网站：https://fontawesome.com/download

我们下周免费版即可。

引入

<head>
    <link rel="stylesheet" href="static/plugins/fontawesome-free-6.4.2/css/all.css">
</head>

20.2 栅格系统

https://getbootstrap.com/docs/5.3/layout/grid/

把整体划分成了12格。

响应式：

.com-sm-数字
.com-md-数字
.com-lg-数字