前端框架BootStrap

1.BootStrap简介

(1)Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
(2)中文官网: https://www.bootcss.com/
(3)使用BootStrap框架可以快速布局响应式网页
注意：响应式网页指的是：可以根据使用者的设备自动识别屏幕宽度并调整布局，使网页在不同环境(系统平台、屏幕尺寸、屏幕定向等)均可获得较佳的浏览展示的网页。

2.BootStrap使用步骤

(1) 引入： BootStrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

(2) 调用类：使用BootStrap提供的样式
(3)container：响应式布局版心类

3.BootStrap栅格系统

（1）栅格化是指将整个网页的宽度分成若干等份
（2）BootStrap3默认将网页分成12等份
（3）.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
（4）.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
（5）分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
(1)container类自带间距15px;
(2)row类自带间距-15px

例如：

<!--需求：大屏：一行排列4个内容；中屏：一行排列2个内容-->
<div class="container">
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
</div>

4.BootStrap全局样式

5.BootStrap组件

6.BootStrap插件

插件的使用步骤
（1） 先引入BootStrap样式
（2）再引入js文件：jQuery.js + BootStrap.min.js
原因：因为bootstrap用到了jquery中的功能