标签：
在网页制作中，往往会显示指定宽度的表格，可以采用Bootstrap中的网格来实现。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。下面是 Bootstrap 网格的基本结构：
1 <div class="container"> 2 <div class="row"> 3 <div class="col-*-*"></div> 4 <div class="col-*-*"></div> 5 </div> 6 <div class="row">...</div> 7 </div> 8 <div class="container">....
如果在表格中实现，方法如下：
1 <body> 2 <div class="container"> 3 <br> 4 <br> 5 <form name="input" action="/test" method="get" class="text-success text-center"> 6 Please Enter Plate: <input type="text" name="user"> 7 <input type="submit" value="Submit" class="text-success"> 8 </form> 9 <br> 10 <br> 11 <% for(var i = 0;i < TotalLength%10;i++){ 12 var orderindex = 0; 13 %> 14 <table class="table table-bordered table-striped table-hover" width="30%"> 15 <thead> 16 <tr> 17 <th class="text-success text-center"><%= plateArrayView[i] %></th> 18 <th class="text-center">时间</th> 19 <th class="text-center">地点</th> 20 </tr> 21 </thead> 22 </table> 23 </div>
在下面的实例中，布局有两个列，第二列被分为两行四个盒子,为嵌套列：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 嵌套列</title> 5 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="/scripts/jquery.min.js"></script> 7 <script src="/bootstrap/js/bootstrap.min.js"></script> 8 </head> 9 <body> 10 11 <div class="container"> 12 13 <h1>Hello, world!</h1> 14 15 <div class="row"> 16 17 <div class="col-md-3" style="background-color: #dedef8;box-shadow: 18 inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 19 <h4>第一列</h4> 20 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 21 </div> 22 23 <div class="col-md-9" style="background-color: #dedef8;box-shadow: 24 inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 25 <h4>第二列 - 分为四个盒子</h4> 26 <div class="row"> 27 <div class="col-md-6" style="background-color: #B18904; 28 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 29 <p>Consectetur art party Tonx culpa semiotics. Pinterest 30 assumenda minim organic quis. 31 </p> 32 </div> 33 <div class="col-md-6" style="background-color: #B18904; 34 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 35 <p> sed do eiusmod tempor incididunt ut labore et dolore magna 36 aliqua. Ut enim ad minim veniam, quis nostrud exercitation 37 ullamco laboris nisi ut aliquip ex ea commodo consequat. 38 </p> 39 </div> 40 </div> 41 42 <div class="row"> 43 <div class="col-md-6" style="background-color: #B18904; 44 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 45 <p>quis nostrud exercitation ullamco laboris nisi ut 46 aliquip ex ea commodo consequat. 47 </p> 48 </div> 49 <div class="col-md-6" style="background-color: #B18904; 50 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 51 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 52 sed do eiusmod tempor incididunt ut labore et dolore magna 53 aliqua. Ut enim ad minim.</p> 54 </div> 55 </div> 56 57 </div> 58 59 </div> 60 61 </div> 62 63 </body> 64 </html>
标签：
原文地址：http://www.cnblogs.com/cocos2014/p/4208099.html
