如图，在
内包含若干个
把整个col向右边偏移，在源码实现上，.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x；
|
1
|
col-md8 |
|
1
2
|
col-md8 col-md3 |
栅格系统的col是可以针对父级的row进一步再进行百分比的划分，比如说：
|
1
2
3
4
5
6
7
8
9
10
11
|
我是整行
我是一半
我是6/12*6/12=1/4
|
强行把当前列向左或者向右推拉
只有两个语句：col-尺寸大小-push-*（）和col-尺寸大小-pull-*（）
|
1
2
3
|
col3
|
col3被强行推了6格。同理
效果相当于绝对定位。在源码实现上，也是做定位：
|
1
|
.col-md-pull-8 { right: 66.66666666666666%;}
|
看起来12列栅格布局实现得很死板，但是组合屏幕尺寸，方案就非常多了
比如我要为自己的网页做一适配小屏和中屏的版本，可以把类叠加到class上。
|
1
|
col3 |
到了小屏，表现为1/2
|
1
|
col3 |
到了大屏，依然占25%。
结论：屏幕尺寸向大兼容。向小肯定不兼容！
情景：在小屏幕上一行显示4个col3，在超小屏幕上一行显示2个col6，代码如何实现？
代码应该是这样的
|
1
2
3
4
|
col col col col |
看起来也没问题。
如果把第一个div改为
|
1
|
col 我胖了 |
效果不佳。
这时应该加一个清除浮动的div到第2/3个div之间第四个就不会飘上去了
|
1
2
3
4
5
|
col 我胖了 col col col |
|
1
2
3
4
5
6
7
8
9
|
.col-sm-5 .col-md-6 col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6 col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lgoffset-0 |
布置类似这样的代码，可以很快实现不同设备宽度下的样式。
作者认为bootstrap的代码重复率相当之高。
作者把 bootstrap的CSS组件内容总结为8类
|
1
2
3
4
5
|
45% Complete
|
|
1
2
3
4
|
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;/* 2秒过度40像素，无限循环 */
animation: progress-bar-stripes 2s linear infinite;/* 其他浏览器 */
}
|
最后，需要说明，顺序很重要。否则样式大乱套。
基本规则
（1）布局规则——基于元素自定义属性
（2）js实现步骤——向jQuery看齐
（3）可以是js声明，也可以是js调用
js会检测到html中相应的属性，自动绑定事件，而无需额外的js代码。
比如说
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
