栅格系统列顺序调整与Bootstrap定制方法.pdfVIP

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.s——推荐方式

3.动态样式语言

浏览器默认只能识别CSS这一门样式语言！

但CSS作为一门语言并不称职——没有变量、循环选择、函数...等最基本的特征都不具备——CSS称为

“静态样式语言”。

动态样式语言：为CSS添加变量、循环选择、函数...等高级特性！注意：所有的动态样式语言语法默认

都不被浏览器支持，必须转换/编译为CSS静态样式语言。

常见的动态样式语言：

(1)Sass/SCSS：最早期的样式语言.sass/.scss

(2)Stylus：功能强大，语法与CSS相差较大.styl

(3)S：较新，语法与CSS最接近.s

4.S动态样式语言的使用方法

(1)客户端使用S——效率低——了解

让客户端s源文件，以及一个s语法转换程序——s.js

linkrel=styheet/shref=css/2.s/

scriptsrc=js/s.min.js/script

(2)服务器端使用S——效率高——掌握！

1.免费:根格列/序列

(1)方法一：offset(col‑*‑offset‑*)

(2)方法二：推/拉操作

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~