一.  整体架构

 

1. CSS-12栅格系统

把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能。

2.基础布局组件

包括排版、按钮、表格、布局、表单等等。

3.jQuery

bootstrap插件的基础

4.响应式设计

兼容多个终端。这是bootstrap的终极理念。

5.css插件

提供丰富的样式。

6.js插件

二. 栅格系统

1.基本实现过程

定义容器的大小——跳转边距——媒询
有以下要求:
(1)一行(row)数据必须包含在.container中。
.container默认居中。宽度分为4种,超小屏(100%),小屏(750px),中屏(970px),大屏(1170px)。row的边距(左右margin,下同)是-15px。
(2)有了row,才能搭建列(col)。所有组件必须放在col内,只有col才能作为row的直接子元素。
.col的左右内边距(padding-left,right)为15px。也就是说,最小的col有30px。
(3)在以上基础上快速搭建布局
(4)col之间是木有边距的,应当使用padding来产生col的视觉距离。这样做会导致一个row容不下12个col,这时应当用负的margin来抵消padding的影响。
(5)栅格系统是通过指定1-12的值来设定范围的。对于col的规格,开发者指定了4个不同的屏幕

 

如图,在<body class="container">内包含若干个<div class="col-md-“1-12数字”">col-md-“1-12数字”></div>效果是

小结: col组合其实就用了两个属性:float:left和width%。
 

2. 实现方案

(1)偏移(.col-尺寸大小-offset-*)

把整个col向右边偏移,在源码实现上,.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x;

情景一:页面主体只占据container的66%,而且居中。
解决方案:col-md-offset-2——向右偏移了2个col。
1
<div class="col-md-8 col-md-offset-2">col-md8</div>

 
情景二:宽度足够的情况下,我不想所有的col紧紧挨在一起。两个要有1个col的距离。
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/4。

到了小屏,表现为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)基础样式

包括字体、内外边距,display方式,边框等。

(2)颜色

包括5中最基本的颜色
如果在Bootstrap官方网站看过btn按钮或者alert警告框的样例,你会发现,Bootstrap默认为很多组件都提供了5种颜色的样式,这5种颜色分别是:primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)。定义规则是:组件名称-颜色类型,如btn-primary、alert-info。以按钮(btn为例)

 也就是说根据组件特性来定义颜色信息1.

(3)尺寸

一般组件都有对应屏幕的4种尺寸,表示方式为:组件-尺寸,比如btn-lg、well-sm等等
实现方式为padding、圆角,行距及字体大小

(4)状态

涉及到阴影、透明度、虚框等

(5)特殊元素
(6)并列元素
(7)嵌套元素
(8)动画样式

主要用在进度条,在progress样式基础上再加一个active
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>

 
定义动画主要是指定animattion和动画时间。
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调用

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的实现步骤

函数声明后马上调用——面向对象的方法——jQuery的插件改进重构——防止冲突处理——绑定事件
 

3.通用技术

可以通过禁用命名空间的方式禁用插件的默认行为
 

五.禁用响应式布局

删除媒询、为.container定宽,用col-xs-*替代sm,md和lg。
 
【后记】
本章也许是全书最有价值的一章。主要阐述bootstrap的设计思想。只读一遍估计是通透不了的。往后即便不用此框架,根据bootstrap的设计思想做一个简单的css库还是可行的。
 
 
 
 
 
 

