Bootstrap

一、Bootstrap介绍

简洁、直观的前端开发框架，让web开发更迅速、简单
用于开发响应式布局、移动设备优先的WEB项目
官网：https://www.bootcss.com/

Bootstrap是一个HTML，CSS，JavaScript的框架
Bootstrap框架包含了很多常见的CSS样式，JavaScript的效果
Bootstrap框架官方文档的案例足够你应付项目中大部分的需求

二、Bootstrap安装

1.第一种方式：

直接引入文件的方式（用CDN的地址）
CSS：“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css”
JS：
“https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js”
“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js”

2.第二种方式：

模块化的包管理的方式
npm install bootstrap

三、Bootstrap的使用

1.布局（栅格系统）

（1）布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。框架中提供了两个类。

.container类
用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div>

.container-fluid类
用于100%宽度占据全部视口（viewport）的容器。

<div class="container-fluid">
...
</div>

注意：
由于padding等属性的原因，这两种容器类不能互相嵌套。

（2）栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列（12份）

（3）栅格参数

	超小屏幕 手机（<768px）	小屏幕 平板（>=768px）	中等屏幕 桌面显示器（>=992px）	大屏幕 大桌面显示器（>=1200px）
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度	None（自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12

2.表格

在Bootstrap里，给标签<table>添加.table类可以为其赋予基本的样式——少量的内补（padding）和水平方向的分隔线
条纹状的表格
通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式
跨浏览器兼容性
条纹状表格是依赖 :nth-child CSS选择器实现的，而这一功能不被 Internet Explorer 8 支持
带边框的表格
添加.table-bordered类为表格和其中的每个单元格增加边框。
鼠标悬停
通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

3.表单

单独的表单控件会被自动赋予一些全局样式。
所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列

（1）按钮

可作为按钮使用的标签或元素
为<a>、<button>或<input>元素添加按钮类（button class）即可使用Bootstrap提供的样式

4.组件

图标
下拉菜单
输入框组
按钮组

5.javascript插件

模态窗口