七、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文件)

你可能感兴趣的:(七、Bootstrap)