zoukankan      html  css  js  c++  java
  • bootStrap小结2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!--屏幕和设备的屏幕保持一致,初始缩放为100%,禁止用户缩放-->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
        <title>栅格系统</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.css">
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-2.0.3.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            div[class*='col-'] {
                border: solid 1px blue
            }
        </style>
    </head>
    <body style="background-color: gray">
    <div class="container-fluid" style="background-color: white">
        栅格系统
        <!--xs超小型,适合手机-->
        <!--sm小型,适合平板-->
        <!--md中等,适合PC-->
        <!--lg大型,适合大桌面显示器-->
        <div class="row">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1">col-2</div>
            <div class="col-md-1">col-3</div>
            <div class="col-md-1">col-4</div>
            <div class="col-md-1">col-5</div>
            <div class="col-md-1">col-6</div>
            <div class="col-md-1">col-7</div>
            <div class="col-md-1">col-8</div>
            <div class="col-md-1">col-9</div>
            <div class="col-md-1">col-10</div>
            <div class="col-md-1">col-11</div>
            <div class="col-md-1">col-12</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
            <div class="col-md-1">over</div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
            <div class="col-md-4">
                <img src="fig.jpg" class="img-responsive img-thumbnail"/>
                <h3 class="page-header">h3</h3>
                <p>句子句子句子句子句子句子句子句子句子</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">col-1</div>
            <div class="col-md-6">col-2</div>
        </div>
        <div class="row">
            <div class="col-md-2">col-1</div>
            <div class="col-md-3">col-2</div>
            <div class="col-md-7">col-3</div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                内容
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-2 col-md-offset-3">2</div>
        </div>
    
        <div class="row">
            <div class="col-md-4 col-md-push-8">4</div>
            <div class="col-md-8 col-md-pull-4">8</div>
        </div>
    </div>
    
    </body>
    </html>
    
  • 相关阅读:
    三数之和(排序+双指针)
    数值的整数次方(类快速幂)
    Z字形变换
    相交链表
    牛妹的蛋糕
    安置路灯
    迷路的牛牛
    Office 2003的卸载 与 Office 2013 的安装
    解决“飞鸽传书”无法显示局域网用户的方法
    bcd(Binary-Coded Decimal‎缩写)
  • 原文地址:https://www.cnblogs.com/zhengyb/p/10007859.html
Copyright © 2011-2022 走看看