爱评测-移动互联网评测

标题: 敏捷开发必备:前端开源框架Bootstrap [打印本页]

作者: tianzc    时间: 2014-1-22 12:44
标题: 敏捷开发必备:前端开源框架Bootstrap
Bootstrap简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。Bootstrap
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
英文站:            http://getbootstrap.com/
相关中文资料站:http://www.cnbootstrap.com/
                               http://www.bootcss.com/

框架及布局

Bootstrap创建了响应式的12列栅格系统,并在该系统的基础上设计了固定(fixed)布局和流动宽度(fluid-width)布局。


全局样式 重置CSS,排版和链接
要求HTML5 doctype
Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

排版和链接
scaffolding.less 文件中,设置了基本的全局显示效果,排版和链接样式。具体来说,我们:

通过Normalize重置默认样式
从Bootstrap 2开始,使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。
新的reset代码保存在 reset.less ,并移除了一些元素,从而更加简洁明了。


默认栅格系统 响应式的12列系统
1

1

1

1

1

1

1

1

1

1

1

1


4

4

4


4

8


6

6


12


做为框架默认的一部分,Bootstrap提供了940px宽, 12列的栅格系统
针对各种不同的设备和分辨率,Bootstrap提供了四种响应式方案:手机,垂直平板,水平平板/小型桌面,宽屏桌面。


如左,一个基本的布局由两个“列”组成,栅格系统由一系列横跨12等分的"span*"组成。



列的偏移
4

4 offset 4


3 offset 3

3 offset 3


8 offset 4



列的内嵌
在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌, 只要在一个已存在的 .span* 列中,嵌套一个新的 .row 列,然后在 .row 列中再添加一组 .span* 列即可。
例子
内嵌的行应该包含多个列,行的 span* 应该是几个内嵌列 span* 之和。 例如,两个内嵌的.span3 列应该包含在 .span6 列中。
Level 1 of columnLevel 2
Level 2






流式栅格系统 基本于百分比的12列响应式布局
列的流式排布
1

1

1

1

1

1

1

1

1

1

1

1


4

4

4


4

8


6

6


12


基于百分比,而非像素
流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样,Bootstrap根据设备和分辨率不同提供了不同的响应性方案。

行的流式布局
把固定布局变成流式布局很简单,把 .row 变成 .row-fluid即可,列内容不变,因此在流式布局和固定布局之间转换非常简单。

补充

流式列的内嵌
流式列的内嵌稍稍有点不同:内嵌列的宽度与父级无关,而要视兄弟列而定,因为所有的内嵌列都是按比例分配父列的100%宽度。
Fluid 12Fluid 6
Fluid 6






自定义栅格
变量
默认值
描述

@gridColumns
12
列的数量

@gridColumnWidth
60px
每列的宽度

@gridGutterWidth
20px
列之间的间隔宽度

@siteWidth
计算所有列的总宽度(含间隔)
计算列的总宽度以设置 .container-fixed() 的宽度
LESS中的变量
Bootstrap内置了一组很有用的变量,用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。

如何定制
修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。 改变variables.less中的栅格变量,再使用四种方式中的某一种重编译less。 在添加更多列之前,要先在grid.less在定义这三个变量。

保持响应性
定制的栅格只能工作在默认的940px下,若要保证Bootstrap的全面响应性,还得更改responsive.less中的栅格内容。


布局 用基础模板创建网页
固定布局
用 <div class="container"> 实现的简单的中央布局的页面,默认为940px宽。



流式布局
<div class="container-fluid"> 提供灵活的页面结构,定义了最小和最大宽度,拥有一个左边栏。很适合做应用和文档。





响应式设计 Media Query根据设备和分辨率的不同而使用不同样式
响应式设计用来做什么?
Medias Query允许浏览器基于不同的条件而使用不同的CSS:比如宽高比,宽度,显示类型等等。但最常用的条件还是 min-width 和 max-width 。
谨慎地使用media query,建议仅仅将其做为你的手机用户的初体验。对于大型项目而言,最好还是选择专业的代码库,而不是进行层层的media查询。

