敏捷开发必备：前端开源框架Bootstrap

tianzc · 发表于 2014-1-22 12:44:41

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声明。

<!DOCTYPE html>
<html lang="en">
...
</html>

排版和链接

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

移除了body的margin
设置 body 背景色为 background-color: white;
将 @baseFontFamily, @baseFontSize, 和@baseLineHeight 做为排版的基础变量
使用 @linkColor 设置全局链接的颜色，链接仅在:hover 状下显示下划线

通过Normalize重置默认样式

从Bootstrap 2开始，使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。

新的reset代码保存在 reset.less ，并移除了一些元素，从而更加简洁明了。

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

1

4

8

6

12

做为框架默认的一部分，Bootstrap提供了940px宽, 12列的栅格系统。

针对各种不同的设备和分辨率，Bootstrap提供了四种响应式方案：手机，垂直平板，水平平板/小型桌面，宽屏桌面。

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

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

列的偏移

4

4 offset 4

3 offset 3

8 offset 4

<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>

列的内嵌

在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌，只要在一个已存在的 .span* 列中，嵌套一个新的 .row 列，然后在 .row 列中再添加一组 .span* 列即可。

例子

内嵌的行应该包含多个列，行的 span* 应该是几个内嵌列 span* 之和。例如，两个内嵌的.span3 列应该包含在 .span6 列中。

Level 1 of columnLevel 2
Level 2

<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>

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

1

4

8

6

12

基于百分比，而非像素

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

行的流式布局

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

补充

<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

流式列的内嵌

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

Fluid 12Fluid 6
Fluid 6

<div class="row-fluid">
<div class="span12">
Level 1 of column
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>

自定义栅格

变量

默认值

描述

@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宽。

<body>
<div class="container">
...
</div>
</body>

流式布局

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

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>

响应式设计 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标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用media query

Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。如下这般，即可在Bootstrap中包含响应式特性:

使用编译后的bootstrap-responsive.css
添加 @import "responsive.less" ，然后重新编译Bootstrap
修改并重编译responsive.less为一个单独的文件

为什么不直接包含它呢? 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。与其让开发者移除这个特性，不如由我们动手。

// 水平状态的手机及以下
@media (max-width: 480px) { ... }
// 界于水平手机与竖直平板之间
@media (max-width: 768px) { ... }
// 界于竖直平板与水平平板/桌面之间
@media (min-width: 768px) and (max-width: 980px) { ... }
// 宽桌面
@media (min-width: 1200px) { .. }

用于响应性的实用类介绍

为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。

何时适用

你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。

例如，你仅仅想在使用手机浏览时显示 <select> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。

支持的类

下面展示了可用的类，及其在media query（由设备标识）下的效果。这些类保存在 responsive.less 。

类

手机<=480px

平板<=767px

桌面>=768px

.visible-phone

显示

隐藏

.visible-tablet

隐藏

显示

隐藏

.visible-desktop

隐藏

显示

.hidden-phone

隐藏

显示

.hidden-tablet

显示

隐藏

显示

.hidden-desktop

显示

隐藏

测试案例

改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。

显示...

手机
平板
桌面✔ 桌面

隐藏...

手机✔ 手机
平板✔ 平板
桌面

组件示例

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

按钮组添加更多按钮，实现类似工具条功能
按钮组

按钮组可以将多个按钮做为一个复合组件来用。由一系列 <a>或 <button> 元素构建。

最佳实践

我们建议使用按钮组和工具条时应遵循下列准则：

在一个按钮组中只使用一种元素， <a> 或 <button> 。
不要在同一个按钮组中使用不同按钮颜色。
使用图标补充内容或直接替代文本时，应包含说明性的alt或title文字。

补充下面会单独强调带下拉框的按钮组，其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

默认例子

用 button 标签按钮构建的标准按钮组：

左中右

<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>

工具条的例子

集合几组 <div class="btn-group"> ，再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。

1234
567
8

<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</div>

复选和单选形式

按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见Javascript插件。

获取相关的javascript »

