欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-16 17:05:09
...

一. 整体架构

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

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个不同的屏幕
《深入理解bootstrap》读书笔记:第二章 整体架构

如图,在

内包含若干个
col-md-“1-12数字”>
效果是

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

小结: 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-md8div>
《深入理解bootstrap》读书笔记:第二章 整体架构
情景二:宽度足够的情况下,我不想所有的col紧紧挨在一起。两个要有1个col的距离。
1
2
div class="col-md-8">col-md8div>
div class="col-md-3 col-md-offset-1">col-md3div>
《深入理解bootstrap》读书笔记:第二章 整体架构

(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/4div>
div>
div>
div class="col-sm-6">div>
div>
div>

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

(3)排序

强行把当前列向左或者向右推拉

只有两个语句:col-尺寸大小-push-*()和col-尺寸大小-pull-*()

1
2
3
div class="row">
div class="col-sm-3 col-sm-push-6" style="background: #abc">col3div>
div>

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

col3被强行推了6格。同理div class="col-sm-3 col-sm-pull-1" style="background: #abc">col3div>是向左拉了一格。

效果相当于绝对定位。在源码实现上,也是做定位:

1
.col-md-pull-8 { right: 66.66666666666666%;}

3.响应式栅格若干问题

看起来12列栅格布局实现得很死板,但是组合屏幕尺寸,方案就非常多了

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

(1)跨设备组合

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

1
div class="col-sm-6 col-md-3" style="background: #abc">col3div>
在中屏表现是1/4。
《深入理解bootstrap》读书笔记:第二章 整体架构

到了小屏,表现为1/2

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

如果我定义一个
1
div class="col-xs-3" style="background: #abc">col3div>

到了大屏,依然占25%。

结论:屏幕尺寸向大兼容。向小肯定不兼容!

(2)清除浮动

情景:在小屏幕上一行显示4个col3,在超小屏幕上一行显示2个col6,代码如何实现?

代码应该是这样的

1
2
3
4
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>

看起来也没问题。

如果把第一个div改为

1
div class="col-xs-6 col-sm-3" style="background: #abc">colbr>我胖了div>

效果不佳。

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

这时应该加一个清除浮动的div到第2/3个div之间第四个就不会飘上去了

1
2
3
4
5
div class="col-xs-6 col-sm-3" style="background: #abc">colbr>我胖了div>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>
div class="clearfix visible-xs">div>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>
div class="col-xs-6 col-sm-3" style="background: #abc">coldiv>

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

所谓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-6div>
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-6div>
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-0div>
div>

布置类似这样的代码,可以很快实现不同设备宽度下的样式。

4.重复代码

作者认为bootstrap的代码重复率相当之高。

三.CSS组件架构的设计思想

作者把 bootstrap的CSS组件内容总结为8类

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

(1)基础样式

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

(2)颜色

包括5中最基本的颜色
如果在Bootstrap官方网站看过btn按钮或者alert警告框的样例,你会发现,Bootstrap默认为很多组件都提供了5种颜色的样式,这5种颜色分别是:primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)。定义规则是:组件名称-颜色类型,如btn-primary、alert-info。以按钮(btn为例)
《深入理解bootstrap》读书笔记:第二章 整体架构
也就是说根据组件特性来定义颜色信息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% Completespan>
div>
div>
《深入理解bootstrap》读书笔记:第二章 整体架构
定义动画主要是指定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
"btn-group">
我的书籍
"caret">
    "dropdown-menu">
  • "divider">
  • 《深入理解bootstrap》读书笔记:第二章 整体架构
    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">深入理解Bootstrapa>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>
    微信
  • 《深入理解bootstrap》读书笔记:第二章 整体架构

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 《深入理解bootstrap》读书笔记:第二章 整体架构
  • 专题推荐

    作者信息
    《深入理解bootstrap》读书笔记:第二章 整体架构

    认证0级讲师

    推荐视频教程
  • 《深入理解bootstrap》读书笔记:第二章 整体架构javascript初级视频教程
  • 《深入理解bootstrap》读书笔记:第二章 整体架构jquery 基础视频教程
  • 视频教程分类