CSS：Less基础、Bootstrap前端开发框架
一、Less基础
1、less介绍
中文网站: http://lesscss.cn/
定义: Less(Leaner Style Sheets的缩写)是一门CSS扩展语言，也称为CSS预处理器（Less是一门CSS预处理语言，它扩展了CSS的动态特性）
原理: 作为CSS的一种形式的扩展，它没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
功能: 它在CSS语法基础之上，引入了变量，Mixin(混入)、运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称那样，less可以让我们用更少的代码做更多的事情
常见的CSS预处理器: Sass、Less、Stylus
2、less使用
编写方法: 首先新建一个后缀名为less的文件，在这个less文件里面书写less语句
3、less变量
定义: 变量是指没有固定的值，可以改变的。
语法: @变量名: 值;
示例: @color：#ffffff;
注意变量命名规范:
a，必须有@为前缀
b，不能包含特殊字符
c，不能以数字开头
d，大小写敏感
编译插件: Easy Less (可通过vscode插件库直接获取)
4、less嵌套
特点:
1、子元素的样式直接写到父元素里面
2、如果有伪类、交集选择器、伪元素选择器,我们内层选择器的前面需要加&
5、less运算
定义: 任何数字、颜色或者变量都可以参与运算,就是Less提供了加减乘除等算术运算
注意:
a、 乘号(*)和除号(/)的写法
b、运算符中见左右有个空格隔开(示例: @new-color: @color + 1)
c、对于两个不同的单位的值之间的运算,运算结果的值选取第一个值的单位
d、如果两个值之间只有一个值有单位,则运算结果就取该单位
6、less导入文件
语法: @import "xxxx.less"/ import url('xxxx.less')
二、Bootstrap前端开发框架
1、简介
Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得Web开发更加快捷
官网：https://www.bootcss.com/
框架: 顾名思义就是一套架构，他有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点:
a, 标准化的html+css编码规范
b, 提供了一套简洁、直观、强悍的组件
c, 有自己的生态圈，不断地更新迭代
d, 让开发更简单，提高了开发的效率
版本:
· 2.x.x: 停止维护，兼容性好，代码不够简洁，功能不够完善
· 3.x.x：目前使用最多，稳定，但是放弃了IE6.7. 对IE8支持但是界面效果不好，偏向于开发响应式布局，移动端设备优先的web项目
· 4.x.x: 最新版，目前还不是很流行
2、使用
定义: 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
使用四步曲: 1、创建文件夹结构 2、创建html骨架架构 3、引入相关样式文件 4、书写内容
3、布局容器
定义: Bootstrap需要为页面内容和栅格系统包裹一个.container容器， Bootstrap预先定义好了这个类，叫.container.
4、栅格系统
简介: 栅格系统英文为'grid systems'， 也有人翻译为'网格系统'。它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局、
Bootstrap提供了一套响应式、移动设备有限的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列
4.1 栅格选项参数
定义: 栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
注意:
a，如果子元素的份数相加小于12,则占不满整个container的宽度，会有空白
b, 如果子元素的份数相加大于12,则多余的那一列会另起一行显示
4.2 列嵌套
定义: 栅格系统将内容再次嵌套，简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列的.col-sm-*元素到已经存在的.col-sm-*元素内
4.3 列偏移
定义: 使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)
4.5 列排列
定义: 通过使用.col-md-push-*和.col-md-pull-*类就可以很容易地改变列(column)的顺序
4.6 响应式工具
定义: 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便地针对不同设备展示或隐藏页面内容