CSS讲解(8) Bootstrap

介绍

• CSS框架
• twitter 出品
• 提供通用基础样式

Bootstrap 4

• 兼容IE10+
• 使用flexbox布局
• 抛弃Nomalize.css
• 提供布局和reboot版本

提供：

• 基础样式
• 常用组件
• JS插件

基本用法

JS组件

• 用于组件交互

  • dropdown(下拉)
  • modal(弹窗)
  • …

• jQuery

• Popper.js

• bootstrap.js

• 使用方式：

  • 基于 data-*属性
  • 基于JS API

响应式布局

定制方法

• 使用CSS同名类
• 修改源码重新构建
• 引用scss源文件 修改变量

其它

• Bootstrap的优缺点

  • 优点： CSS代码结构合理 现成的样式可以直接使用
  • 缺点： 定制较为繁琐 体积大

• Bootstrap如何实现响应式布局

  • 原理：通过media query设置不同分辨率的class
  • 使用: 为不同分辨率选择不同的网格class

• 如何基于Bootstrap定制自己的样式

  • 使用CSS同名类覆盖
  • 修改源码重新构建
  • 引用scss源文件 修改变量