特效开发总结

关于bootstrap

概念：bootstrap使用用于制作页面界面的框架，使用bootstrap必须引入相关css文件和js文件。

布局

目录

关于bootstrap

关于react

---

1.container布局
响应式布局：根据屏幕宽度，切换不同页面布局的一种布局方式，bootstrap 是使用断点来完成响应式布局的
断点：是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

布局容器：通常是页面的根节点，使用 class="container" 来设置布局容器，布局容器受断点影响，可以设置不同断点上的容器，具体如下表：

2.display显示方式
 语法:
在 xs 断点下: d-{value}
xs 以上: d-{breakpoints}-{value}

4.网格布局
行：row 列：col
bootstrap 中 一行 row 被等分为 12 分 那么col的value值代表的是占多少份
col 语法: col-{breakpoints}-{value}
value: 范围在 1~12

纵向排列方式：在 row 上可以使用flex 的 align-items 来进行竖直方向的排列
横向排列方式：在 row 上可以使用 flex 的 justify-content 来进行水平方向的排列
单元格偏移：offset 设置单元格左侧的偏移量 数字代表的含义和 col 相同
单元格间距：添加单元格间距使用 gutter 首字母为 g。可以使用 g-{value} 或 gx-{value}、gy-{value}