boostrap

简介

pink老师推荐文档网站：https://bootstrap.css88.com/，移动端优先，是通过浮动或者flex实现

---

安装

方法一：CDN文件引入（boostrap官网有）

CSS：https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

JS：   https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js    同时还需要引入jq，因为是基于jq的

方法二：npm安装，具体百度

---

创建html骨架

使用

一、布局（栅格系统）

父容器类名：container，里面每一行用row类名包裹

boostrap实现每个盒子中间有间隔的方法：

每一列里面再套一个div来装内容，这个div宽度设置100%，然后div的父容器设置左右内边距就可以了

列嵌套

如果想要某一列中又分成X份，可以使用列嵌套，先写一个row行，里面的元素再分比例

列偏移——offset（移动）

offset实际上是给了外边距来实现移动（默认都是向右移动，因为都是从左开始）比如两个div一个要在左侧，一个在右侧，都是占3份，那右边的盒子就设置offset移动6份（12-（3+3）=6）就可以了

列排序——push（推）pull（拉）

想让两个元素排序调换，一个push往后推，一个pull往前拉，比如两个元素各占6份，左边的push-6，右边的pull-6就调换位置了

响应式工具——隐藏hidden&显示visible

---

其他功能请参考官方文档