开放原子开发者工作坊

一、什么是Bootstrap

 是一个用于快速开发web 应用程序和网站的前端框架。Bootstrap 是基于HTML、CSS、JavaScript的。是在2011年8月发布的开源产品。

 

二、为什么EasyUI、Extjs和Bootstrap都是浏览器的前端控件库。

EasyUI是基于JQuery，免费的各个控件是相互独立的。

Extjs是更加高级一点，控件和控价直接的交互用起来会很方便，要收费；Bootstrap相对于前两个控件上会差很多，

Bootstrarp是CSS框架，但是在不同终端上面的兼容性方面做得很好，就是电脑、手机平板等这些，这一点是前两者无法比较的。

一般EasyUI和Exjs是后台管理系统的.Bootstrap是做网站界面的。

EasyUI它的空间绑定数据源很方便，事件也很多，能够满足大部分需求。如何和Bootstrap结合，效果将是非凡的。

EasyUI有个瓶颈，控件只能够通过前端进行数据绑定，返回给控件的数据只有Json格式。

Boostrap侧重于页面样式，本身不带有数据交互的功能，适合做各种页面的定制开发。

EasyUI则都有，具有很大的数据交互功能，但是样式定制不容易，更加适合后台开发。

 

三、为什么使用Boostrap?

移动射击优先，自从Boostrap 3开始，框架包含了贯穿于这个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持Boostrap。

响应式设计：Boostrap的响应式CSS能够自适应于平台式、平板电脑和手机。

 

1.第一步：下载Boostrap有关文件

Boostrap中文网:http://www.bootcss.com/

 

2.第二步:

如下代码：引入相关文件即可。

效果：

 

 

 

总结：

1、注意在写自己代码之前先引入必要css和js，防止忘了，迟迟没有效果

2、在网格布局之前你要确定你要分成多少份这里是12份

3、row类样式 表示一行，类似table一样。

4、col-md-1:col表示列，（xs  --    最小屏   手机；sm -- small  小屏   ipd；md -- middle  中屏  笔记本； lg   -- large   大屏   台式机）后面是数量，连起来，你要占几列