发布于2013-09-25,阅读5315次,收藏 3次,评论2条 - 来自极客元神  | 收藏

移动为先的Bootstrap 3

Boostrap3已经发布好几周了, 现在该是我们看看Bootstrap有什么新鲜内容的时候了,在这篇文章中,我们将分享一些BT3的新内容,希望大家喜欢!

有什么新内容?

首先,最重要的一个改变就是支持响应式网站设计,原来的响应式模块已经去掉了。 现在从内核,Bootstrap3就支持响应式设计,不仅仅如此,更深入的在于,整合了Mobile First的设计思想,即移动为先,这个概念最初由Luke wrobleski在他的博客提出:

Luke wrobleski 在2011年提出的网站设计概念 ,先开发移动网站再考虑开发桌面网站,具体参考文章:http://www.lukew.com/resources/mobile_first.asp

UI界面也有很大的不同,整个UI都已经扁平化了,当然在2.0版本也有一个可选的主题支持扁平化设计。还有就是图片都使用了iconfont,不再支持图片,这种方式对于不同尺寸的图标来说非常的方便。

网格系统

网格系统,绝对是一个大的变化,在当前的版本中现在拥有4个网格系统,每一个工作方式都一致,不过是不同尺寸屏幕下的差别而已。

  • 启动网格

为了让网格正确的工作,并且保证正确的渲染和触摸缩放,需要添加viewport meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 不同宽度的网格

新的框架中拥有4种不同的网格,设置不同得到viewport宽度来区别。如下:

  • 非常小型的设备 ~ 手机 (< 768px)
  • 小型设备 ~ 平板电脑 (>= 768px)
  • 中型设备 ~ 桌面 (>= 992px)
  • 大型设备 ~ 桌面 (>= 1200px)

每一种支持的viewport都拥有一个特别的class来定义,如下:

  • col-xs- ~ Extra small devices(非常小型的设备)
  • col-sm- ~ Small devices(小型设备)
  • col-md- ~ Medium devices(桌面)
  • col-lg- ~ Large devices(桌面)

为了使用网格你需要一个内容元素,定义一个class,例如,"container",并且在里面定义一个row。注意对比bootstrap2这俩者里面的fluid前缀都消失了。在第二个容器里设置列:

<div class="container">
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>

如果使用992px或者更大的屏幕,你将看到如下:

如何使用小于992px的设备查看,则如下:

在线演示

当然,你也可以联合class来设置指定的viewport。例如,如果你需要在小的显示设备上让两个列并列的浮动,你可以添加”col-sm-6“到已经存在的”col-sm-4“定义中,如下:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    </div>
</div>

这里在大于991px的viewport打开页面,你可以看到3列并列,如果再小于991px并且大于768px的viewport中查看,可以看到如下:

在线演示

可以看到上面的例子,你合并并且嵌套可以组合出不同的负责布局。在bootstrap的布局中可以查看更多,但是如果了解更多细节需要更多的篇幅,这里不再详细说明。大家最好自己查看文档

Bootstrap CSS

Base CSS中 大多数的class定义都保持不变,但是这里有一些变化,如果你使用bootstrap新版本的话,需要了解一下。

这个版本的代码,作为一个整合已经被重写并且变量名也改变了。如果你看看.less文件,你会发现所有的变量都从camelcase(驼峰拼写法)改为短横线的文字分割符,并且每一个变量都使用标准的“element-state-pseudo state"形式,如下:

旧版本

<ul class="unstyled">...</ul>

新版本

<ul class="list-unstyled">...</ul>

相同的样式应用在一样的元素。另外一些改变在于变量名映射了宽度,例如,按钮:

旧版本

<button class="btn btn-mini"></button>
<button class="btn btn-small"></button>
<button class="btn btn-large"></button>

新版本

<button class="btn btn-xs"></button>
<button class="btn btn-sm"></button>
<button class="btn btn-lg"></button>

对于尺寸和可见的定义也一样

响应式的表格

对于表格来说整体的语法和布局保持了一致,但是为了迎合”移动优先”的概念,在这个版本中支持响应式表格。只需要简单的将表格包含在“responsive-tabe”里即可,这样如果viewport小于768px,会水平滚动显示。

<div class="container">
	<div class="table-responsive">
		<table class="table">
			<tr>
				<td>head1</td>
				<td>head2</td>
				<td>head3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</table>
	</div>
</div>

在线演示

表单

对于CSS来说,只有在 表单 中你可以看到主要的不同点。对于每一个表单的输入控件都显示在一个100%宽度的block元素中。size属性只可以通过padding或者font-size来修改,而不是修改width。

主要的表单markup也修改了,在最基本的表单中,如果使用version2.x,你可以看到如下代码:

<form>
    <fieldset>
        <legend>...</legend>
        <label for="input">...</label>
        <input type="text" name="input" placeholder="..." >
    </fieldset>
</form>

新版本3中,你可以看到如下:

<form role="form">
    <fieldset>
        <legend>...</legend>
        <div class="form-group">
            <label for="input">...</label>
            <input type="text" name="input" class="form-control" placeholder="..." >
        </div>
    </fieldset>
</form>

在线演示

多了一个额外的元素,还有input的额外class定义

Boostrap为了Accessibility in mind(高访问性)而特别设计,这就是为什么添加使用role属性,注意label/input也同样的包装了一个class "form-group",为的是支持响应式。

搜索表单不复存在,因为所有的input和textarea都是缺省100%宽度,特别的处理已经包含了,你可以看到基本上markup没有区别:

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="email">Email address</label>
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="pass">Password</label>
        <input type="password" class="form-control" placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

 

