Bootstrap4

安装使用

  • 可使用CDN/官网下载 Bootstrap4 资源库/使用npm安装

网格系统

  • 分成12列,通过.col-*-*类设置,此处涉及响应式布局
    • 第一个星号*可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号*可以是 1 到 12 的数字。
  • 注意:
    1. 每一行的父容器:网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距
    2. 偏移列:通过 offset-*-*来设置。
      • 第一个星号*可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号*可以是 1 到 11 的数字。
      • 这些类会把一个列的 左外边距(margin) 增加 * 列,其中 * 范围是从 1 到 11
      • 例子.offset-md-4 是把.col-md-4 往右移了四列格:例子效果

隐藏/显示的类

面试题

Bootstrap的优缺点

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

Bootstrap如何实现响应式布局

  • 原理:通过media query设置不同分辨率的class,当分辨率不同时调用不同的class
  • 使用栅格系统,为不同分辨率的设备选择不同的栅格class

Bootstrap定制方法

  1. 使用CSS同名类覆盖
    • 需要一起修改的东西很多,不推荐
    • 比如像修改按钮的颜色,同时还需要我们修改按钮的hover颜色、边框颜色等,很麻烦,这些其实是bootstrap通过算法整出来的
  2. 修改源码重新构建
    • 方便,源码中将很多逻辑缩减为变量,只需改变一个变量就能改变一系列的样式
    • 要求较高,需要了解源码(bootstrap4是scss文件)和构建方式
    • 比如:想要修改按钮的一系列颜色+输入框的颜色只需要修改主体色即可
  3. 引用scss源文件 修改变量
,