支持的设备
Bootstrap在responsive.less文件中提供了一组media query,令你的项目可以更为便捷地适应多种设备和分辨率。包括:
设备
布局宽度
列宽度
间隔宽度

智能手机
<=480px
流式列,非固定宽度

智能手机到垂直平板
<=767px
流式列,非固定宽度

水平平板
>=768px
42px
20px

默认
>=980px
60px
20px

大分辨率
>=1200px
70px
30px
要求有meta标签
要确保设备能正常显示响应式页面,就要添加meta标签



使用media query
Bootstrap不会自动包含media query,但理解和添加media query却是非常容易。 如下这般,即可在Bootstrap中包含响应式特性:
为什么不直接包含它呢? 说实话,并不是什么应用都需要响应性设计,响应性不是必须的。 与其让开发者移除这个特性,不如由我们动手。




用于响应性的实用类介绍
为了更高效友好地面向手机开发,可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。
何时适用
你的网站已经有了一点底子,但并不想再为不同设备而重新创建一个完全不同的站点,这种情况就适合使用实用类来完善呈现效果。
例如,你仅仅想在使用手机浏览时显示 <select> 做为导航,而在使用平板和桌面浏览时,就隐藏起来。

支持的类
下面展示了可用的类,及其在media query(由设备标识)下的效果。 这些类保存在 responsive.less 。
手机<=480px
平板<=767px
桌面>=768px

.visible-phone
显示
隐藏
隐藏

.visible-tablet
隐藏
显示
隐藏

.visible-desktop
隐藏
隐藏
显示

.hidden-phone
隐藏
显示
显示

.hidden-tablet
显示
隐藏
显示

.hidden-desktop
显示
显示
隐藏
测试案例
改变你的浏览器尺寸,或是不在同的设备上浏览,以观察上述类的效果。
显示...隐藏...


组件示例

Bootstrap内置几十种高可用的组件,以实现导航栏,通知,弹出框等功能。


按钮组 添加更多按钮,实现类似工具条功能
按钮组
按钮组可以将多个按钮做为一个复合组件来用。 由一系列 <a>或 <button> 元素构建。
最佳实践
我们建议使用按钮组和工具条时应遵循下列准则:
补充 下面会单独强调带下拉框的按钮组,其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

默认例子
用 button 标签按钮构建的标准按钮组:
左中右

工具条的例子
集合几组 <div class="btn-group"> ,再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。
1234
567
8


复选和单选形式
按钮组也可实现单选和复选功能。前者只有一个按钮被按下,后者可以按下多个按钮。详见Javascript插件
获取相关的javascript »
按钮组中的下拉项
强调! 为了渲染正常,带下拉项的按钮应该被 .btn-group 嵌套,然后再放入 .btn-toolbar 内。


按钮下拉菜单 基于按钮组提供下拉菜单
下拉按钮简介和例子
下拉菜单中的按钮嵌套于 .btn-group 内。
动作
动作
危险

警告
成功
信息
逆操作


标记例子
和按钮组类似,下拉按钮仍使用按钮标记,并用到少量其他标记以增强显示效果,同时支持Bootstrap的下拉jquery插件。


适应所有按钮的尺寸
下拉按钮适应任何尺寸,可以是 .btn-large, .btn-small, 或 .btn-mini 。
大按钮
小按钮
迷你按钮


需要Javascript
下拉按钮需要 Bootstrap下拉插件 实现功能。
在某些情况下(诸如使用手机浏览),下拉菜单会超出可视区域。这时要么手动对齐,要么使用定制的javascript。



带间隔的下拉按钮简介和例子
在按钮组的样式和标记的基础上,我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮,右侧是下拉链接。
动作
动作
危险

警告
成功
信息

逆操作

尺寸
使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。
大按钮

小按钮

迷你按钮


标记的例子
我们对普通的下拉按钮进行扩展,将下拉区域独立出来,可对其单独点击收放菜单。
上弹菜单
下拉菜单也可以变成上弹菜单,只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向,并将菜单底部与按钮顶部对齐。
上弹按钮
上弹按钮(右对齐)



导航,标签页,胶囊链接 定制性强的列表导航
轻巧的默认项 同样的标记,不同的类强大的基类
所有的导航组件,诸如标签页/胶囊链接/列表,使用同样的标记和样式 - .nav 类。
何时适用
标签页和胶囊链接非常适合内容片段的切换,或是相关内容的页面导航。
组件对齐
使用 .pull-left 或 .pull-right 对齐导航链接,两者都依赖CSS float实现左/右对齐。

基本的标签页
对存放链接的 <ul> 应用 .nav-tabs :

基本的胶囊链接
HTML不变,使用 .nav-pills :


叠放式导航 竖直排放标签和胶囊链接如何叠放
默认情况下标签和胶囊链接是水平排放的,使用 .nav-stacked 就可以将其变成竖直叠放。

叠放式标签
叠放式胶囊链接

下拉项 改良的导航组件易用的富内容菜单
在Bootstrap中,创建标签和胶囊链接中的下拉菜单非常方便,仅需极少的HTML和一个轻巧的jQuery插件。
详见 初始化下拉项

带下拉项的标签页
带下拉的胶囊链接

导航列表 构建简单的叠放式导航,适用于侧边栏应用风格(application-style)的导航
导航列表可以便捷地创建带有标头(可选)的导航链接组,非常适合用做侧边栏(与OS X中的Finder类似)。
从结构上看,其与标签和胶囊链接无异,都使用同样的导航样式,所以用法和定制都一样简洁。

使用图标
在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。
水平间隔
应用 .divider 的空列表项会显示为一个水平间隔,如下:

导航列表例子
对存放一组链接的列表使用 class="nav nav-list" :


使用图标的例子
同样的例子,使用 <i> 标签显示图标。



标签页切换导航 通过javascript让标签生动起来包含哪些东西
我们使用一个简单的插件切换标签页对应的内容,从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页:置顶(默认),居右,置底,居左。
应用时只需修改很少的标记。

标签页切换的例子
用带 .tabbable 的div将 .nav-tabs 嵌套起来:
这里是段1




定制jQuery插件
所有标签页都依赖我们提供的轻量级jQuery插件。详见javascript中的关于标签页部分的文档。
获取javascript →


简洁的标读
使用标签切换页,需要一个最外层的div,一组标签,以及一组存放内容的容器
在多个方向上使用标签切换页标签置底
反转HTML的顺序,用 .tabs-below 将标签居底。
这里是章节A




标签居左
使用 .tabs-left 将标签居左。
这里是章节A




标签居右
使用 .tabs-right 将标签居右。
这里是章节A





导航条
静态导航条的例子
带有项目名称,导航和搜索表单的静态导航条的例子。
项目名称



导航条基本框架
需要少量的div来构建静态static或是固定fixed的导航条。
固定导航条
只要在最外层的div上应用 .navbar ,就可以将导航条固定到顶部或是底部。



附着导航条时,一定要留出一块空白区域,在 <body> 的顶端添加40px或是更多的padding。 要保证将这段样式加在Bootstrap核心CSS之后,在响应式CSS(可选的)之前。
品牌名称
用于展示品牌或项目名称的一个简单链接,只需要一个锚标签。
项目名称


导航条中的表单
导航条内的表单,用 .navbar-form 进行样式化,由 .pull-left 或 .pull-right 决定居左还是居中。
项目名称



对导航栏应用 .navbar-search 的同时对其中的输入框使用 .search-query ,就会得到另一种搜索样式,从而增强搜索表单的可定制性。
项目名称



