《深切驾驭bootstrap》读书笔记:第二章 全部架构,架构

[Bootstrap]7天深入Bootstrap(2)整体架构,bootstrap架构

大多数Bootstrap的使用者都认为Bootstrap只提供了CSS组件
和JavaScript插件,其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已,它们都是构建在基础平台之上的。

 

本节目录:

  • 整体架构
  • 栅格系统
  • CSS组件架构
  • JS插件架构
  • 禁用响应式布局

 

整体架构

图片 1

12栅格系统

  这是整个bs最核心的功能,也是响应式设计核 心理念的一个实现形式。

基础布局组件

  bs提供了多种基础布局组 件,比如排版、代码、表格、按钮、表单等

jQuery

  bs所有的JavaScript插件都依赖于jQuery1.10+,如果
要使用这些插件,那就必须引用jQuery库。

响应式设计

  响应式设计是一个理念,而非功能,bs的所有内容,都是以响应式设计为设计理念来实现的。

CSS组件

  bs众多的组件,让其使用起来非常方便,CSS和JavaScript插件中间有5个箭头,表示这5个相关的组件(插件)是有直接关系的。

JavaScript插件

  通过js插件,可以实现更复杂的页面逻辑。

 

栅格系统

实现原理

栅格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询,就制作出了强大的响应式的栅格系统。

 

用法

 

响应式栅格

在bs的栅格系统中,根据宽度将浏览器分为4种。其值分别是:自动(100%)、750px、970px、
1170px。

对应的样式为超小(xs)、小型(sm)、中型屏幕 (md)、大型 (lg)

本质通过媒体查询定义最小宽度实现。所以,向大兼容,向小不兼容!

 

列偏移

栅格系统的列偏移(offset)功能不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。

本质通过margin-left就实现出这个效果。

 

列排序

列排序(push与pull)其实就是改变列的方向,也就是改变左右浮动,并且设置浮动的距离。

通过push推和pull拉,本质通过left和right来改变位置。

 

CSS组件架构

AO模式:A表示Append,即“附加”的意思;O表示Overwrite,即“重写”的意思。

图片 2

基础样式

  任何一个CSS组件在刚开始都要先定义基本样式。通过基础样式来定义统一的字号、背景色。

 

颜色样式

5种基本颜色分别是:primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)。

定义颜色与组件的特性有关,面板panel就只需要定义边框的颜色就可以了,而按钮不仅需要定义边框颜色,还需要定义背景色以及文本颜色。

 

尺寸样式

有4种基本尺寸:超小(xs)、小型(sm)、普通、大型(lg)。 

 

状态样式

高亮可用的时候用active样式,禁用的时候用disabled样式

这种类型的样式一般是处理元素的阴影、鼠标形状、透明
度、虚框等方面的内容。

 

特殊元素样式 并列元素 嵌套子元素

所谓特殊元素,即特定类型的组件一般只使用某一种或者几种固定的元素。

比如alert警告框内一般只用警告标题、内容和关闭链接元素,再如导航(nav)里的经常用的li元素。

 

动画样式

在bs里,动画样式应用得不是很多,只在进度条组件里会使用到。(这里不包括bs的trans插件)

只需要在progress样式上应 用一个active样式,即可开启动画过渡效果。

 

JS插件架构

HTML布局规则

默认情况下,所有的插件都可以通过设置特定的HTML代码和
相应的属性(或自定义属性)来实现。

如:data-dismiss=”alert”,data-toggle=”dropdown”,data-toggle=”tab” 

本质实现方式大致如下

        // alert插件类及原型方法的定义 
        // 定义选择器,所有符合该自定义属性的元素都可以触发下面的事件
        var dismiss = '[data-dismiss="alert"]';
        var Alert = function (el) {
            // 传入元素,如果元素内部有dismiss上设置的自定义属性,则click事件会触发原型上的close方法
            $(el).on('click', dismiss, this.close);
        }
        Alert.prototype.close = function (e) {
            //todo close
        }

 

实现

 

自定义事件

所有的事件都是命名空间化的,即单个事件都要放在某个命名空间下,比如,show.bs.modal。

所有的插件都提供了preventDefault功能,用于阻止继续执行后续的代码,比如,

$('#myModal').on('show.bs.modal', function (e) {   
 if (!data) return e.preventDefault()        // 拒绝显示弹窗 
})

 

 

禁用响应式布局

Bootstrap是一个移动先行的框架,默认情况下,针对不同的屏幕尺寸,会自动地调整页面,使其在不同尺寸的屏幕上都表现得很好。

 

禁用步骤

 

本节地址:

大多数Bootstrap的使用者都认为Bootstrap只提供了CSS组件
和JavaScript插件,其实CSS组件和JavaSc…

《深入理解bootstrap》读书笔记:第二章 整体架构,架构

 

一.  整体架构

图片 3  

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个不同的屏幕
图片 4  

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

图片 5

小结: 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>

图片 6  
情景二:宽度足够的情况下,我不想所有的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>

图片 7

 

(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>

图片 8

(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>

图片 9

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列栅格布局实现得很死板,但是组合屏幕尺寸,方案就非常多了

图片 10

(1)跨设备组合

比如我要为自己的网页做一适配小屏和中屏的版本,可以把类叠加到class上。

1 <div class="col-sm-6 col-md-3" style="background: #abc">col3</div>

在中屏表现是1/4。
图片 11

到了小屏,表现为1/2

图片 12

如果我定义一个

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>

效果不佳。

图片 13

这时应该加一个清除浮动的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>

 

图片 14

 

所谓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类

图片 15

(1)基础样式

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

(2)颜色

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

图片 17  
定义动画主要是指定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>

  图片 18  

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>

图片 19

 2.JavaScript的实现步骤

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

3.通用技术

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

五.禁用响应式布局

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

来自为知笔记(Wiz)

整体架构,架构 一. 整体架构 1. CSS-12栅格系统
把网页宽度均分为12等分(保留15位精度)这是boots…

相关文章