Bootstrap之网格类
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link href="../css/bootstrap.min.css" rel="stylesheet"> 7 <title>Bootstrap Demo</title> 8 </head> 9 <body> 10 <h1>Bootstrap网格类</h1> 11 <!--默认分为12格--> 12 <div> 13 <div class="row"> 14 <div class="col-sm-6"> 15 <h1 class="page-header">Bootstrap</h1> 16 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 17 </div> 18 <div class="col-sm-6"> 19 <h1 class="page-header">Bootstrap</h1> 20 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 21 </div> 22 </div> 23 24 <div class="row"> 25 <div class="col-sm-8"> 26 <h1 class="page-header">Bootstrap</h1> 27 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 28 </div> 29 <div class="col-sm-4"> 30 <h1 class="page-header">Bootstrap</h1> 31 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 32 </div> 33 </div> 34 35 <!--网格嵌套--> 36 <div class="row"> 37 <div class="col-sm-3"> 38 <h1 class="page-header">Bootstrap</h1> 39 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 40 </div> 41 <div class="col-sm-9"> 42 <h1 class="page-header">Bootstrap</h1> 43 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 44 <div class="row"> 45 <div class="col-md-4"> 46 <h1 class="page-header">Bootstrap</h1> 47 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 48 </div> 49 <div class="col-md-4"> 50 <h1 class="page-header">Bootstrap</h1> 51 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 52 </div> 53 <div class="col-md-4"> 54 <h1 class="page-header">Bootstrap</h1> 55 <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 56 </div> 57 58 </div> 59 </div> 60 </div> 61 </div> 62 63 </body> 64 </html>
截图：