响应性的补充(可选)
如果我们想根据置顶导航条中的不同内容实现响应性设计,就可以将导航内容嵌套在一个 .nav-collapse.collapse div容器中,并对按钮都应用 .btn-navbar 类。
强调! 响应式导航条需要 切换插件

导航链接
导航项与无序列表非常相似。
将应用 .divider-vertical 的空列表项插入到两个链接项之间,就会得到分隔条:
组件对齐
我们使用 .pull-left 或 .pull-right 对齐链接,搜索表单或是文本。这两个类都使用CSS浮动进行对齐。
添加下拉菜单
在导航中很容易添加上下拉菜单,要用到 下拉javascript插件
下载相关javascript →

导航条中的文本
在导航条中用 <p> 标签包装文本以设置行高和颜色。


面包屑导航条
为什么使用面包屑导航条
面包屑导航栏用于展示用户当前在网站/应用中的位置,但并不是首要导航。适宜布局清爽,简洁明了的场合。
例子
一个简单的例子,可以用在多个页面中。

标记
使用无序号的ul列表。


页码 使用两个参数对内容进行分页
多页码分页何时适用
受Rdio启发,我们设计了极为简致的页码样式,适用于应用和搜索结果。页码区域尺寸大,易于吸引注意力,易于扩展,易于点击。
页码链接的状态
Bootstrap使用一组样式类定制页码的状态,.disabled 用于不可点击链接,而 .active 用于表示当前页链接。
灵活的对齐方式
使用 .pagination-centered 和 .pagination-right 可以改变页码的对齐方式,前者居中,后者居右。

例子
默认的页码组件非常灵活,有多种展示形式。





标记
分页标记是一个嵌套在 <div> 中的 <ul> 。


前后页 简便的前一页/后一页链接前后页组件介绍
前后页组件是一组简便的分页实现,标记更少,样式更轻,适用于轻量级网站,如博客或网志。
禁用状态
前后页链接仍使用 .disabled 设置无效状态。

默认的例子
默认情况下,前后页组件居中。

居于左右端的链接
另一种情况下,链接分别居于左右端:


行内标签 标签和注释文本
标签
标记

[size=10.998px]默认
<span class="label">默认</span>

[size=10.998px]成功
<span class="label label-success">成功</span>

[size=10.998px]警告
<span class="label label-warning">警告</span>

[size=10.998px]重要
<span class="label label-important">重要</span>

[size=10.998px]信息
<span class="label label-info">信息</span>

[size=10.998px]相反
<span class="label label-inverse">逆操作</span>
标号 标识和未读数量
介绍
标号是用来显示标识或某某数量的简洁小组件。 比如邮件客户端(比如Mail.app)中的邮件数量或是手机应用中的通知数量。

可用的类
名称
例子
标记

默认
[size=12.025px]1
<span class="badge">1</span>

成功
[size=12.025px]2
<span class="badge badge-success">2</span>

警告
[size=12.025px]4
<span class="badge badge-warning">4</span>

错误
[size=12.025px]6
<span class="badge badge-error">6</span>

信息
[size=12.025px]8
<span class="badge badge-info">8</span>

相反
[size=12.025px]10
<span class="badge badge-inverse">10</span>


排版组件 用以分割内容的页标题和主角单元
主角单元
Bootstrap提供了一个轻巧又灵活的组件,用以在网站中着重展示内容,称之为"hero unit"/主角单元。 适用于市场类或强调内容的网站。
标记
将内容嵌套入应用 .hero-unit 的 div 中,如下:

XXX,真汉子!

主角单元Hero Unit是一简单的大屏组件,用于增强内容或信息的吸引力

[url=]了解更多[/url]




页面标题
相当于一个简单的 h1 外壳,它有适当的留白,以便在页面中分割内容片段。 还可以在 h1 内嵌入 small ,html元素或是其他组件。

