Bootstrap 3.0的扁平化来了

文章目录

Bootstrap 3 RC1 发布了,从官方上看,Bootstrap 3 似乎也开始趋于扁平化的风格设计。

网站UI和Button

bootstrap 2.3.2以下的整体UI和图标是以box-shadow和background-image: linear-gradient(to bottom, #0088CC, #0044CC);为主要的亮点。整体的颜色是天蓝色,而3.0则是为移动优先,文档的颜色也变为了紫色了,太帅了。

那些背景发光(box-shadow),背景渐变的(background-image:linear-gradien),文字阴影的(text-shadow),盒子阴影的都不见了,就只剩下了圆角了(border-radius)和独一的背景了(background)。话说3.0的css都是重写的。省了这么多属性,样式也变小了。

Flatter and cleaner UI (buttons and menu!)

buttons-bootstrap

 

bootstrap-nav

图标字体

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

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

新的网格系统

网格系统,有三种不同的前缀了。

第一种是“col-$"为手机设备:Extra small devices Phones (<768px) ,宽度自适应

第二种是“col-sm-$”为平板设备:Small devices Tablets (>768px)。宽度为728

第三种是“col-lg-$”为桌面:Medium devices Desktops (>992px) & Large devices Desktops (>1200px),宽度为940及1170

另外网格系统已经去掉了空白了,详情请访问官网Grid System

表单布局

新的表单布局不用再局限于之前的固定宽度了,你可以自己通过col来定义他们之间的宽度

<div>
  <div>
    <label>
  </div>
  <div>
   <input type="text">
  </div>
</div>

新的组件

增加了list-group(包括基本列表、链接、和标题等)

<ul class="list-group">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Morbi leo risus</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
</ul>

更新了面板Panels的更多样式。

<div class="panel">
  <div class="panel-heading">Panel heading</div>
  Panel content
</div>

<div class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  Panel content
</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
<div class="panel panel-info">...</div>
原创文章:Bootstrap 3.0的扁平化来了 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/bootstrap3.html)

发表评论

请登录后发表评论: