1.补充:栅格系统中调整列的位置/顺序
(1)方法1:偏移量(col-*-offset-*)
(2)方法2:对列进行push/pull操作
col-lg-pull-1 ~ col-lg-pull-12
col-lg-push-1 ~ col-lg-push-12
col-md-pull-1 ~ col-md-pull-12
col-md-push-1 ~ col-md-push-12
col-sm-pull-1 ~ col-sm-pull-12
col-sm-push-1 ~ col-sm-push-12
col-xs-pull-1 ~ col-xs-pull-12
col-xs-push-1 ~ col-xs-push-12
提示:使用推拉操作对列修改列的顺序,可以对当前大小的屏幕以及更大的屏幕有效。
2.Bootstrap定制
定制方法:
(1)覆盖Bootstrap提供的默认样式:编写自己的CSS样式文件,放在bootstrap.css后面。问题:样式覆盖、影响渲染速度、覆盖不容易实现
(2)直接修改bootstrap.css文件。问题:修改效率太低
(3)直接修改bootstrap.css的源代码——bootstrap.less——推荐方式
3.动态样式语言
浏览器默认只能识别CSS这一门样式语言!
但CSS作为一门语言并不称职——没有变量、循环选择、函数...等最基本的特征都不具备——CSS称为“静态样式语言”。
动态样式语言:为CSS添加变量、循环选择、函数...等高级特性!注意:所有的动态样式语言语法默认都不被浏览器支持,必须转换/编译为CSS静态样式语言。
常见的动态样式语言:
(1)Sass / SCSS:最早期的样式语言 .sass/.scss
(2)Stylus:功能强大,语法与CSS相差较大 .styl
(3)LESS:较新,语法与CSS最接近 .less
4.LESS动态样式语言的使用方法
(1)客户端使用LESS——效率低——了解
让客户端下载less源文件,以及一个less语法转换程序——less.js
<link rel="stylesheet/less" href="css/2.less"/>
<script src="js/less.min.js"></script>
(2)服务器端使用LESS——效率高——掌握!
程序员在开发时编写.less源文件,并在自己的电脑上安装一款less语言转换程序,把.less=>.css;在HTML中直接使用.css即可。步骤:
1)安装node——服务器端JS解释器——保证命令行中可以运行node.exe
2)下载lessc编译程序——一个运行在服务器端的JS程序
3)//使用node运行lessc文件
把lessc转换程序配置为WebStorm中的一个FileWatcher,只要用户编写了一个.less文件,ws会自动的调用less转换程序,编译出.css文件。
5.LESS动态样式语言语法
(1)less文件支持所有的css语法
(2)less文件可以编写单行/多行注释,只有多行注释会出现在css文件中
(3)声明变量,实现“一改百改”,格式:
@变量名: 值;
(4)混入/混合(mixin)
.class1 { }
.class2 {
xx: yy;
.class1; //在一个样式中引用另一个样式
}
(5)带参混入/混合
.class1(@var1, @var2) { color: @var1; ... }
.class2 {
.class1(#aaa, 4px);
}
(6)样式的嵌套
.class1 {
xx: yy;
.class2 {
aa: bb;
}
}
.class1: { xx: yy; }
.class1 .class { aa: bb; }
(7)可以执行数学运算
(8)LESS语言预定义了若干函数
image-width('url')
image-height('url')
rgba() //构建一个rgb颜色值
hsl() //构建一个色相/饱和度/亮度颜色值
darken(@color, 百分比) 将指定的颜色变暗指定的百分比
lighten(@color, 百分比) 将指定的颜色变亮指定的百分比
作业:
(1)完成Intel首页的布局!!
(2)看Bootstrap的LESS源代码,熟悉文件和目录结构。
爱卡(深圳)管理有限公司
分享每一刻精彩
微信:iCafeYOJOY
微博:http://weibo.com/iCafeYOJOY
官网:www.icafe.im