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>

    截图:

  • 相关阅读:
    Jump Game II
    Trapping Rain Water
    First Missing Positive
    Median of Two Sorted Arrays
    noip2012开车旅行 题解
    AC自动机专题总结
    初探数位DP
    斯坦纳树 [bzoj2595][wc2008]游览计划 题解
    [bzoj3244][noi2013]树的计数 题解
    网络流模型小结
  • 原文地址:https://www.cnblogs.com/gongxr/p/10256398.html
Copyright © 2011-2022 走看看