Bootstrap框架的学习（一）

一、Bootstrap框架介绍

Bootstrap是一个非常优秀的前端UI框架，一个轻量级的UI前端框架，是基于HTML+CSS+JavaScript的框架。

二、简单介绍

Bootstrap框架是属于UI框架，与Jquery不一样，准确的描述Bootstrap框架属于CSS框架，而非JavaScript框架，但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果。

三、优点

完美的支持H5和CSS3，以及支持移动端浏览器

四、内容

可以参考一下官方文档http://v3.bootcss.com/

（一）脚手架：用于重置背景，链接的样式等，包含两个简单的布局结构。这两个布局系统：默认栅格系统和流式栅格系统。Bootstrap样式使用了lesscss技术，比如：重置背景。我觉得最精彩的部分是栅格系统。

（1）默认栅格系统：是按照固定的宽度等分，按940px等分。

（2）流式栅格系统：是按照视图页面进行等分，按12等分。

（二）基本CSS样式

Bootstrap给出了常用的HTML元素样式，CSS提供样式很专业很美

（三）CSS组件

Bootstrap还提供一些常用的CSS组件

（四）Js插件

随意扩展Bootstrap，特别是js框架

五、版本

使用较广的是2和3版

2015年9月，发布了Bootstrap 4alpha版本

六、css组件

下拉菜单，按钮组，按钮下拉菜单，导航，导航条

七、js插件

自带13个jq插件，包括：对话框，标签页，流动条，弹出框

八、Bootstrap与JqueryMobile比较

Bootstrap是跨屏幕分辨率自动适应

JqueryMobile是专门针对移动端

九、Bootstrap与Jquery EasyUI比较

Bootstrap封装性更胜一筹。Bootstrap的表格仅仅使用一个属性可以控制分页，无论是服务器的分页还是客户端分页都可以控制，而且自带查询框。

EasyUI需要手动去写分页的样式以及查询功能。