使用Bootstrap网格系统布局网页

2014年3月10日 19:29:10

引入相关文件:

<link href="../css/bootstrap.css" rel="stylesheet">

<script src="../js/jquery-1.8.3.js"></script>

<script src="../js/bootstrap.js"></script>

<div class="container">使用container类设定了宽度并且可以使内容居中.

2014年3月11日 09:59:09

分区块划分:

效果:

代码:

<!---

(注意:这里遵循960 12栏 网格布局方式)使用span4(代表使用12格的占用4格空间)来将row的区域分割为3块

如果要使用占用5栏的区块则class为:span5 以此类推.....

-->

<div class="row">

<div class="span4">

    <h2 class="page-header">区块1</h2>

    <p>一.....</p>

</div>

<div class="span4">

    <h2 class="page-header">区块2</h2>

    <p>交刻,爱和孤独便都有了着落.....</p>

</div>

<div class="span4">

    <h2 class="page-header">区块3</h2>

    <p>人群聚集之处,必有孤独.

爱和.....</p>

</div>

</div>