按钮组中的下拉项

强调! 为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。

按钮下拉菜单基于按钮组提供下拉菜单
下拉按钮简介和例子

下拉菜单中的按钮嵌套于 .btn-group 内。

动作
动作
危险

警告
成功
信息
逆操作

标记例子

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

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
</ul>
</div>

适应所有按钮的尺寸

下拉按钮适应任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。

大按钮
小按钮
迷你按钮

需要Javascript

下拉按钮需要 Bootstrap下拉插件实现功能。

在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的javascript。

带间隔的下拉按钮简介和例子

在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。

动作
动作
危险

警告
成功
信息

逆操作

尺寸

使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。

大按钮

小按钮

迷你按钮

<div class="btn-group">
...
<ul class="dropdown-menu pull-right">
</ul>
</div>

标记的例子

我们对普通的下拉按钮进行扩展，将下拉区域独立出来，可对其单独点击收放菜单。

<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>

上弹菜单

下拉菜单也可以变成上弹菜单，只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向，并将菜单底部与按钮顶部对齐。

上弹按钮
上弹按钮(右对齐)

<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>

导航，标签页，胶囊链接定制性强的列表导航
轻巧的默认项同样的标记，不同的类强大的基类

所有的导航组件，诸如标签页/胶囊链接/列表，使用同样的标记和样式 - .nav 类。

何时适用

标签页和胶囊链接非常适合内容片段的切换，或是相关内容的页面导航。

组件对齐

使用 .pull-left 或 .pull-right 对齐导航链接，两者都依赖CSS float实现左/右对齐。

基本的标签页

对存放链接的 <ul> 应用 .nav-tabs ：

<ul class="nav nav-tabs">
<li class="active">
<a href="#">首页</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

基本的胶囊链接

HTML不变，使用 .nav-pills ：

<ul class="nav nav-pills">
<li class="active">
<a href="#">首页</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

叠放式导航竖直排放标签和胶囊链接如何叠放

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

叠放式标签

<ul class="nav nav-tabs nav-stacked">
...
</ul>

叠放式胶囊链接

<ul class="nav nav-pills nav-stacked">
...
</ul>

下拉项改良的导航组件易用的富内容菜单

在Bootstrap中，创建标签和胶囊链接中的下拉菜单非常方便，仅需极少的HTML和一个轻巧的jQuery插件。

详见初始化下拉项。

带下拉项的标签页

<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
下拉
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>

带下拉的胶囊链接

<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
下拉
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>

导航列表构建简单的叠放式导航，适用于侧边栏应用风格（application-style）的导航

导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。

从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。

使用图标

在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。

水平间隔

应用 .divider 的空列表项会显示为一个水平间隔，如下：

<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>

导航列表例子

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

列表头
首页
类库
应用
另一个列表头
介绍
设置
帮助

<ul class="nav nav-list">
<li class="nav-header">
列表头
</li>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">类库</a>
</li>
...
</ul>

使用图标的例子

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

列表头
首页
类库
应用
另一个列表头
介绍
设置
帮助

<ul class="nav nav-list">
...
<li>
<a href="#">
<i class="icon-book"></i>
类库
</a>
</li>
...
</ul>

标签页切换导航通过javascript让标签生动起来包含哪些东西

我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。

应用时只需修改很少的标记。

标签页切换的例子

用带 .tabbable 的div将 .nav-tabs 嵌套起来：

这里是段1

定制jQuery插件

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

获取javascript →

简洁的标读

使用标签切换页，需要一个最外层的div，一组标签，以及一组存放内容的容器

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">章节 1</a></li>
<li><a href="#2" data-toggle="tab">章节 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>这里是章节 1.</p>
</div>
<div class="tab-pane" id="2">
<p>这里是章节 2.</p>
</div>
</div>
</div>

在多个方向上使用标签切换页标签置底

反转HTML的顺序，用 .tabs-below 将标签居底。

这里是章节A

<div class="tabbable tabs-below">
<div class="tab-content">
...
</div>
<ul class="nav nav-tabs">
...
</ul>
</div>

