Bootstrap4

CSS学习, 面试题 本文总阅读量次

安装使用

  • 可使用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源文件 修改变量
CSS学习, 面试题