BootStrap学习笔记，优缺点总结

本篇约定Bootstrap简写为BT

BT的受欢迎程度是大家有目共睹的，用它可以快速的搭建出网站。很早就接触过这个框架，其中的栅格系统，css模块化以及js插件做的相当不错，由于工作中较少使用也一直没有好好梳理下，这篇文章就来好好分析一下这个系统。

BT虽然很好，但也不是没有缺点，由于框架很多都是模块化的，只能这么用，当您的网站比较多样化，界面复杂的话就不太适合使用，此时您需要大量重写代码，维护比较麻烦，此外这个系统的CSS内容也比较多，很多内容是根本用不到的，对于带宽不是很理想的情况下就会造成浪费，当然BT的css模块化还是相当不错的。下面总结几点本人觉得非常不错的点。

栅格系统（结构）

BT的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view，另一个是max-width，min-width。

BT栅格系统的本质就是通过CSS3的媒体查询实现的，如果您熟练使用max-width等媒体查询属性的话就可以抛开BT，定制属于自己的响应式网站。BT将屏幕尺寸分为四类，超小屏幕<768px，小屏幕平板>=768px，中等屏幕桌面显示器>=992px以及大屏幕大桌面显示器>=1200px。每一列又被平均分成了12格，每一个8.33333333%，12格就无限接近于100%。

这里要特别提一下的就是BT的盒模型，BT强制把所有元素的盒模型都设置成了border-box，这是IE首创的，用于混杂模式下显示网页，但W3C认为这个属性是个逗逼一直没采用，但最后发现自己才是逗逼，因此在CSS3中新增了这个属性。border-box盒模型的尺寸包含了padding+border+content ，content-box盒模型的尺寸仅仅包含content部分，设置padding，border还的重新计算包含块尺寸，使用上要比border-box麻烦的多。

类前缀使用是掌握栅格系统最重要的部分，类前缀分四个超小屏幕.col-xs-*，小屏幕平板.col-sm-*，中等屏幕桌面显示器>.col-md-*以及大屏幕大桌面显示器.col-lg-*，以下代码即可实现不同屏幕呈现不同的显示方式：

<div class="row"><div class="col-xs-12 col-md-6"></div><div class="col-xs-12 col-md-6"></div>
</div>

这段代码的意思是，在超小屏幕下分两行显示，桌面显示器则并行显示。更详细的应用大家可以参考BT的官方文档，这里就不再赘述。

CSS模块化（表现）

BT预先定义了很多CSS类，使用的时候直接给class赋予对应的类名即可，如text-left，text-align，.table等。最有代表性的就是btn类，BT定义了一个.bt的基础类，如果还想要其他样式可以在这个基础类上进行扩展，实现不同的视觉效果。

.btn类之所以典型在于他的样式定义，CSS大牛和菜鸟的区别表现在三个方面，文件大小，后期维护以及hack，大牛的CSS文件都比较小（具体多少为小要看项目的大小）；后期维护容易，能快速定位，修改一个样式需要动的地方比较少；hack使用也少。相反菜牛则会出一个庞大的文件，后期维护一团乱麻，改一个样式需要改很多地方，hack，内联，important满天飞。

CSS很多值都是有相互依赖关系的，比如em，我们都知道em是相对单位，浏览器渲染的时候是必须明确到具体值的，因此必须进行计算。正因为这些相对单位我们才可以实现模块化，.btn类就是利用相对单位和字体大小之间的关系实现的，将按钮的line-height，padding，border-radius设置为相对单位，字体大小设置为绝对单位，需要大按钮的时候增加字体，需要小按钮的时候减小字体，案例代码如下：

.btn{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle;}

这里的line-height会根据font-size计算出相应的值，修改font-size按钮就会相应的变大变小，一个小小的改动就实现了视觉上的变化是不是很方便

BT的CSS系统令人称道的地方还有很多，想CSS更进一步的话可以研究下他的思路，您也可以单独提取出来放到自己样式库中，以后做项目的时候可以快速使用。

JavaScript插件（交互）

BT的JavaScript插件非常丰富，既可以用现成的也可以自己扩充，BT提供了一个集成板的BT.js您可以直接拿过来使用也可以单个使用引入*.js即可。

JS插件优秀的地方在于，哪怕是不懂JS的开发人员也可以使用，只要按照官方文档提供的格式写即可，比如模态框，您只要按要求设置好class，data-toggle，data-target即可，一句JS都不用写，是不是很方便。

BT的插件开发模式基本都是相似的，先定义一个类，实现主体功能，然后是个Plugin函数，再把这个函数扩展到JQuery原型上，最后通过委托的方式给特定元素绑定事件。

不足：

对IE兼容也存在不小的问题，BT将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题，当然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。

BT对IE6，7的兼容性肯定不好，对IE8的支持也需要一些额外的文件。

IE8的媒体查询需要response.js的配合才能实现

BT 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：

按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。

最后：

BT官方文档列出了一个编码规范，值得各个开发团队参考，下面罗列一下比较重要的：

HTML

语法：

用两个控制代替制表符（tab）--这是唯一能保证在所有环境下保持一致的的展现方法

嵌套元素应当缩进一次（两个空格）

CSS

声明顺序：

相关属性声明应该归为一组，并按照下面的顺序书写：

1、定位 Positioning

2、盒模型 Box Model

3、格式排版 Typographic

4、视觉 Visual

5、杂项 Misc

由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。盒模型排在第二，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面

完整规范网址：http://codeguide.bootcss.com/#html-syntax

总结：

BT属于前端UI库，可以快速搭建前端页面，还可以使用saas重新设计组件，，比较适合前端一般的后端工程师，大中型企业用的不多。BT源码对于前端学习非常有必要。

转载于:https://www.cnblogs.com/diantao/p/6010750.html

BootStrap学习笔记，优缺点总结相关推荐

Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
BootStrap 学习笔记（一）
BootStrap学习大纲: 1.css样式布局容器:container 1)栅格系统栅格系统就是BootStrap把一个div最多分成12列,其中主要的样式 col-md-数字用的最多,其他( ...
Bootstrap学习笔记01
1.Make Images Mobile Responsive 用处: 使图片适配你的页面宽度. 操作: 给图片添加 .img-responsive class属性. <img src= ...

BootStrap学习笔记，优缺点总结

BootStrap学习笔记，优缺点总结相关推荐

最新文章

热门文章