深入理解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个不同的屏幕
如图，在<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。
<div class="col-md-8 col-md-offset-2">col-md8</div>
情景二：宽度足够的情况下，我不想所有的col紧紧挨在一起。两个要有1个col的距离。
<div class="col-md-8">col-md8</div> <div class="col-md-3 col-md-offset-1">col-md3</div>
（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/4</div> </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">col3</div> </div>
col3被强行推了6格。同理<div class="col-sm-3 col-sm-pull-1" style="background: #abc">col3</div>是向左拉了一格。
效果相当于绝对定位。在源码实现上，也是做定位：
.col-md-pull-8 { right: 66.66666666666666%;}
3.响应式栅格若干问题
看起来12列栅格布局实现得很死板，但是组合屏幕尺寸，方案就非常多了
（1）跨设备组合
比如我要为自己的网页做一适配小屏和中屏的版本，可以把类叠加到class上。
<div class="col-sm-6 col-md-3" style="background: #abc">col3</div>
在中屏表现是1/4。
到了小屏，表现为1/2
如果我定义一个
<div class="col-xs-3" style="background: #abc">col3</div>
到了大屏，依然占25%。
结论：屏幕尺寸向大兼容。向小肯定不兼容！
（2）清除浮动
情景：在小屏幕上一行显示4个col3，在超小屏幕上一行显示2个col6，代码如何实现？
代码应该是这样的
<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改为
<div class="col-xs-6 col-sm-3" style="background: #abc">col<br>我胖了</div>
效果不佳。
这时应该加一个清除浮动的div到第2/3个div之间第四个就不会飘上去了
<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
<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
<div class="progress progress-striped active"> <div class="progress-bar" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>
定义动画主要是指定animattion和动画时间。
.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代码。
比如说
<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> <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 Metronic开发框架经验小结【八】框架功能总体界面介绍
本文主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式框架技术 整个基于Metronic的Bootstrap开发框架,界面部分采用较新的Bootstrap技术,采用当前最新的Bootstrap3.x,集成了众多功能强大的Boot
-
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.本文基于Bootstrap的框架基础上,再对这个模块进行更新处理,以及Office文档或者图片等附件的查看处理. 1.数据的导入操作 一般系统模块里面,都有数据导入和导出操作,因此在界面自动生成的时候,我都倾向于给用户自动生成这些标准的查询.导入.导出等操作功能,界面效果如下所示. 导入操作,在Bootstrap框架里面,我把它作为一个层的
-
深入理解bootstrap框架之入门准备
一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 (3)基于jQuery的插件集 (4)灵活的栅格系统 以下将简单介绍对bootstrap可能用到的知识进行梳理. 二.新手入门 笔者使用版本是3.3.x 在bootstrap中文官网可以找到以下界面 本书采用预编译的版本进行学习 三. 文件结构 生产环境使用bootstrap.min.css和boo
-
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B
-
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我
-
深入理解bootstrap框架之第二章整体架构
一. 整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小--跳转边距--媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .cont
-
BootStrap框架中的data-[ ]自定义属性理解(推荐)
最近几天学习bootstrap有感,通过data-api可以使用所有的bootstrap插件,不用写一行js代码,方便了很多,是我们的首选方式. 为什么bootstrap的插件当中出现很多data-api,因为我们通常在使用bootstrap框架的时候需要引入的是bootstrap.css,bootstrap.js,以及jQuery.js,然后我们之所以不用写一点js代码就可以使用特效丰富的bootstrap框架,原因就是bootstrap.js已经帮我们完成了所有的js代码,就是通过data-
-
第二章之Bootstrap 页面排版样式
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面主体.对齐.列表等常规内容. 一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用. 1.页面主体 Bootstrap 将全局 font-size 设置为 14px,li
-
基于Bootstrap框架菜鸟入门教程(推荐)
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.栅格系统 栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding). 通过"行(ro
-
30分钟快速掌握Bootstrap框架
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 最近空余时间比较多,今天先给大家介绍一个前端"样式"框架--Bootstrap. 一.Bootstrap 整体架构 为什
-
Bootstrap框架结合jQuery仿百度换肤功能实例解析
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的过程当中,我采用了Bootstrap框架,以便更好的适应屏幕.(当然也是为了更好的熟悉使用这个框架,大家别忘了把Bootstrap框架的css和js包引进来哦).在创建项目时最好可以分别将css.js.images分开. 首先是布局,我只是布局了一下换肤的简单界面,其中就是一些按钮和图片,为了简单实
-
一个基于flask的web应用诞生 bootstrap框架美化（3）
经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架 安装框架 在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装: pip3.6 install flask-bootstrap 这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为
-
使用Bootstrap框架制作查询页面的界面实例代码
以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人
-
AngularJS使用ng-app自动加载bootstrap框架问题分析
本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候