标签居左

使用 .tabs-left 将标签居左。

这里是章节A

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>

标签居右

使用 .tabs-right 将标签居右。

这里是章节A

<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>

导航条
静态导航条的例子

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

项目名称

导航条基本框架

需要少量的div来构建静态static或是固定fixed的导航条。

<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>

固定导航条

只要在最外层的div上应用 .navbar ，就可以将导航条固定到顶部或是底部。

<div class="navbar navbar-fixed-top">
...
</div>

<div class="navbar navbar-fixed-bottom">
...
</div>

附着导航条时，一定要留出一块空白区域，在 <body> 的顶端添加40px或是更多的padding。要保证将这段样式加在Bootstrap核心CSS之后，在响应式CSS（可选的）之前。

品牌名称

用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。

项目名称

<a class="brand" href="#">
品牌名称
</a>

导航条中的表单

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

项目名称

<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>

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

项目名称

<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>

响应性的补充（可选）

如果我们想根据置顶导航条中的不同内容实现响应性设计，就可以将导航内容嵌套在一个 .nav-collapse.collapse div容器中，并对按钮都应用 .btn-navbar 类。

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
</div>
</div>
</div>
</div>

强调！ 响应式导航条需要切换插件。

导航链接

导航项与无序列表非常相似。

<ul class="nav">
<li class="active">
<a href="#">首页</a>
</li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>

将应用 .divider-vertical 的空列表项插入到两个链接项之间，就会得到分隔条：

<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>

组件对齐

我们使用 .pull-left 或 .pull-right 对齐链接，搜索表单或是文本。这两个类都使用CSS浮动进行对齐。

添加下拉菜单

在导航中很容易添加上下拉菜单，要用到下拉javascript插件。

<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
帐户
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>

下载相关javascript →

导航条中的文本

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

面包屑导航条
为什么使用面包屑导航条

面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。

例子

一个简单的例子，可以用在多个页面中。

首页

首页 /
类库

首页 /
类库 /
数据

标记

使用无序号的ul列表。

<ul class="breadcrumb">
<li>
<a href="#">首页</a> <span class="divider">/</span>
</li>
<li>
<a href="#">类库</a> <span class="divider">/</span>
</li>
<li class="active">数据</li>
</ul>

页码使用两个参数对内容进行分页
多页码分页何时适用

受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。

页码链接的状态

Bootstrap使用一组样式类定制页码的状态，.disabled 用于不可点击链接，而 .active 用于表示当前页链接。

灵活的对齐方式

使用 .pagination-centered 和 .pagination-right 可以改变页码的对齐方式，前者居中，后者居右。

例子

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

1
2
3
4
5

标记

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

<div class="pagination">
<ul>
<li><a href="#">前一页</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">后一页</a></li>
</ul>
</div>

前后页简便的前一页/后一页链接前后页组件介绍

前后页组件是一组简便的分页实现，标记更少，样式更轻，适用于轻量级网站，如博客或网志。

禁用状态

前后页链接仍使用 .disabled 设置无效状态。

默认的例子

默认情况下，前后页组件居中。

<ul class="pager">
<li>
<a href="#">前一页</a>
</li>
<li>
<a href="#">后一页</a>
</li>
</ul>

居于左右端的链接

另一种情况下，链接分别居于左右端：

<ul class="pager">
<li class="previous">
<a href="#">← 过去的</a>
</li>
<li class="next">
<a href="#">更新的 →</a>
</li>
</ul>

行内标签标签和注释文本

标签

标记

[size=10.998px]默认

[size=10.998px]成功

[size=10.998px]警告

[size=10.998px]重要

[size=10.998px]信息

[size=10.998px]相反

标号标识和未读数量
介绍

标号是用来显示标识或某某数量的简洁小组件。比如邮件客户端(比如Mail.app)中的邮件数量或是手机应用中的通知数量。

可用的类

名称

例子

标记

默认

[size=12.025px]1

成功

[size=12.025px]2