《深入理解bootstrap》读书笔记:第二章 整体架构的更多相关文章

  1. 深入理解bootstrap框架之第二章整体架构

    标注下,正好最近关注前段框架 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3 ...

  2. STL源码分析读书笔记--第二章--空间配置器(allocator)

    声明:侯捷先生的STL源码剖析第二章个人感觉讲得蛮乱的,而且跟第三章有关,建议看完第三章再看第二章,网上有人上传了一篇读书笔记,觉得这个读书笔记的内容和编排还不错,我的这篇总结基本就延续了该读书笔记的 ...

  3. 《C++ Primer》读书笔记—第二章 变量和基本类型

    声明: 文中内容收集整理自<C++ Primer 中文版 (第5版)>,版权归原书所有. 学习一门程序设计语言最好的方法就是练习编程. 1.8比特的char类型计算机表示的实际范围是-12 ...

  4. Getting Started With Hazelcast 读书笔记(第二章、第三章)

    第二章 起步 本章就相当简单粗暴了,用一个个例子说明hazelcast怎么用. 1.map,set,list这些集合类都是开箱即用的,只要从Hazelcast的实例中获取一份就行. 2.增加了Mult ...

  5. Java Concurrency in Practice 读书笔记 第二章

    第二章的思维导图(代码迟点补上):

  6. Spring 3.x 实践 第一个例子(Spring 3.x 企业应用开发实战读书笔记第二章)

    前言:工作之后一直在搞android,现在需要更多和后台的人员交涉,技术栈不一样,难免鸡同鸭讲,所以稍稍学习下. 这个例子取自于<Spring 3.x 企业应用开发实战>一书中的第二章,I ...

  7. javascript 数据结构和算法读书笔记 > 第二章 数组

    这章主要讲解了数组的工作原理和其适用场景. 定义: 一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量. javascript数组的特殊之处: jav ...

  8. [Effective Java 读书笔记] 第二章 创建和销毁对象 第一条

    第二章  创建和销毁对象 第一条 使用静态工厂方法替代构造器,原因: 静态工厂方法可以有不同的名字,也就是说,构造器只能通过参数的不同来区分不同的目的,静态工厂在名字上就能表达不同的目的 静态工厂方法 ...

  9. 《深入理解java虚拟机》读书笔记-第二章Java内存区域和内存溢出异常

    java1.7和java8的jvm存在差异,本文先按照<深入理解java虚拟机>的讲解内容总结,并将java8的改变作为附录放在文末 一丶运行时数据区域 ​ 图:java虚拟机运行时数据区 ...

随机推荐

  1. javaScript生成二维码(支持中文,生成logo)

    资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...

  2. Java学习笔记(二)不定时更新

    Java语言画图 package cn.witksy.dev; import javax.imageio.ImageIO; import java.awt.*; import java.awt.ima ...

  3. iOS之UI--辉光动画

    前言:学习来自YouXianMing老师的博客:<辉光UIView的category>以及YouXianMing老师的github源码:< GlowView >    而我个人 ...

  4. ld can't link with a main executable file for architecture armv7

    在iPhone 6 Plus上跑的时候遇到了这么一个错误:ld can't link with a main executable file for architecture armv7,然后就各种改 ...

  5. mysql的perror

    eg: 执行:perror 1064 返回:MySQL error code 1064 (ER_PARSE_ERROR): %s near '%-.80s' at line %d           ...

  6. 写一个方法,用于解读 url 后面的请求参数,最终得到 {"a":2,"b":3,"c":4};

    function getUrlParams(url){ let searchParam = url.split("?")[1]; let searchItemParams = se ...

  7. JMeter实现Oracle参数化(1)

    http://www.ithao123.cn/content-10469577.html

  8. 搭建好lamp,部署owncloud。

    先上传两个文件 上传到root目录 上传到opt目录下 #mkdir /opt/dvd1 #mount /dev/sr0 /opt/dvd1 #cd /etc/yum.repos.d/ #vi dvd ...

  9. 雷林鹏分享:Ruby 异常

    Ruby 异常 异常和执行总是被联系在一起.如果您打开一个不存在的文件,且没有恰当地处理这种情况,那么您的程序则被认为是低质量的. 如果异常发生,则程序停止.异常用于处理各种类型的错误,这些错误可能在 ...

  10. 生物信息学——RNA的剪切过程

    生物信息学——RNA的剪切过程   外显子(exon expressed region)是真核生物基因的一部分,它在剪接(Splicing)后仍会被保存下来,并可在蛋白质生物合成过程中被表达为蛋白质. ...