zoukankan      html  css  js  c++  java
  • Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练作品: 堆叠水平</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <style>
    .col-md-6 {
    background-color:#dedef8;
    box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;

    }
    </style>


    </head>
    <body>
    <div class="container">
    <h2>Hello Bootstrap</h2>
    <div class="row">
    <div class="col-md-6">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </p>

    <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.
    </p>
    </div>

    <div class="col-md-6">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </p>

    <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.
    </p>
    </div>
    </div>
    </div>
    <section class="container">
    <h2>Hello Bootstrap</h2>
    <aside class="row">
    <article class="col-md-6">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </p>

    <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.
    </p>
    </article>
    <article class="col-md-6">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </p>

    <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.
    </p>
    </article>
    </aside>


    </section>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    方格取数+ 传纸条 noip2000 + noip2008 DP
    题解 P1103 【书本整理】
    CF212D 【Cutting a Fence】
    CF339D 【Xenia and Bit Operations】
    旅行 NOIP2018 luogu P5022
    CodeFores 集合
    战略游戏 SDOI2018 圆方树 + 树上倍增求点权和
    树网的核 NOIP 2007 luogu P1099
    P2341 [USACO03FALL][HAOI2006]受欢迎的牛 G
    NOIP 2017 P3959 宝藏 (状态压缩DP板子)
  • 原文地址:https://www.cnblogs.com/melao2006/p/4985400.html
Copyright © 2011-2022 走看看