web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

        最近在温习web的开发，毕业之后就没接触web开发了。当时HTML5在国内貌似还是刚刚起步，能适配HTML5的浏览器很少。移动界面框架也才刚刚开始，记得当时曾经学过sencha touch的移动框架以及jquery mobile框架。这两个框架都对响应式布局进行了不错的适配及实现。响应式布局简单来说就是对于多个移动终端只需一个界面即可全部适配，可大大地减少开发的工作量。

        最近一年Bootstrap开始广泛地被使用了，基于此框架开发出来的插件数不胜数。所以我花了几天时间学习了下Bootstrap，本篇就不介绍具体的代码、具体的控件了，只做Bootstrap学习方向的参考。

介绍

        Bootstrap的中文官网是http://www.bootcss.com/。基础布局及基本控件的学习只需访问http://v3.bootcss.com 作为入门参考。对于一些高级的插件，则只需要用到什么再去搜索，而不需要一一学习。在官网中接触到了less语言，一种动态的css语言，一些语法可以参考官网http://www.bootcss.com/p/lesscss/。

        Bootstrap对移动终端进行了非常好的适配，不过只是在界面显示方面，对于硬件的调用还需要其他框架支持，比如phonegap（将在下篇中进行学习）。

环境搭建

        

        只需引入以上文件即可（其中ie8 ie9需要额外引入shim和respond类库来支持HTML5的相关标签）

        对于Bootstrap的主题，官网提供了一个默认的主题库bootstrap-theme.min.css,如果想要其它主题可自行网上搜索引入即可

实例

        代码下载：http://yunpan.cn/cjF22QI7eF5vh 访问密码 5268。

        

        以上是我收集的用到频率较多的Bootstrap基础插件。

总结

        Bootstrap的控件样式及布局均是通过编写好的css引用即可，前期对于一些样式的学习可能会比较耗时，所以可以无需记忆具体的样式名，只需将代码记录成实例，在网站开发的过程中用到时去查找对应的样式即可，控件的学习也可以参考这样的方式。