BT

您是否属于早期采用者或者创新人士?InfoQ正在努力为您设计更多新功能。了解更多

优秀的开源前端框架Bootstrap发布2.0.1版

| 作者 池建强 发布于 2012年2月23日. 估计阅读时间: 不到一分钟 |

简介

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,在样式中引用:

<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">
<script src="js/less.js" type="text/javascript"></script>

还有一种方式是使用前编译好,可以通过服务器端的Node.js进行编译,也可以到这个网站http://incident57.com/less/下载Less.app,提供了GUI方式编译less文件,目前只支持Mac OS X。

基于Less编译的Bootstrap

使用了Less的Bootstrap具备如下优点:

  1. Bootstrap实现起来依旧很简单,使用也很简单,把Bootstrap.css拖入你的代码即可。编译less文件可以使用less.jsLess.app或Node.js等多种方案实现。
  2. 一旦编译,Bootstrap框架仅包含CSS文件,这意味着没有多余的图片、Flash或Javascript,只有用于Web应用开发的简洁而强大的CSS样式。

兼容性

目前Bootstrap的最新版本是2.0.1,支持几乎所有的主流浏览器,包括Safari、Chrome,Firefox、IE7.0及以上,最新版本还支持智能手机WebUI。

2.0的新特性

Bootstrap的版本更新很快,2011年11月刚发布了1.4,2012年2月份就再次放出新版本2.0,而且有了大幅改进。

2.0版本采用了更灵活也更受欢迎的12栏网格布局,并以此来实现其各种布局框架。增加了响应式设计,以适应各种移动终端的需求。完善和改进原有样式库,并提供更丰富的新样式,包括样式繁多的图标(icon),漂亮易用的进度条等。改进和增加了自定义jQuery插件,完善文档,修复bug,同时还提供了很多基于Bootstrap构建的网站样例。

已经使用1.4的开发者也不用担心,Bootstrap专门提供了从1.4升级到2.0的手工向导可以参考。

功能集合

Bootstrap2.0把现有框架进行了清晰的功能划分,主要分为框架(Scaffolding),基础CSS,构件库和jQuery插件库。

Scaffolding主要提供基于网格的各种布局,包括普通网格系统、嵌入式网格,固定布局、自适应布局,同时可以对网格和布局进行自定义。

Bootstrap2.0提供了响应式设计,可以通过单个文件支持各种手持设备,自适应不同的设备和屏幕变化。

基础CSS包括各种排版样式(标题、段落、引用块、列表、内联标签等),代码展示方面提供了基于code标签的内嵌代码,基于pre的块代码和基于Google Prettify的代码样式。同时提供各种表格、表单、按钮、图标的展示方式。

构件库提供了基于按钮、导航、标签、排版、警告、进度栏、图像网格等控件。

jQuery插件库则提供了十几种插件实现动态效果,例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等,开发者可以根据自己的业务需求使用不同的插件实现各种动态效果。

下图是使用Bootstrap生成的示例页面。

   

更详细的信息请参考Bootstrap的官方网站

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1.4到2.0改动不小,升级须谨慎 by jian lv

1.4到2.0改动不小,升级须谨慎

Re: 1.4到2.0改动不小,升级须谨慎 by chi jacky

看升级指导,确实改动不小,不过也增加了很多新特性呢,值得升

新人关注 by fong max

新人来看看,关注下,呵呵!

文章不错,官网链接用 http://twitter.github.com/bootstrap/ 更好 by Cai Larry

谢谢介绍,又多一个选择。

官网链接用 twitter.github.com/bootstrap/ 更好

新版本很强大 by yang yun

一刹那我震惊了
下个项目中会试一试

jquery插件 by Yep Hardie

为什么,我感觉jquery足矣。

神器 by 高 其林

哈哈

Re: 神器 by 蒋 话

。。。笑得那鸟样

优秀的开源前端框架Bootstrap发布2.0.1版 by sfsdfsdfsd sfssdfsd

写的很好。有空可以去IT社区论坛:www.itsqe.com/ 多交流下,诚邀您的光临。

bootstrap学习 by 柿 子贵

正在学习bootstrap

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

10 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT