页面内容

文章排版

排版定义了各种标题、段落、列表及其他内联元素的样式，您可以创建标题、段落、列表及其他内联元素。

类	描述
.h1~.h6	设置为标题样式
.small、.mark、.pre、.nobr、.u、.s、.i、.b	和HTML有相同样式的class
.text-body	正文文本
.text-muted	减弱文本
.list-unstyled	移除默认的列表样式
.list-inline .list-inline-item	将所有列表项放置同一行
.line-{n}	强制高度为n行
.line-max-{n}	高度不得超过n行
.line-min-{n}	高度至少为n行

例子

超级链接

类	描述
.link-primary	主要链接
.link-secondary	次级链接
.link-disabled	禁用链接
.link-stretched	链接作用到容器

link-primary例子 link-secondary例子 link-disabled禁用 link-success例子 link-info例子 link-warning例子 link-danger例子 link-no-decoration无下划线

页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

<h1 class="page-header">页头</h1>

表格

类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-sm	让表格更加紧凑
.table-responsive	响应式表格
.table-fixed	强制固定表格宽度
.table-active .table-primary .table-success .table-info .table-warning .table-danger	语境类

例子

图片

类	描述
.img-rounded	圆角
.img-circle	圆形
.img-thumbnail	带边框
.img-fluid	响应式图片

固定比例媒体

类	描述
.ratio	固定比例媒体容器
.ratio-1x1	1:1容器
.ratio-16x9	16:9容器
.ratio-4x3	4:3容器
.ratio-item	媒体内容

媒体对象

<div class="media">
	<div class="media-left">
		<a href="#"><img class="media-object" src="http://placeholder.qiniudn.com/64x64" width="64" height="64"/></a>
	</div>
	<div class="media-right">
		<a href="#"><img class="media-object" src="http://placeholder.qiniudn.com/64x64" width="64" height="64"/></a>
	</div>
	<div class="media-center">
		<h4 class="media-heading">Media heading</h4>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
	</div>
</div>

media

列表

类	描述
.list	只带有横线的列表
.list-dashed	虚线列表
.list-flush	没有边框的列表
.list-bordered	含有边框的列表
.list-striped	隔行变色
.list-hover	鼠标经过样式
.list-item-success .list-item-info .list-item-warning .list-item-danger	列表项的语境色
.active	列表项的活动样式

效果演示

分割线

<div class="divider"></div>

<div class="divider text-center">
	<h3 class="divider-text">水平居中</h3>
</div>

类	描述
.divider	水平分割线
.divider-text	分割线内部文字
.divider-left	水平居左
.divider-center	水平居中
.divider-right	水平居右

卡片

通过缩略图组件扩展和栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

<a href="#" class="card">
	<img src="..." alt="...">
</a>

示例

巨幕

类	描述
.jumbotron	延伸至整个浏览器视口来展示网站上的关键内容。

网站底部

类	描述
.footer	网站底部