Bootstrap
- 一个CSS框架
- twitter出品
- 提供通用的基础样式
Bootstrap4
- 兼容IE10+ (3兼容到9)
- 使用flexbox布局
- 抛弃Nomalize.css
- 提供布局和reboot版本
Bootstrap 样式组件
https://v4.bootcss.com/docs/4.0/components/alerts/
Bootstrap JS组件
引入以下文件
- jquery
- Popper.js
- bootstrap.js
使用方式
- 基于data-* 属性
- 基于 JS API
弊端：对格式要求严格不适用于部分场景。
※Bootstrap 响应式布局
- Bootstrap的网格系统可以在不同的分辨率下面有不同的分配
Bootstrap 定制方法
- 使用css同名类覆盖 （单个修改）
- 修改源码重新构建 （大批量修改，比如改主题色，缺点是破坏源文件）
- 引用.scss文件 修改变量 （上一种方式的优化，不会破坏源文件）
$primary: green;
@import './scss/bootstrap';
相关问题
Bootstrap 优缺点
优点：CSS的预处理代码结构合理，响应式设计优秀
缺点：定制繁琐，体积大
Bootstrap如何实现响应式布局
原理：通过media query设置不同分辨率的class
使用：为不同分辨率选择不同的网格class