zoukankan      html  css  js  c++  java
  • 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>

    截图:

  • 相关阅读:
    洛谷 P1879 [USACO06NOV]玉米田Corn Fields
    洛谷 P2709 小B的询问
    洛谷 P1972 [SDOI2009]HH的项链
    洛谷 P3648 [APIO2014]序列分割
    洛谷 P2157 [SDOI2009]学校食堂
    洛谷 P1198 [JSOI2008]最大数
    洛谷 P3870 [TJOI2009]开关
    【模板】线段树2
    【模板】线段树1
    git之远程标签下载(远程分支)
  • 原文地址:https://www.cnblogs.com/gongxr/p/10256398.html
Copyright © 2011-2022 走看看