1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BootStrap</title> 6 <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> 7 <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> 8 <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script> 9 10 11 <script type="text/javascript" src="../../resources/js/html5.js"></script> 12 <!--解决手机上的显示问题--> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 <!--解决IE低版本问题--> 15 <!--[if lt IE9]> 16 <script type="text/javascript" src="../../resources/js/html5.js"></script> 17 <![endif]--> 18 </head> 19 <body> 20 <div class="container"> 21 <h1 class="page-header">布局 22 <small>使用BootStrap网格布局</small> 23 </h1> 24 <p>段落文字</p> 25 <div class="row"> 26 <div class="span4"> 27 <h2 class="page-header">区块1</h2> 28 <p>段落文字</p> 29 </div> 30 <div class="span4"> 31 <h2 class="page-header">区块2</h2> 32 <p>段落文字</p> 33 </div> 34 <div class="span4"> 35 <h2 class="page-header">区块3</h2> 36 <p>段落文字</p> 37 </div> 38 </div> 39 </div> 40 </body> 41 </html>
说明：
container作为网格布局的容器，设置后，内部的所有内容，都会左右两边空出一定距离后居中显示
row内部的所有元素，都横向排列
span4 表示内部元素占用4格，同理：span1就是一格
对于BootStrap而言，其将显示屏幕横向分成了12格（这也就是为什么叫它网格布局的原因了）
显示效果如下：
BootStrap3和BootStrap2是不兼容的，类名发生了变化
如上面的span4，是BootStrap2中的类名，在BootStrap3中，其类名为 col-sm-4