在线演示

 注意form元素的额外class定义:"form-inline",还有label定义中的"sr-only",这个最后的class主要为了处理框架的高访特性。对于行内表单来说,使用label都是可选的,但是还是强烈推荐,因为没有任何损失。这里 sr-only 代表了 Screen Reader Only。这样的话screen reader将会找到label并且”语音“通知用户。

最后,创建一个水平的表单只需要通过设置col-md-或者_sm或者其它对应label控制的class即可简单的设置label的宽度,然后封装input到容器。

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-md-2 control-label" for="email">Email address</label>
        <div class="col-md-3">
            <input type="email" class="form-control" placeholder="Enter email">
        </div>
    </div>
</form>

效果如下:

在线演示

 当然这里还有其它的一些变化,例如,删除了input-prepend和”input-append" class定义。当然,还有很多其它没有介绍,大家请参考文档documentation

Glyphicons

 另外一个比较大的变化,在于图标。在新的bootstrap库中包含了40个新的glyphs,不仅仅这些,所有的图片都替换成了字体,现在我们不添加glyphicons-*图片到你的图片文件夹中,你需要添加四个"glyphicons"字体到你的字体目录中。是的四个,为了浏览器的兼容性。

由于性能原因,每一个字体都需要一个base class和图标指定class。现在添加一个用户图标,你需要使用:

<span class="glyphicon glyphicon-user"></span>

从图片切换到字体,可以帮助你控制图标的颜色和大小,同样也可以使用自己的字体替换缺省的字体。如果你需要找一些图标的话,这里有些资源

Javascript组件

虽然重新定义和设计,bootstrap3.0里的javascript组件保持了相同的名字和使用。当然有一些小小的不同。

Modals

可能boostrap里最常用的插件就是Modals,你会发现非常类似老版本,唯一区别是"model-header",“model-body"和”model-footer“都被封装在一个”model-content“,并且包含在”model-dialog“中。以前使用方式如下:

<div class="modal hide fade">
    <div class="modal-header"></div>
    <div class="modal-content"></div>
    <div class="modal-footer"></div>
</div>

现在如下:

<div class="modal fade" id="my-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">Modals插件</div>
			<div class="modal-body">
				<p>
				可能boostrap里最常用的插件就是Modals,你会发现非常类似老版本,唯一区别是"model-header",“model-body"和”model-footer“都被封装在一个”model-content“,并且包含在”model-dialog“中。
				</p>
			</div>
			<div class="modal-footer">via gbtags.com</div>
			</div>
		</div>
	</div>
</div>

是的,多了一些标签,但是提供了响应式的解决方案,并且允许滚动整个viewport。

为了通过js来触发,你需要使用相同方法:

$( '#my-modal' ).modal('show');

在线演示

其它部分都类似。特别注意的是,为了配合collapsible panels现在accordion已经不存在了,俩者的使用和语法都类似。他们都需要transitions plugin并且不需要其它多余容器

同时Typeahead plugin取代了Typeahead插件。

事件

javascript事件现在拥有命名,但是有什么意义?在bootstrap2中,如果你监听一些alert的话,你使用:

$( '#my-alert' ).bind( 'close', function() {});

在bootstrap3中,事件名称已经变化了,针对框架,所以以前的代码变成如下:

$( '#my-alert' ).bind( 'close.bs.alert', function() {});

看看其它JavaScript Components,bootstrap提供了一些其它内容,当然依旧使用jQuery

新的组件

CSS部分这里有一些新的组件,list groups和Panels

List Groups

List groups,官方文档如下:

一个强大并且灵活的用来显示简单列表或复杂列表甚至自定义内容的组件

创建很简单,如下:

<ul class="list-group">
    <li class="list-group-item">Lorem ipsum...</li>
    <li class="list-group-item">Dolor sit...</li>
</ul>

在线演示

你可以添加active类定义来高亮显示。如果需要添加一个徽章的话,它会水平和垂直居中滴。

Panels

Panels是一个区域展示内容的组件。 panel使用很简单,可以使不同内容显示一致。

可以拥有标题头,标题footer,还有典型的success,error,warning样式,如下:

<div class="panel panel-success">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body"><p>Some content here</p></div>
    <ul class="list-group">
        <li class="list-group-item">Lorem ipsum...</li>
        <li class="list-group-item">Dolor sit...</li>
    </ul>
</div>

在线演示

可以看到panel中可以添加组件,例如,listgroups

自定义器

这个版本还有一个新东西就是”自定义器(Customizer)“,不单单样子变了,现在组织的非常好,可以控制很多东西例如:viewport宽度。

当然,你可以设置font样式和颜色。建议大家自己查看一下使用。

浏览器支持

在这个版本中,不再支持IE7,firefox3.6以下。

当然,对于IE来说支持8以上,虽然有些属性浏览器无法渲染,例如,border-radius,但是框架功能来说,没有大的区别,只是看起来有一些不一样。还有就是IE8需要respond.js来支持media query。

如果需要了解细节,请查看official docs.

结束语

从最初一开始,bootstrap就成为了快速开发原型的工具。如果你需要一个理由使用bootstrap的话,个人觉得你应该试试布局网格,而且针对移动设备的响应式支持,相信以后的网站都需要支持响应式的。


关于作者

极客元神

前端最新编程技术和体验,请立刻访问极客标签编程学习平台,真正的帮助你学习编程,现在就加入我们成为“GEEK”吧!!

极客主页:极客元神
新浪微博:访问微博

评论或回答

  1. 没有任何评论
评论请先登录



以后再转发,立刻下载!