简介
Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面,而且占用资源非常小。
Bootstrap发布时间不长,但是已经非常成熟了,目前最新版本是2.0,包括完整的CSS编译和非编译版本,样例模板和Javascript插件。
历史
早期Twitter的前端工程师几乎采用了任何自己熟悉的库来应对前端的开发需求,这样的造成的问题就是维护和扩展非常困难。最终Bootstrap成为应对这些挑战的解决方案,并开始在Twitter内部迅速成长,被twitter.com广泛采用,形成了稳定版本。随着工程师对其不断的开发和完善,Bootstrap进步显著,不仅包括基本样式,而且有了更为优雅和持久的前端设计模式。2011年8月,Twitter将其开源,相关地址:http://twitter.github.com/bootstrap
使用Bootstrap构建优雅的Web Page
Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap,就必须得说说Less。
关于Less
Less是一个动态CSS语言框架,官方网站是http://lesscss.org/。Less扩展了CSS的动态特性,相对于传统的CSS,Less提供了更为强大的功能和灵活性。基于Less,我们可以在编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS,把程序存储在后缀为less的文件中,Less提供了框架将其编译为标准的css文件。举个简单的例子,如果你想为多个样式设置同一个颜色,可以这样写:@color: #FFFFFF;
h1 {
color: @color;
}
#sub{
color: @color;
}
编译后的css就是:h1 {
color: #ffffff;
}
#sub {
color: #ffffff;
}
以上代码只是Less的最简应用。除了变量,还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象,这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上,Less都让CSS开发有了大幅提升,动态性增强了。
编译Less的方式很简单,有两种方式,一种是在使用时编译。下载less.js,在样式中引用:[code]
[/code]还有一种方式是使用前编译好,可以通过服务器端的Node.js进行编译,也可以到这个网站[url]http://incident57.com/less/[/url]下载Less.app,提供了GUI方式编译less文件,目前只支持Mac OS X。