移动web第七天

less

专业术语 css预处理器

less只是其中一种 还有scss和stylus等等

作用

提高我们编写css效率的工具

浏览器不能直接识别less文件 依靠编译工具将less文件编译成css文件

语法

变量

1.定义变量

@xxx：变量值；

2.使用变量

选择器{属性：属性值；}

运算

加减乘除**（除法运算 需要加小括号）**

混合mixin

把一堆代码封装到一起方便使用

1.定义混合

.xxx(@y,@z){

属性a: @y

属性b: @z

属性：属性值}

2.使用

标签名{

.xxx(@y属性值，@z属性值)

}

嵌套

注：伪类选择器前需要添加&

响应式

是什么

一套代码，可以实现pc端和移动端的布局，并且体验都不错

实现原理

实现原理是 媒体查询 可以根据屏幕的宽度或者高度的不同，去使用对应的css代码

bootstrap

响应式布局的UI框架

栅格系统

实现响应式布局的核心技术

媒体查询+浮动

划分了4种宽度不同的屏幕

1.大屏幕>1200px --lg

2.中等屏幕992-1200px --md

3.小屏幕768-992px --sm

4.极小屏幕<768px --xs

步骤

1.先写版心

container（版心居中）

container-fluid（全屏）

2.写行 .row

3.写栅格

​ 分析出来当前要在什么屏幕下

​ 每一列站几份

3月24日bootstrap相关补充

1.导航条

2.轮播图

3.辅助类名

text-center

pull-left

。。。。。。更多相关类名可在bootstrap网站查看 v3.bootcss.com/

\