CSS中面向对象的概念

分离结构和皮肤（按目标功能分类）

容器与内容分离

把CSS的修饰任务编程分解为互不影响的多步修饰任务以利于复用和维护。

好处：加载速度快、重复更少样式、维护相对简单

关键：创建一个组件库、独立的容器和内容

SMA

核心：（以模块结构为基础、以修饰功能作为分割的功能）

Base（基础样式）针对某一类元素的通用固定样式

layout（布局）|Module（模块）|State（状态）|Theme（主题）

BEM(Block、Element、Modifier)

以块元素和修饰符为分割标准，层次性的裂解修饰任务

前端框架（BootStrap）

1.什么是Bootstrap

一种前端框架

UI框架（Bootstrap|layUI|elementUI|Mint|MIUI）

dom封装框架：$=(document.getElementById)

​ jquery

前端MVC框架

Vue |.Net |angulaJS| React

2.为什么要用bootstrap

使用框架解决浏览器兼容问题

设备兼容（移动应用优先）

强悍的栅格布局

响应式布局（view port meidia query）

强大的组件

3.怎么用

引入基本类库

CSS文件（bootstrap.css），JS文件（bootstrap.js、jquery.js）

栅格系统

div在容器（container-fluid(全屏)|container(非全屏)

注：

Bootstrap核心为类，可用类完成任何操作！！！！！

隐藏元素

d-none: 无条件隐藏
d-sm-none: 设备尺寸大于等于sm时隐藏
d-md-none: 设备尺寸大于等于md时隐藏
d-lg-none: 设备尺寸大于等于lg时隐藏
d-xl-none: 设备尺寸大于等于xl时隐藏

显示元素

d-sm-block: 设备尺寸大于等于sm时显示
d-md-block: 设备尺寸大于等于md时显示
d-lg-block: 设备尺寸大于等于lg时显示
d-xl-block: 设备尺寸大于等于xl时显示

组合

d-none d-sm-block: 设备尺寸小于sm时隐藏
d-none d-md-block: 设备尺寸小于md时隐藏
d-none d-lg-block: 设备尺寸小于lg时隐藏
d-none d-xl-block: 设备尺寸小于xl时隐藏

总结

设备查询默认是向上的，例如d-sm-block，表示当设备在sm、md、lg、xl尺寸下都显示
没有d-xs-* 因为当*为block时无条件显示，当*为none时无条件隐藏，效果不好
可用于响应式布局

模板网站：

https://bootswatch.com/

https://www.runoob.com/bootstrap/