《深入理解bootstrap》读书笔记:第二章 整体架构
一. 整体架构
1. CSS-12栅格系统
2.基础布局组件
3.jQuery
4.响应式设计
5.css插件
6.js插件
二. 栅格系统
1.基本实现过程
如图,在
内包含若干个2. 实现方案
(1)偏移(.col-尺寸大小-offset-*)
把整个col向右边偏移,在源码实现上,.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x;
1
|
|
1
2
|
|
(2)嵌套
栅格系统的col是可以针对父级的row进一步再进行百分比的划分,比如说:
1
2
3
4
5
6
7
8
9
10
11
|
div >
div >
div >
div >
|
(3)排序
强行把当前列向左或者向右推拉
只有两个语句:col-尺寸大小-push-*()和col-尺寸大小-pull-*()
1
2
3
|
div >
|
col3被强行推了6格。同理div
class
=
"col-sm-3 col-sm-pull-1"
style
=
"background: #abc"
>col3
div
>是向左拉了一格。
效果相当于绝对定位。在源码实现上,也是做定位:
1
|
.col-md-pull -8 { right : 66.66666666666666% ;}
|
3.响应式栅格若干问题
看起来12列栅格布局实现得很死板,但是组合屏幕尺寸,方案就非常多了
(1)跨设备组合
比如我要为自己的网页做一适配小屏和中屏的版本,可以把类叠加到class上。
1
|
|
到了小屏,表现为1/2
1
|
|
到了大屏,依然占25%。
结论:屏幕尺寸向大兼容。向小肯定不兼容!
(2)清除浮动
情景:在小屏幕上一行显示4个col3,在超小屏幕上一行显示2个col6,代码如何实现?
代码应该是这样的
1
2
3
4
|
|
看起来也没问题。
如果把第一个div改为
1
|
|
效果不佳。
这时应该加一个清除浮动的div到第2/3个div之间第四个就不会飘上去了
1
2
3
4
5
|
|
class="clearfix visible-xs",前者表示清除浮动,后者表示在超小屏生效
(3)“强大”的偏移和排序——组合应用的demo
1
2
3
4
5
6
7
8
9
|
div >
div >
div >
|
布置类似这样的代码,可以很快实现不同设备宽度下的样式。
4.重复代码
作者认为bootstrap的代码重复率相当之高。
三.CSS组件架构的设计思想
作者把 bootstrap的CSS组件内容总结为8类
(1)基础样式
(2)颜色
(3)尺寸
(4)状态
(5)特殊元素
(6)并列元素
(7)嵌套元素
(8)动画样式
1
2
3
4
5
|
div >
div >
|
1
2
3
4
|
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2 s linear infinite; /* 2秒过度40像素,无限循环 */
animation: progress-bar-stripes 2 s linear infinite; /* 其他浏览器 */
} |
最后,需要说明,顺序很重要。否则样式大乱套。
四.插件架构
基本规则
(1)布局规则——基于元素自定义属性
(2)js实现步骤——向jQuery看齐
(3)可以是js声明,也可以是js调用
1.布局规则:
js会检测到html中相应的属性,自动绑定事件,而无需额外的js代码。
比如说
1
2
3
4
5
6
7
8
9
10
11
12
13
|
|
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
|
我的书籍
a >
ul >
li >
ul >
div >
div >
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。 相关文章 相关视频 专题推荐
|
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论