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

    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-3,.col-md-9 {
    background-color:#dedef8;
    box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;
    }
    .col-md-7,.col-md-5 {
    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-3">
    <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-9">
    <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-7">
    <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-5">
    <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>

  • 相关阅读:
    angualr清除定时器
    flex布局常用属性
    将数组分割为几个等长度的子数组(使用slice)
    vue+element搭建的后台管理系统
    世界这么大,我想去看看!!!
    angularJs自定义指令(directive)实现滑块滑动
    适用初学者:vue2.0构建单页应用最佳实战
    笔记本win10安装node的尖酸历程。。。。。。
    js对数组处理(数组里边相同元素提取成map)
    快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)
  • 原文地址:https://www.cnblogs.com/melao2006/p/4985411.html
Copyright © 2011-2022 走看看