Bootstrap页面布局3 - BS布局以及流动布局

一、

　　<h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>

　　获得如图所示：

　　　　　　　　

二、给须要的元素添加一个容器，使其居中显示

　　<div class='container'>

　　　　<h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>

　　</div>

　　获得如图所示：若是须要更确切的效果请自行给上面的div设置border查看，是不是.container容器使其中间的元素居中了

　　　　　　　　

三、设置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'