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

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑

    <!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 href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
    .col-sm-3, .col-sm-9, .col-md-6, .col-lg-4, .col-lg-8 {
    background-color:#e5eecc;
    box-shadow:inset 1px -1px 1px #c3c3c3,inset -1px 1px 1px #c3c3c3;

    }
    </style>
    </head>
    <body>
    <div class="container">
    <h2>Hello Bootstrap</h2>
    <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" >
    <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-sm-9 col-md-6 col-lg-8">
    <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>

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

  • 相关阅读:
    Mac 上所有的命令行相关问题的总结
    ThinkPHP中的统计查询方法
    织梦任意页面调用{dede:field.content/}的方法
    PHP isset()、empty()、is_null()的使用区别详解
    Dede更新提示DedeTag Engine Create File False的解决办法
    cookie 和session 的区别
    织梦后台如何设置手机站
    PHP时间戳和日期转换
    dede列表页调用
    dede图集内容页调用
  • 原文地址:https://www.cnblogs.com/melao2006/p/4985503.html
Copyright © 2011-2022 走看看