1、less的继承:
&:extend(.father);//继承father里面的样式
- //选择器
- #test{
- &:extend(.father);//继承father里面的样式
- }
- //选择器
- #test:(.father){
-
- };//继承father里面的样式
继承实质上将.father选择器和#test组合成一个选择器,声明使用.father的
all:继承所有的.father相关的声明块
切记父类不能定义成混合(继承不灵活性能高因为文件小 混合灵活小)
2、less的避免编译
使用:~"不会被编译的内容"
变量在less属于块级作用域,变量延迟加载
3、bootstrap栅格系统 于源码分析
流体容器:width=auto padding是向内展开 如果是100%就是padding向外延申
两侧15px padding
固体容器: 阈值分四种 xs{<768 }w=auto
sm{768<=} 如果不存在md ,sm<=992就会不存在w=720+槽宽
md{992<=} w=740+槽宽
lg{1200<=}w=1140+槽宽
两侧15px padding
行 两侧-15px margin
列
公共样式
两侧有15px的padding
float:所以前面会存在清除浮动的
width :1~12
left 蓝色的通常叫做列排序
right:0~12
magin-left:0~12 列偏移 实现居中
- <div class="container">
- <div class="row">
- col-lg-offset-4控制margin-left 可以实现居中
- <div class="col-lg-4 col-lg-offset-4">col-lg-4div>
- div>
- div>
4、列排序
注意阈值上样式的设置不能跳跃