七、Bootstrap

Bootstrap

• 什么是Bootstrap
  • 一个css框架
  • twitter出品
  • 提供通用基础样式
• Bootstrap4
  • 兼容IE10+
  • 使用flexbox布局
  • 抛弃Normalize.css
  • 提供布局和reboot版本
• 组成
  • 基础样式
  • 常用组件（如网格系统）
  • JS插件（如弹出框）

使用bootstrap

• 在官网下载bootstrap
• 引入bootstrap

// reboot设置了默认样式

• bootstrap的类(栅格宽度划成12份)
  • col-6 // 宽度占6份
  • offset-3// 偏移3份
  • 文档中提供的很多类

Bootstrap JS组件

• 用于组件交互
  • dropdown(下拉)
  • modal(弹窗)
  • ...
• 基于jQuery写的，使用时需要引入jquery,popper.js和bootstrap.js（后两个bootstrap提供了bootstrap.bundle.js）
• 使用方式
  • 基于data-^*属性
  • 基于JS API

Bootstrap 响应式布局

<576px (手机)	>=576px （大屏手机）	>=768px (pad和小屏笔记本)	>=992px （pc电脑）	>=1200px （宽屏电脑）
.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

Bootstrap在不同屏幕下有不同的分配

Bootstrap 定制方法

• 使用css同名类覆盖
• 修改源码重新构建
• 引用scss源文件 修改变量(按需要引入模块，定义变量，自己生成.css文件)