七、Bootstrap
2018-03-09 本文已影响0人
Love小六六
Bootstrap
- 什么是Bootstrap
- 一个css框架
- twitter出品
- 提供通用基础样式
- Bootstrap4
- 兼容IE10+
- 使用flexbox布局
- 抛弃Normalize.css
- 提供布局和reboot版本
- 组成
- 基础样式
- 常用组件（如网格系统）
- JS插件（如弹出框）
使用bootstrap
- 在官网下载bootstrap
- 引入bootstrap
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">// 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文件)
