当前位置：Gxlcms > html代码 > 《深入理解bootstrap》读书笔记：第二章整体架构

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

时间：2021-07-01 10:21:17 帮助过：21人阅读

一. 整体架构

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

如图，在内包含若干个

col-md-“1-12数字”>

效果是

小结： 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。

<div class="col-md-8 col-md-offset-2">col-md8div>

情景二：宽度足够的情况下，我不想所有的col紧紧挨在一起。两个要有1个col的距离。

<div class="col-md-8">col-md8div>
<div class="col-md-3 col-md-offset-1">col-md3div>

（2）嵌套

栅格系统的col是可以针对父级的row进一步再进行百分比的划分，比如说：

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

（3）排序

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

只有两个语句：col-尺寸大小-push-*（）和col-尺寸大小-pull-*（）

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

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


（1）跨设备组合
比如我要为自己的网页做一适配小屏和中屏的版本，可以把类叠加到class上。







1



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









在中屏表现是1/4。

到了小屏，表现为1/2

如果我定义一个








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









 

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


（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% Completespan>

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



"btn-group">
    

        我的书籍 
    "caret">

    
    "dropdown-menu">

        "#">JavaScript编程精解

        "#">JavaScript设计模式

        "#">JavaScript启示录

        "divider">

        "#">深入理解Bootstrap3

    









 

 








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>


                        
                            
                                < 上一篇
canvas游戏之贪食蛇
                            
                            
                                 下一篇 >
Dom探索之基础详解
                            
                        
                    
                    
                    
                    
                    
                

              
                    
                
                  

                    
                        人气教程排行
                    
                    
			
                        
						
 
                                
                                    230次
                                    1
                                   如何生成一个调查问卷_html/css_WEB-ITnose                                
                            
							  								  														  
                                
                                    230次
                                    2
                                   在页面直接显示日历_html/css_WEB-ITnose                                
                            
								  														  								  
                                
                                    230次
                                    3
                                   如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作                                
                            
														  								  							
                                
                                    229次
                                    4
                                   关于列表标记的详细介绍                                
                            
							  								  							
                                
                                    229次
                                    5
                                   cssborder-bottom（指定下边线的样式、宽度及颜色）                                
                            
							  								  							
                                
                                    229次
                                    6
                                   html新闻详情页_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    229次
                                    7
                                   为何页面内容和网页边缘有空隙_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    228次
                                    8
                                   position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    227次
                                    9
                                   htmlp标签怎么换行？htmlp标签添加br换行标签的应用                                
                            
							  								  							
                                
                                    226次
                                    10
                                   HTML的<!DOCTYPE>标签                                
                            
							  								  							
                                
                                    226次
                                    11
                                   html页面中友情链接怎么进行添加设置？（代码示例）                                
                            
							  								  							
                                
                                    226次
                                    12
                                   form表单中属性及功能应用介绍汇总                                
                            
							  								  							
                                
                                    226次
                                    13
                                   详解form标签中的method属性                                
                            
							  								  							
                                
                                    226次
                                    14
                                   HTML5Canvas逼真烟雾效果js插件                                
                            
							  								  							
                                
                                    226次
                                    15
                                   页面跳转特效_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    226次
                                    16
                                   改变鼠标选中区域的样式。_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    225次
                                    17
                                   关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    225次
                                    18
                                   CSS3悬浮动画效果_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    225次
                                    19
                                   纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose                                
                            
							  								  							
                                
                                    225次
                                    20
                                   body在默认情况下是具有margin外边距的_html/css_WEB-ITnose                                
                            

                        
                    
                
            
            
        
    
  


   本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！


 



登录

 










                 
                
                
                
                记住我的登录                            
        忘记密码？ 
  登录 
  




  
    
    
    
  
   
  
    
    
  
    
      
      我已阅读用户协议及版权声明
  
  
注册

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

一. 整体架构

1. CSS-12栅格系统

2.基础布局组件

3.jQuery

4.响应式设计

5.css插件

6.js插件

二. 栅格系统

1.基本实现过程

2. 实现方案

（1）偏移（.col-尺寸大小-offset-*）

（2）嵌套

（3）排序

3.响应式栅格若干问题

（1）跨设备组合

（2）清除浮动

（3）“强大”的偏移和排序——组合应用的demo

4.重复代码

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

（1）基础样式

（2）颜色

（3）尺寸

（4）状态

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

四.插件架构

1.布局规则：

人气教程排行

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