关于BOOTSTRAP的整理和理解

随着CSS3和HTML5的流行，咱们的WEB页面不只须要更人性化的设计理念，并且须要更酷的页面特效和用户体验。做为开发者，咱们须要了解一些宝贵的CSS UI开源框架资源，它们能够帮助咱们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。接下来就是要详解Bootstrap框架：
首先，咱们要知道为何使用框架的原理。CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版，网络布局，表单样式，通用规则等代码块。使用CSS框架，能够简化工做，提升工做效率。

而后，咱们为何要使用Bootstrap框架，而不使用其余CSS框架？
缘由大概以下：

随着H5，CSS3的快速火起来，用户体验尤其重要，移动设备用户的庞大，不容小视，而偏偏，Bootstrap就是为移动设备而开发的框架。他虽然是以移动设备优先，倾向于Mobile，但不是移动设备框架。
它由规范的CSS，JavaScript插件构成，其最大的优点是响应式布局，CSS媒体查询(Media Query)的功劳，使得开发者能够方便的让网页不管在台式机，手机上都得到最佳的体验。
一、抽象出经常使用的css样式,高再可用性,高移植性
二、有固有的定义,详细的文档及开发特色
三、高兼容性,能够兼容流行的浏览器
四、以css为主,但不必定所有是css,可能有一些js(或者其余)脚本用于兼容浏览器

Bootstrap框架能够分为三类：

第一：预处理脚本：

• Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你能够采用预编译的CSS文件快速开发，也能够从源码定制本身须要的样式。例如。若是你页面上有不少一样的效果。只须要写一个效果类。而后让用到的地方去继承他。就不须要再写了。

第二：一个框架，多种设备

• 你的网站和应用能在Bootstrap的帮助下经过同一个代码快速，有效设配手机，平板、PC设备，这都是CSS媒体查询的功劳。

第三：特效齐全

• Bootstrap提供了全面、美观的文档、能够找到关于HTML元素，HTML和CSS组件、jQuery插件方面的全部详细文档。

Bootstrap组件：

Bootstrap中包含了丰富的Web组件，根据这些组件，能够快速的搭建一个漂亮、功能完备的网站。好比：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
JavaScript插件Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 还有更重要的一点是，Bootstrap是彻底开源的。它的代码托管，开发，维护都依赖GITHub平台。
其次：
咱们看下使用Bootstrap的利弊：

优势：

• 提升开发效率。
• 规范名称定义，便于维护。
• 规范项目开发流程 d)css代码更清晰、简单。html代码更合理。
• 大规模项目中能够减小用户下载

缺点：

• 学习成本提升。你须要了解整个框架，须要阅读框架的文档。
• css框架对于一个小项目等页面来讲很臃肿。框架中可能有大部分你用不到的代码。
• 可能会没法帮助你的技术提升。太依赖框架，以致于很难排除bug。包括框架中自己就带的bug。
• 选择本身须要的框架与开发框架都很痛苦。写到后面发现愈来愈不灵活，愈来愈臃肿。

一、页面外部引用样式过多。譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;因此在Yslow中会出现屡次定义。

二、组件复用性的考量。譬如表单定义的css中定义了全部表单的修饰,而假定在注册这个页面中只是须要这个css的百分之三十。那是否应切割出去那不要的百分之七十?综合以上的二个问题，我的认为解决的方式即是封装，让该有的有，不应有的没有。尽可能减小http链接数和css的大小。但若是完全是这样作的话，css的复用性又会变得不好，后期手工的封装会很痛苦。

三、到底该不应支持em?可见如要支持em，最大的目的是为了在浏览器中能够根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是很是有用的。但是在采集咱们用户的浏览器数据后，发现分辨处于这二端的用户很是少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，固然这是个建议，咱们也但愿能使用em带给用户最好的感觉。

基于Bootstrap版本的使用：
目前使用较广的是版本2和3，其中2的最新版本是2.3.2,3的最新版本3.3.5。
版本4最主要变化是：

• 1.从Less迁移到Sass（为何？由于那么Sass和LESS是同样的，只是CSS预处理器中的一种而以。可是Less相对来讲，语法太过严格，因此使用的人也就少了。）
• 2.改进网格系统
• 3.缺省弹性框
• 4.支持 Dropped wells,thumbnails,and panels for cards
• 5.合并全部HTML resets到一个新的模块中：Reboot 全新自定义选项
• 6.再也不支持IE8
• 7.重写全部的JavaScript插件
• 8.改进工具提示和popovers的自动定位
• 9.改进文档
• 10.其余大量改进

总结：若是有前端技术的博友们，应该都不是问题。初学者是有点难度的。

原文地址：https://segmentfault.com/a/1190000015766524