BootStrap的使用

Bootstrap使用四步曲：1、创建文件夹；2、创建html骨架结构；3、引入相关样式文件；4、书写内容

一、创建文件夹结构

1、创建文件夹

按照以往的习惯创建文件夹。
在这里插入图片描述

2、下载Bootstrap

在官网下载压缩包，选择下载生产环境的压缩包，将其解压到项目目录下，但是不能覆盖你自己建的文件夹。
在这里插入图片描述

二、创建html骨架结构

先正常搭建一个html页面，然后再选中“基础模板”中的所需代码，复制到你自己搭建的html页面中。
在这里插入图片描述

三、引入相关样式文件

使用link标签引入css文件，这里以min.css为例。
在这里插入图片描述

四、书写内容

正常输入内容，如果发现内容没有了浏览器默认的内外边距，则证明css文件引入成功。
在这里插入图片描述

五、使用

这里使用按钮为例。在全局css中选中按钮，根据预定义样式选中你所需要的css按钮样式，然后复制对应的代码到你搭建好的Bootstrap结构中并允许查看成功与否。
在这里插入图片描述

六、代码

<!DOCTYPE html><head><meta charset="UTF-8"><!-- 以最高版本的IE浏览器来渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"><title>初体验</title>
</head><body><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button>
</body></html>