Bootstrap学习之路——初识bootstrap

      做web开发已有三年了，各种前端组件数不胜数，从最原始的html到DhtmlX，从比较简单的LigerUI到丰富的JqueryUI，再到RIA下的Flex，相信做过一点web开发的对这些东西都不陌生，控件使用了不少，也都能在特定的业务场景下物尽其用，再加上些css效果，也算差强人意吧，一直以来盼望着能有一个集大家之所长的家伙出来一统江湖，因为那确实有点群龙无首的感觉。曾经一度有段时间幻想过自己搞一个...后来一个偶然的机会去git上逛，看到了bootstrap，那时候就已经有1W+的fork了。原来是我孤陋寡闻了，这么好的东西，早就已经由Mark Otto和Jacob Thornton这两位Twitter的牛人搞出来了，当我编译完它的源码后，就迫不及待地写了个测试页面，瞬间被其清新简洁的界面风格深深吸引（这里说点题外话，iOS7刚出的那段时间我就萌生过这样的想法：将苹果“扁平化”的设计风格带入web应用。上个项目因为客户一些“极致”的需求不得不采用Flex进行页面端的开发，项目后期尝试写过一套基于Spark风格的扁平化皮肤，那时候已经跟iPhone上的显示效果有些神似了，不过当中付出的精力确实非常之大），然而这种风格已然成为bootstrap的IA(Internal Attribute)，看到这浩大的工程，才发现当时实在是太异想天开了。不过有想法总是好的，如果你连想都不敢，你能敢做吗？

     书归正传，我习惯将Bootstrap称之为前端容器，它吸收了各种优秀的前端组件，并将它们有机结合在一起，让各个widgets有正确功能表现的同时，又有着统一的风格，页面浑然天成，更系统也更精致。它能让你从全局而非单个组件上对系统有个整体的把握，举个不太形象的例子，让你拿5只苹果，你不得不小心翼翼地抱着或捧着，但是bootstrap就像一个口袋，将苹果都装入其中，所以要拿苹果，你只需要提着这个口袋就可以了。相信大家在以后的学习和使用过程中，会对这一点有更深的体会和认识。

     Bootstrap基于Less来构建，关于什么是Less，这里不作过多的解释了，之所以选择用它来编写，是为了让bootstrap能拥有Less诸如 变量，继承，运算和函数等相关特性。同时，它也有Sass版本的支持，举个最简单的例子，大家都写过圆角（border-radius），需要写很多冗余的部分以适应不同的浏览器类似-moz-border-radius和-webkit-border-radius等，有了bootstrap，直接@include border-radius 12px;就搞定了。bootstrap已经内置了非常丰富的web组件，诸如导航菜单、进度条、提示框、模态框、下拉列表等常用界面元素，也提供了多种风格供我们选择使用，当然我们也可以根据自己的喜好自己扩展了。同时，许多优秀的插件也都开始支持嵌入bootstrap，比如jqueryUI中许多控件就可以很好的与bootstrap结合以实现更好的展示方式。

      通过这段描述，希望大家能对bootstrap是什么，它能用来干什么有一个大体的认识。下面的文章我会结合自己项目中实际的使用情况来和大家作进一步的探讨和沟通。无论如何，请大家记住，bootstrap再好它也只是一个框架而已，回到上文的例子，它始终只是一个口袋，真正的让它发挥最大效用的还是那些丰富的html组件，但也希望大家不要太过于拘泥bootstrap本身，Thornton曾经就在他的twitter上抱怨过，为什么一夜之间出现了这么多的 bootstrap-like 应用。跟随主流是对的，但千篇一律的特色就是没有特色。所以还是希望大家发挥自己的才智，在bootstrap上创造出更多有魅力的应用。