Bootstrap 3.0 最佳新功能一览

资讯频道 → Web前端

11顶
0踩

2013-08-05 15:27 by 副主编 wangguo 评论(19) 有49791人浏览

Bootstrap Twitter CSS 前端框架

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

近日，Bootstrap开发者发布了Bootstrap 3.0 RC1，我们可以从中先领略到Bootstrap 3.x带来的全新特性。

从目前来看，Bootstrap 3.0已经远远优于2.x版本了。下面就来看看该版本中引入了哪些新特性。

扁平化和整洁的UI

又是扁平化！自从苹果iOS的UI从拟物化过渡到扁平化后，这种风格如今已经成为了现代化设计的代名词。而标榜“移动优先”的Bootstrap 3没有理由不扁平化。

Bootstrap 2.0通过一个简单的应用和一个统一的界面使之风靡互联网，而Bootstrap 3将这种风格上升到了另一个层次。除了带来了扁平化的UI外，Bootstrap 3还将标志性的紫色和导航栏用到了文档的主题中。

这样使得界面更加整洁，也使得Bootstrap可以更好地跨设备和浏览器。

图标字体

图标字体（glyphicons）现在已经从Bootstrap代码库中分离出来，你可以作为插件来使用它。

图标得到了重新设计，并且提供了一些新的有趣的图标。

新的网格系统

Bootstrap 3中的新的网格系统允许根据设备大小通过变量来声明。比如，你可以针对桌面环境设置4列布局，针对平板电脑设置2列布局，针对手机设置1列布局。这样，你就可以很容易地控制你的页面的跨设备显示效果。

根据列的表单布局

Bootstrap终于摆脱了它的表单控件类，在Bootstrap 3中你可以使用更整洁的网格类。比如：

<div class="row">
  <div class="col-4">
    <label>
  </div>
  <div class="col-8">
   <input type="text">
  </div>
</div>

列表组（List group）

List group是一个新的组件，现在你也可以使用Bootstrap来创建一些应用原型，比如RSS Feed、状态列表、链接列表等。

如上图，通过自定义内容列表组，您可以轻松地创建reddit网站原型或者其他元素。现在，Bootstrap也多少开始朝着CSS原型框架的方向发展了。

上下文面板

Bootstrap现在开始更加认真地对待其着色系统，无论是警告、通知还是其他元素，现在都根据整体着色来进行风格化。

Row Mixins

现在你可以轻松地创建自定义的网格，或打散网格只定义那些你需要的部分（比如内容、侧边栏），而无需自定义一个完整的12列网格。

除此之外，你还可以为你的流体形式的行指定断点。下面是Bootstrap使用的代码：

你可以通过各种变量来修改Mixins的行为，比如@grid-float-breakpoint、@grid-columns和@grid-gutter-width等。如果想重建网站的布局，可以这样做：

@grid-float-breakpoints: 768px
@grid-columns: 16
//I like 16 col layouts
@grid-gutter-width: 20px

#wrap {
  .make-row();
}

#header {
  .make-column(3);
}

#inner {
 .make-column(13);
}

.content-sidebar-wrap {
 .make-row();
}

#content {
 .make-column(12);
}

#sidebar {
 .make-column(4);
}

更多信息：Best New Features in Bootstrap 3.0

Bootstrap 3.0 RC1下载：http://getbootstrap.com/

查看图片附件

分享到：

11
顶

0
踩

评论共 19 条请登录后发表评论

19 楼 hahasimie 2013-11-19 09:35

这是不是扁平化http://danqingyu.com

18 楼 ken5695 2013-10-10 15:50

楼主好心，可否把上面那个最佳Demo的源码发到我邮箱liuzhenqun5695@163.com 拜谢。

17 楼差沙 2013-08-11 16:10

zwxiaole 写道

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的页面连ie8都不兼容

你应该说bootstrap3连ie8都不兼容。

16 楼 zwxiaole 2013-08-09 08:32

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的页面连ie8都不兼容

15 楼 shusanzhan 2013-08-08 14:18

好好学习一下最近想做一个网站

14 楼闫老三 2013-08-08 12:17

不错不错~

13 楼 xlaohe1 2013-08-08 09:01

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你这个很好，赞一个，最好不要过一段时间就失效了
给出打包demo最好

12 楼 cyruscript 2013-08-07 18:39

新版本，下下来试下。

11 楼 damoqiongqiu 2013-08-07 10:33

wangguo 写道

准备邮件采访Bootstrap的作者之一Mark Otto，各位想问什么问题？

你问他啥时候能把控件体系做完善

10 楼差沙 2013-08-07 10:18

zhaoyta 写道

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了

哈哈哈

一个更新引发的问题，多谢提醒，现在已经修复了。

9 楼 wangguo 2013-08-07 10:07

准备邮件采访Bootstrap的作者之一Mark Otto，各位想问什么问题？

8 楼 clxy 2013-08-06 12:24

扁平化？！那丰胸手术的意义在哪里?!

7 楼 damoqiongqiu 2013-08-06 09:51

拜托bootstrap不要做UI了好不好哇，搞搞CSS和布局就行了

6 楼 Pontifex 2013-08-06 09:07

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了

哈哈哈

5 楼 zhaoyta 2013-08-06 08:48

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了
AttributeError at /
'WSGIRequest' object has no attribute 'session'
Request Method: GET
Request URL: http://xadmin.tianmiao.name/
Django Version: 1.5.1
Exception Type: AttributeError
Exception Value:
'WSGIRequest' object has no attribute 'session'
Exception Location: /usr/local/lib/python2.7/site-packages/xadmin/views/list.py in init_request, line 122
Python Executable: /usr/local/bin/python
Python Version: 2.7.2
Python Path:
['/opt/workspace/xadmin-demo',
'/usr/local/lib/python2.7/site-packages/setuptools-0.6c11-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/PIL-1.1.7-py2.7-linux-i686.egg',
'/usr/local/lib/python2.7/site-packages/MySQL_python-1.2.3-py2.7-linux-i686.egg',
'/usr/local/lib/python2.7/site-packages/Sphinx-1.2b1-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/docutils-0.10-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/Jinja2-2.6-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/Pygments-1.6-py2.7.egg',
'/usr/local/lib/python27.zip',
'/usr/local/lib/python2.7',
'/usr/local/lib/python2.7/plat-linux2',
'/usr/local/lib/python2.7/lib-tk',
'/usr/local/lib/python2.7/lib-old',
'/usr/local/lib/python2.7/lib-dynload',
'/usr/local/lib/python2.7/site-packages']
Server time: Mon, 5 Aug 2013 19:47:26 -0500

4 楼 dohkoos 2013-08-05 20:23

我讨厌导出都是扁平化！

3 楼差沙 2013-08-05 16:58

差沙写道

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

可以尝试在手机或平板上看一下，b3对mobile的优化还是有的。

2 楼差沙 2013-08-05 16:54

bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

1 楼 freezingsky 2013-08-05 16:48

UI还是那么简洁时尚。

发表评论

您还没有登录,请您登录后再发表评论

11顶0踩