bootstrap分为12栏，若想要一个元素占用一定的栏数的宽度，可以在这个元素上用一个特定的类，就比如说span1、span2....类。
定义的布局：
- 定义page-header类，在这个类当中为元素添加特殊的样式
- 用small标签给元素添加一个小标题，（small标签会为文字改变字体和颜色，以另一种形式表现出来）
- 用<p></p>标签添加一段文字
- 在内容周围添加一个大容器<div></div>，将以上的内容放置在<div></div>容器当中
- 将文字进行排版时，在同一排的文字定义在row类当中，就如<div class="row">.....</div>
- 在同一排中，不同的文字区域站不同的栏数，若想使三块文字分别平分页面的12栏，三块文字可分别定义为span4就比如<div class="span4">.....</div>
<div class="container">
<h1 class="page-header">布局<small>使用Bootstrap网格系统布局网页</small></h1>
<p>曾经在某一瞬间，我们都以为自己长大了。但是有一天，我们终于发现，长大的含义除了欲望，还有勇气、责任、坚强以及某种必须的牺牲。在生活面前我们还都是孩子， 其实我们从未长大，还不懂爱和被爱。——《与青春有关的日子》</p>
<div class="row">
<div class="span4"> <h2 class="page-header">文一</h2>
<p>人生由淡淡的悲伤和淡淡的幸福组成，在小小的期待、偶尔的兴奋和沉默的失望中度过每一天，然后带着一种想说却又说不出的“懂”，做最后的转身离开。</p>
</div>
<div class="span4"> <h2 class="page-header">文二</h2>
<p>黄昏的树林里分出两条路。我选择了其中一条，留下一条改日再走。可是，我知道每一条路都绵延无尽头。一旦选定，就不能返回，从此决定了一生的道路。 ——《未选择的路》</p>
</div>
<div class="span4"> <h2 class="page-header">文三</h2>
<p>不要试图去解释这个世界上任何的误解和扭曲，存在的都是真理，任何人的成功，都不是虚头，他们一定付出了你没有想到的努力和代价，才华、机遇、运气、努力、外貌，甚至是不光彩的事情，都是存在，没什么值得怀疑。——这么远那么近《每一个优秀的人，都有一段沉默的时光》</p>
</div>
</div>
</div>