《深入理解bootstrap》读书笔记:第二章 整体架…
2018-06-24 00:27:44来源:未知 阅读 ()
一. 整体架构
1. CSS-12栅格系统
2.基础布局组件
3.jQuery
4.响应式设计
5.css插件
6.js插件
二. 栅格系统
1.基本实现过程
如图,在<body class="container">内包含若干个<div class="col-md-“1-12数字”">col-md-“1-12数字”></div>效果是
2. 实现方案
(1)偏移(.col-尺寸大小-offset-*)
把整个col向右边偏移,在源码实现上,.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x;
1
|
< div class = "col-md-8 col-md-offset-2" >col-md8</ div > |
1
2
|
< div class = "col-md-8" >col-md8</ div > < div class = "col-md-3 col-md-offset-1" >col-md3</ div > |
(2)嵌套
栅格系统的col是可以针对父级的row进一步再进行百分比的划分,比如说:
1
2
3
4
5
6
7
8
9
10
11
|
< div class = "row" > < div class = "col-sm-12" >我是整行< br > < div class = "col-sm-6" >我是一半 < div class = "row" > < div class = "col-sm-6" >我是6/12*6/12=1/4</ div > </ div > </ div > < div class = "col-sm-6" ></ div > </ div > </ div > |
(3)排序
强行把当前列向左或者向右推拉
只有两个语句:col-尺寸大小-push-*()和col-尺寸大小-pull-*()
1
2
3
|
< div class = "row" > < div class = "col-sm-3 col-sm-push-6" style = "background: #abc" >col3</ div > </ 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
|
< div class = "col-sm-6 col-md-3" style = "background: #abc" >col3</ div > |
到了小屏,表现为1/2
1
|
< div class = "col-xs-3" style = "background: #abc" >col3</ div > |
到了大屏,依然占25%。
结论:屏幕尺寸向大兼容。向小肯定不兼容!
(2)清除浮动
情景:在小屏幕上一行显示4个col3,在超小屏幕上一行显示2个col6,代码如何实现?
代码应该是这样的
1
2
3
4
|
< div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > |
看起来也没问题。
如果把第一个div改为
1
|
< div class = "col-xs-6 col-sm-3" style = "background: #abc" >col< br >我胖了</ div > |
效果不佳。
这时应该加一个清除浮动的div到第2/3个div之间第四个就不会飘上去了
1
2
3
4
5
|
< div class = "col-xs-6 col-sm-3" style = "background: #abc" >col< br >我胖了</ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > < div class = "clearfix visible-xs" ></ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > < div class = "col-xs-6 col-sm-3" style = "background: #abc" >col</ div > |
class="clearfix visible-xs",前者表示清除浮动,后者表示在超小屏生效
(3)“强大”的偏移和排序——组合应用的demo
1
2
3
4
5
6
7
8
9
|
< div class = "row" > < div class = "col-sm-5 col-md-6" >.col-sm-5 .col-md-6</ div > < div class = "col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" >col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0 </ div > </ div > < div class = "row" > < div class = "col-sm-6 col-md-5 col-lg-6" >.col-sm-6 .col-md-5 .col-lg-6</ div > < div class = "col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lgoffset-0" >col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lgoffset-0</ div > </ div > |
布置类似这样的代码,可以很快实现不同设备宽度下的样式。
4.重复代码
作者认为bootstrap的代码重复率相当之高。
三.CSS组件架构的设计思想
作者把 bootstrap的CSS组件内容总结为8类
(1)基础样式
(2)颜色
(3)尺寸
(4)状态
(5)特殊元素
(6)并列元素
(7)嵌套元素
(8)动画样式
1
2
3
4
5
|
< div class = "progress progress-striped active" > < div class = "progress-bar" style = "width: 45%" > < span class = "sr-only" >45% Complete</ span > </ 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
|
<div class= "btn-group" > <button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" > 我的书籍 <span class= "caret" ></span> </button> <ul class= "dropdown-menu" > <li><a href= "#" >JavaScript编程精解</a></li> <li><a href= "#" >JavaScript设计模式</a></li> <li><a href= "#" >JavaScript启示录</a></li> <li class= "divider" ></li> <li><a href= "#" >深入理解Bootstrap3</a></li> </ul> </div> |
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
|
< ul class = "nav nav-tabs" id = "myTab" > < li class = "active" >< a data-toggle = "tab" href = "#home" >首页</ a ></ li > < li class = "" >< a data-toggle = "tab" href = "#profile" >个人资料</ a ></ li > < li class = "dropdown" > <!-- 单击"我的书籍"时,弹出下拉菜单 --> < a data-toggle = "dropdown" href = "#" class = "dropdown-toggle" > 我的书籍 < b class = "caret" ></ b > </ a > < ul class = "dropdown-menu" > < li >< a data-toggle = "tab" href = "#dropdown1" >JavaScript编程精解</ a ></ li > < li >< a data-toggle = "tab" href = "#dropdown2" >JavaScript设计模式</ a ></ li > < li >< a data-toggle = "tab" href = "#dropdown3" >JavaScript启示录</ a ></ li > < li >< a data-toggle = "tab" href = "#dropdown4" >深入理解Bootstrap</ a ></ li > </ ul > </ li > </ ul > < div class = "tab-content" id = "myTabContent" > < div id = "home" class = "tab-pane fade active in" > < p >单击"首页"时显示该区域</ p > </ div > < div id = "profile" class = "tab-pane fade" > < p >单击"个人资料"时显示该区域</ p > </ div > < div id = "dropdown1" class = "tab-pane fade" > < p >单击"JavaScript编程精解"时显示该区域</ p > </ div > < div id = "dropdown2" class = "tab-pane fade" > < p >单击"JavaScript设计模式"时显示该区域</ p > </ div > < div id = "dropdown3" class = "tab-pane fade" > < p >单击"JavaScript启示录"时显示该区域</ p > </ div > < div id = "dropdown4" class = "tab-pane fade" > < p >单击"深入理解Bootstrap3"时显示该区域</ p > </ div > </ div > |
2.JavaScript的实现步骤
3.通用技术
五.禁用响应式布局
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:用canvas绘制折线图
下一篇:页面重定向的几种方法
- HTML骨架 2020-06-10
- [书籍精读]《CSS世界》精读笔记分享 2020-05-17
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- [书籍精读]《Web前端黑客技术揭秘》精读笔记分享 2020-04-26
- 课程《HTML 入门与实战》学习笔记分享 2020-04-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash