11-排版

bootstrap提供一套css样式来进行排版。

标题

h1到h6的标题和.h1到.h6的class样式：

<div class="row">
	<div class="col-md-12">
		<h1>h1. Bootstrap heading</h1>
		<h2>h2. Bootstrap heading</h2>
		<h3>h3. Bootstrap heading</h3>
		<h4>h4. Bootstrap heading</h4>
		<h5>h5. Bootstrap heading</h5>
		<h6>h6. Bootstrap heading</h6>  
	</div>		
	<div class="col-md-12">
		<div class="h1">h1. Bootstrap heading</div>
		<div class="h2">h2. Bootstrap heading</div>
		<div class="h3">h3. Bootstrap heading</div>
		<div class="h4">h4. Bootstrap heading</div>
		<div class="h5">h5. Bootstrap heading</div>
		<div class="h6">h6. Bootstrap heading</div>  
	</div>				
</div>Code language: HTML, XML (xml)

还可以有一个副标题，就是在h1等里面加上一个small：

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>Code language: HTML, XML (xml)

页面主体 p标签

将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

<p class="lead">...</p> 可以使得文章里面的某一些句子字体大一些，颜色深一些。

内联文本元素

文章里面有些凸显的关键字可以加一个mark标记：

You can use the mark tag to <mark>highlight</mark> text.Code language: HTML, XML (xml)

就会有一个黄色的背景颜色。

被删除的文本

对于被删除的文本使用 <del> 标签：

<del>This line of text is meant to be treated as deleted text.</del>Code language: HTML, XML (xml)

还可以用 <s> 这个标记。

插入文本

额外插入的文本使用 <ins> 标签，就是使得这段文字有一个下划线：

<ins>This line of text is meant to be treated as an addition to the document.</ins>Code language: HTML, XML (xml)

当然也可以使用 <u>。

小号文本

字体稍微小一点：

<small>This line of text is meant to be treated as fine print.</small>Code language: HTML, XML (xml)

着重

通过增加 font-weight 值强调一段文本：

<strong>rendered as bold text</strong>Code language: HTML, XML (xml)

斜体

<em>rendered as italicized text</em>Code language: HTML, XML (xml)

对齐

可以使得某个div或者col里面的内容左右中对齐，通过文本对齐类可以简单方便的将文字重新对齐：

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Code language: HTML, XML (xml)

改变大小写

通过这几个类可以改变文本的大小写：

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Code language: HTML, XML (xml)

缩略语

有一个底部的虚横线：

<abbr title="attribute">attr</abbr>Code language: HTML, XML (xml)

首字母缩略语，为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些：

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Code language: HTML, XML (xml)

引用

字体变大，左侧有一个灰色宽一点的边框：

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Code language: HTML, XML (xml)

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理：

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>Code language: HTML, XML (xml)

表格

有一个table的class的样式类：

<table class="table"> ... </table>Code language: HTML, XML (xml)

还可以有隔行换色的表格：

<table class="table table-striped"> ... </table>Code language: HTML, XML (xml)

带边框的表格：

<table class="table table-bordered"> ... </table>Code language: HTML, XML (xml)

鼠标经过行换色的标题：

<table class="table table-hover"> ... </table>Code language: HTML, XML (xml)

压缩一点的表格：

<table class="table table-condensed"> ... </table>Code language: HTML, XML (xml)