1、
<h1 class=\'page-header\'>布局<small> 使用bootstrap网格系统布局网页</small></h1>
得到如图所示：
2、给需要的元素添加一个容器，使其居中显示
<div class=\'container\'>
<h1 class=\'page-header\'>布局<small> 使用bootstrap网格系统布局网页</small></h1>
</div>
得到如图所示：如果需要更确切的效果请自行给上面的div设置border查看，是否是.container容器使其中间的元素居中了
3、设置3段文字，让这三段文字在同一行显示
<div class=\'container\'>
<h1>布局 <small>bootstrap 布局</small></h1>
<h2>栏目一</h2>
<p>段落1</p>
<h2>栏目二</h2>
<p>段落2</p>
<h2>栏目三</h2>
<p>段落3</p>
</div>
以上标签显示效果如图：
首先请了解bs的栅格系统：http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html
<div class=\'container\'>
<h1>布局 <small>bootstrap 布局</small></h1>
<!--在需要调整的元素外包围一个class位\'row\'的div-->
<div class=\'row\'>
<div class=\'span4\'>
<h2>栏目一</h2>
<p>段落1</p>
</div>
<div class=\'span4\'>
<h2>栏目二</h2>
<p>段落2</p>
</div>
<div class=\'span4\'>
<h2>栏目三</h2>
<p>段落3</p>
</div>
</div>
</div>
说明：注意查看class=\'span4\', 这里的例子是将“栏目一”，‘栏目二’，‘栏目三’这三个段落显示在1行中，那么首先在这三个元素外围包围一个div且class=\'row\',其次 每个"栏目"设定一个合适的值，作为每个段落外围包围的div的class中 spanN 中N，但是要保证 N+N+N = 12 ；这里的即是4+4+4 = 12;
效果如图：（将每个栏目的布局平均分成了4份，所以给的class=\'span4\'）你也可以根据需求或偏好自行设定，但要保证在一行中，所设定的所有spanN中的N相加之和等于12；
固定布局：不会随着浏览器窗口大小的改变而改变布局
应用的class是上面用到的class=\'container\',class=\'row\'
流动布局：会随着浏览器窗口的大小改变布局
应用到class是则应该为class=\'container-fluid\', class=\'row-fluid\'