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>

  • 相关阅读:
    爬虫|如何在Pycharm中调试JS代码
    nexus 6p 输入8.1和获取root权限
    年近30的我,离开了北京,回家做个老百姓,等待那一刻的发生!
    Azure认知服务的实际应用-资讯采集推送
    C#类库推荐 拼多多.Net SDK,开源免费!
    [翻译]EntityFramework Core 2.2 发布
    4-如何学习和解决问题
    3-WIN10系统及开发工具支持
    2-选择学习的目标和方向
    1-编程的基本条件和起步
  • 原文地址:https://www.cnblogs.com/melao2006/p/4985503.html
Copyright © 2011-2022 走看看