页面标题的例子 子标题文字


缩略项 基于栅格的图象,视频,文字等等
默认缩略项
默认情况下,Bootstrap的缩略项使用很少的标记来展示链接图象。

高可定制
使用少量其他标记就可以在缩略项中添加任何一种HTML内容,比如标题,段落,或按钮。


为什么使用缩略项
缩略项(1.4版之前使用 .media-grid )适用于栅格化的图片和视频,图片搜索结果,零售产品,文件夹等等。缩略项可以是链接,也可以是静态内容。

简洁灵活的标记
缩略项标记既简单又灵活—只须用一个 ul 嵌套多个 li 元素。缩略项内容可以是任何一种HTML内容,只须少许标记。

使用栅格列确定大小
新版本中,缩略项组件使用栅格类—诸如 .span2 或 .span3—确定缩略项的尺寸。


标记
正如之前所提到的,缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置:
缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容,如下:

更多例子
尝试更多栅格类,混用不同的尺寸。


通知 给成功,警告和错误消息指定样式
简洁的默认样式重写过的基类
Bootstrap 2 简化了基类,用 .alert 代替了 .alert-message 。 并对最低要求的标记也进行了精简—默认只使用<div> ,而无须嵌套 <p> 。
统一后的通知消息
为了得到代码少而质量高的组件,我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 .alert-block ,其padding更大,通常容纳文本也更多。

与javascript配合良好
Bootstrap用一个很好的jQuery插件驱动通知消息,方便用户快速地关闭通知。
Get the plugin »

通知的例子
在div中嵌套信息,并放置一个关闭图标。
[url=]×[/url]外交部警告! 不要拿法律当挡箭牌。
进度条有两个效果加强类: .alert-block 用于提供更大padding,适合容纳更多文本组件;而 .alert-heading 用以修饰标题。
[url=]×[/url]敏感词标题!
中方强调,中国是法治国家,任何公民的合法权益都受宪法和法律保护,同时任何公民都有义务遵守宪法和法律。



语境下的强化 根据通知的涵义使用不同的类危险/错误[url=]×[/url]前进进! 紧密团结在以希特勒元首为核心的纳粹党中央周围,高举国家意志和民族利益的大旗,直达人间地狱。

成功[url=]×[/url]钱贱贱! 很多敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词。

信息[url=]×[/url]杀尽尽! 紧密团结在以斯大林同志为核心的苏共中央周围,高举马列2B主义大旗,加速实现共产主义。


进度条 用于载入,重定向或表示动作状态
例子和标记基本效果
默认的垂直渐变进度条。



条纹效果
使用渐变创建条纹进度条(不支持IE)



动画效果
条纹进度条的动果效果(不支持IE)




选项和浏览器支持其他颜色
进度条使用和按钮/警告类相似的样式,提供一致的颜色风格。
.progress-info

.progress-success

.progress-warning

.progress-danger


条纹滚动条
与纯色相似,也可以使用多色的条纹进度条。
.progress-info

.progress-success

.progress-warning

.progress-danger


行为
进度条使用CSS3过渡效果,因此用javascript动态调整进度条宽度时,效果会非常平滑。
如果使用 .active ,那么 .progress-striped 导航栏就会呈现自左向右的条纹跑马灯动画效果。

浏览器支持
进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9,以及某些老版本的Firefox还不能完全支持这些特性。
目前,Opera和IE还不支持动画效果。


杂项 轻量级的工具组件
消息墙
用来给某个元素添加包框效果。
来看呀来看呀,这就是消息墙!

关闭图标
象对话框和弹出框一样,用常见的叉叉图标关闭内容。
[url=]×[/url]





作者: VIP007    时间: 2015-8-8 12:15
11111111111111




欢迎光临 爱评测-移动互联网评测 (http://www.aipingce.com/) Powered by Discuz! X3.2