警告

[size=12.025px]4

错误

[size=12.025px]6

信息

[size=12.025px]8

相反

[size=12.025px]10

排版组件用以分割内容的页标题和主角单元
主角单元

Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为"hero unit"/主角单元。适用于市场类或强调内容的网站。

标记

将内容嵌套入应用 .hero-unit　的 div 中，如下:

<div class="hero-unit">
<h1>标题</h1>
<p>标签行</p>
<p>
<a class="btn btn-primary btn-large">
了解更多
</a>
</p>
</div>

XXX，真汉子！

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

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

页面标题

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

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

<div class="page-header">
<h1>页面标题例子</h1>
</div>

缩略项基于栅格的图象，视频，文字等等
默认缩略项

默认情况下，Bootstrap的缩略项使用很少的标记来展示链接图象。

高可定制

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

缩略项标签
余华:文章怎么写很重要，怎么读也很重要。有时候将无耻的文章反过来读，也能读到真理的语句。敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词敏感词。
动作

动作
缩略项标签
张思之：曾以为一国家只要有好的外交或者强大的国防就有面子，后来才明白其实人权才是一个国家最大的面子。···一个政权如果关起门来都不能维护自己本国普通公民的权利，它有什么资格在国际舞台上维护这个国家的权利，它的合法性就会遭到质疑。
动作

动作

为什么使用缩略项

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

简洁灵活的标记

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

使用栅格列确定大小

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

标记

正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置：

<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
...
</ul>

缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容，如下：

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<h5>缩略项标签</h5>
<p>缩略项标题介绍</p>
</div>
</li>
...
</ul>

更多例子

尝试更多栅格类，混用不同的尺寸。

通知给成功，警告和错误消息指定样式
简洁的默认样式重写过的基类

Bootstrap 2 简化了基类，用 .alert 代替了 .alert-message 。并对最低要求的标记也进行了精简—默认只使用<div> ，而无须嵌套 <p> 。

统一后的通知消息

为了得到代码少而质量高的组件，我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 .alert-block ，其padding更大，通常容纳文本也更多。

与javascript配合良好

Bootstrap用一个很好的jQuery插件驱动通知消息，方便用户快速地关闭通知。

Get the plugin »

通知的例子

在div中嵌套信息，并放置一个关闭图标。

[url=]×[/url]外交部警告！ 不要拿法律当挡箭牌。

<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>警告！</strong> 不要拿法律当挡箭牌。
</div>

进度条有两个效果加强类： .alert-block 用于提供更大padding，适合容纳更多文本组件；而 .alert-heading 用以修饰标题。

[url=]×[/url]敏感词标题！

中方强调，中国是法治国家，任何公民的合法权益都受宪法和法律保护，同时任何公民都有义务遵守宪法和法律。

<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not...
</div>

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

<div class="alert alert-error">
...
</div>

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

<div class="alert alert-success">
...
</div>

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

<div class="alert alert-info">
...
</div>

进度条用于载入，重定向或表示动作状态
例子和标记基本效果

默认的垂直渐变进度条。

<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>

条纹效果

使用渐变创建条纹进度条（不支持IE）

<div class="progress progress-striped">
<div class="bar"
style="width: 20%;"></div>
</div>

动画效果

条纹进度条的动果效果（不支持IE）

<div class="progress progress-striped
active">
<div class="bar"
style="width: 40%;"></div>
</div>

选项和浏览器支持其他颜色

进度条使用和按钮/警告类相似的样式，提供一致的颜色风格。

.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还不支持动画效果。

杂项轻量级的工具组件
消息墙

用来给某个元素添加包框效果。

来看呀来看呀，这就是消息墙！

<div class="well">
...
</div>

关闭图标

象对话框和弹出框一样，用常见的叉叉图标关闭内容。

[url=]×[/url]

<a class="close">×</a>

VIP007 · 发表于 2015-8-8 12:15:02

11111111111111

[技术方案] 敏捷开发必备：前端开源框架Bootstrap

相关帖子

Function

关于！