提供十几个可重用组件, 包括导航, 警示, 提示工具, 等等.
可切换的链接列表. 互动式的下拉菜单需要JavaScript下拉菜单插件.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">行为</a></li> <li><a tabindex="-1" href="#">其他行为</a></li> <li><a tabindex="-1" href="#">特别行为</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">分割链接</a></li> </ul>
以下是下拉菜单所需的HTML. 下拉菜单的触发和下拉菜单都需要包含在.dropdown
里, 或者声明 position: relative;
其他元素. 然后, 只需创建菜单.
<div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">行为</a></li> <li><a tabindex="-1" href="#">其他行为</a></li> <li><a tabindex="-1" href="#">特别行为</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">分割链接</a></li> </ul> </div>
列表右对齐, 和包括一个多级的下拉菜单.
在 .dropdown-menu
添加 .pull-right
, 让下拉列表右对齐.
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul>
添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似OS X. 在任意的 li
添加 .dropdown-submenu
就会自动获得一个额外的菜单.
默认
向上显示
左边显示
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... <li class="dropdown-submenu"> <a tabindex="-1" href="#">更多选项</a> <ul class="dropdown-menu"> ... </ul> </li> </ul>
如此简洁的分页的灵感来自Rdio, 非常适合应用程序和显示搜索结果. 简洁大块的分页不容易看错, 容易扩展, 并有更大的点击区域不易点错.
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><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="#">Next</a></li> </ul> </div>
在不同情况下, 可自定义链接. 使用 .disabled
让链接不可用, 使用 .active
表示当前页面.
<div class="pagination"> <ul> <li class="disabled"><a href="#">Prev</a></li> <li class="active"><a href="#">1</a></li> ... </ul> </div>
也可以使用span标签替换a标签, 这样可以删除点击功能, 同时又保留了样式.
<div class="pagination"> <ul> <li class="disabled"><span>Prev</span></li> <li class="active"><span>1</span></li> ... </ul> </div>
想要更大或更小的分页? 添加.pagination-large
, .pagination-small
, 或 .pagination-mini
就可改变分页大小.
<div class="pagination pagination-large"> <ul> ... </ul> </div> <div class="pagination"> <ul> ... </ul> </div> <div class="pagination pagination-small"> <ul> ... </ul> </div> <div class="pagination pagination-mini"> <ul> ... </ul> </div>
添加其中一个属性就可改变分页对齐位置: .pagination-centered
和 .pagination-right
.
<div class="pagination pagination-centered"> ... </div>
<div class="pagination pagination-right"> ... </div>
用更少的标记和样式, 创建用于简单快速分页. 非常适用于简单的网站, 像博客或者杂志网站.
默认情况下, 翻页链接居中.
<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>
同样也是使用 .disabled
让其显示不可用状态.
<ul class="pager"> <li class="previous disabled"> <a href="#">← 较旧的</a> </li> ... </ul>
标签 | 标记 |
---|---|
默认 |
<span class="label">默认</span>
|
成功 |
<span class="label label-success">成功</span>
|
警告 |
<span class="label label-warning">警告</span>
|
重要 |
<span class="label label-important">重要</span>
|
信息 |
<span class="label label-info">信息</span>
|
反向 |
<span class="label label-inverse">反向</span>
|
名称 | 例子 | 标记 |
---|---|---|
默认 | 1 |
<span class="badge">1</span>
|
成功 | 2 |
<span class="badge badge-success">2</span>
|
警告 | 4 |
<span class="badge badge-warning">4</span>
|
重要 | 6 |
<span class="badge badge-important">6</span>
|
信息 | 8 |
<span class="badge badge-info">8</span>
|
反向 | 10 |
<span class="badge badge-inverse">10</span>
|
一个轻量级、灵活的组件, 能在你网站上展示重点内容. 很适合在营销类或突出内容类网站使用.
<div class="hero-unit"> <h1>Heading</h1> <p>Tagline</p> <p> <a class="btn btn-primary btn-large"> Learn more </a> </p> </div>
在页面上给 h1
适当的间隔和显示一段内容. 它可以使用 h1
里的默认 small
元素, 以及其他提供额外样式的元素.
<div class="page-header"> <h1>简单就是美 <small>iTunes 里你喜爱的一切,如今变得更出色、更简单。</small></h1> </div>
默认情况下, 实现Bootstrap下的缩略图图像, 只需少量标记.
只要添加一点额外的标记, 就可以在缩略图里添加任何类型的HTML内容, 如标题, 段落, 或按钮.
缩略图 (1.4版本后移除 .media-grid
) 很适合网格式图片或视频, 图片搜索结果, 零售产品, 文件夹, 等等. 它们可以是链接或静态内容.
缩略图的标记十分简单, 一个 ul
里嵌套几个 li
元素. 这同样是超级灵活的, 只需在标记里面放入你任何类型的内容.
最后, 缩略图组件使用现有的网格系统属性, 像 .span2
或 .span3
, 以控制缩略图尺寸.
正如前面所提到的, 所需的标记是轻量的, 简单的. 下面就来看看 链接图像 的默认设置:
<ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> </a> </li> ... </ul>
对于在缩略图里自定义HTML内容, 标记的变化并不大. 为了允许块级内容在任何地方使用, 我们把 <a>
替换成 <div>
, 像这样:
<ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> <h3>Thumbnail label</h3> <p>Thumbnail caption...</p> </div> </li> ... </ul>
探讨提供的所有选项的各种网格属性. 你也可以混合使用匹配不同的尺寸.
在 .alert
里面添加任何文本内容和关闭按钮.
<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>警告!</strong> 温度过高. </div>
在移动设备的Safari和Opera浏览器中, 当使用<a>
标签用以关闭通知框, 除了在data-dismiss="alert"
属性之外, 还需要包含一个href="#"
.
<a href="#" class="close" data-dismiss="alert">×</a>
另外, 你可以使用<button>
元素的数据属性, 我们的文档就是使用这个元素. 当使用<button>
, 必须包含type="button"
, 或者表单中没有提交.
<button type="button" class="close" data-dismiss="alert">×</button>
使用 通知(alerts)jQuery插件 快速和容易的关闭通知.
对于较长的信息, 添加.alert-block
增加通知框顶部和底部的padding.
水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!水温过高!!
<div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> 水温过高!!水温过高!!水温过高!!水温... </div>
添加其他属性, 改变通知的含义.
<div class="alert alert-error"> ... </div>
<div class="alert alert-success"> ... </div>
<div class="alert alert-info"> ... </div>
默认的垂直渐变进度条.
<div class="progress"> <div class="bar" style="width: 60%;"></div> </div>
使用渐变创建一个条纹效果的进度条. 不支持IE6-8(求大家别用IE了!!!!!!!).
<div class="progress progress-striped"> <div class="bar" style="width: 20%;"></div> </div>
在 .progress-striped
添加 .active
, 创建一个从右到左移动的动画条纹. 同样不支持IE(为了你的身心健康, 请杜绝IE).
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>
将多个不同的进度条放在一个 .progress
里来堆叠它们.
<div class="progress"> <div class="bar bar-success" style="width: 35%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div> </div>
进度条使用一些相同的按钮和通知属性, 以获得一致的风格.
<div class="progress progress-info"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger"> <div class="bar" style="width: 80%"></div> </div>
类似的纯色, 我们有着各种不同的条纹进度条.
<div class="progress progress-info progress-striped"> <div class="bar" style="width: 20%"></div> </div> <div class="progress progress-success progress-striped"> <div class="bar" style="width: 40%"></div> </div> <div class="progress progress-warning progress-striped"> <div class="bar" style="width: 60%"></div> </div> <div class="progress progress-danger progress-striped"> <div class="bar" style="width: 80%"></div> </div>
进度条的效果使用了CSS3渐变, 过渡和动画. 这些不支持IE6-9和老版本的火狐.
IE10之前的版本和Opera12, 均不支持动画.
建立各种类型的组件的抽象对象样式(像博客评论, Tweets, 等等), 该功能沿着文本内容左对齐或右对齐图像.
默认的媒体浮动在一个媒体对象(图像, 视频, 音频)的左边或右边.
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... <!-- Nested media object --> <div class="media"> ... </div> </div> </div>
使用一些额外的标记, 你可以让媒体包含在列表内(对评论或文章列表十分有用).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... <!-- Nested media object --> <div class="media"> ... </div> </div> </li> </ul>
一个简单的元素效果, 给它添加另一个效果.
<div class="well"> ... </div>
有两个可选修饰属性, 控制padding和圆角.
<div class="well well-large"> ... </div>
<div class="well well-small"> ... </div>
使用通用的关闭图标来关闭内容(像对话框和通知框).
<button class="close">×</button>
如果你使用a标签, 在iOS设备需要包含一个 href="#" 用作点击事件.
<a class="close" href="#">×</a>
简单的, 集中的为小屏幕或行为做调整.
左浮动元素
class="pull-left"
.pull-left { float: left; }
右浮动元素
class="pull-right"
.pull-right { float: right; }
改变元素颜色为 #999
class="muted"
.muted { color: #999; }
清除元素浮动
class="clearfix"
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } }