zoukankan      html  css  js  c++  java
  • bootstrap栅格系统

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>study</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <!--
    栅格系统
        1、定义容器
            container:固定宽度
            container-fluid:宽度100%
        2、定义行
            row
        3、定义栅格:col-栅格参数-栅格占位数
            xs:手机(<768px)
            sm:平板(>=768px)
            md:中等屏幕(>=992px)
            lg:大屏幕(>=1200px)
        * 一行共12个栅格占位数,超过则换行
        * 小的栅格参数兼容大的屏幕
        * 大的栅格参数使用在小的屏幕,则每个栅格占一行
    -->
    <div class="container">
        <div class="row">
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
        </div>
    </div>
    <hr/>
    <div class="container">
        <div class="row">
            <div class="col-sm-6" style="border: 1px solid">.col-sm-6</div>
            <div class="col-sm-6" style="border: 1px solid">.col-sm-6</div>
        </div>
    </div>
    <hr/>
    <div class="container">
        <div class="row">
            <div class="col-md-6" style="border: 1px solid">.col-md-6</div>
            <div class="col-md-6" style="border: 1px solid">.col-md-6</div>
        </div>
    </div>
    <hr/>
    <div class="container">
        <div class="row">
            <div class="col-lg-6" style="border: 1px solid">.col-lg-6</div>
            <div class="col-lg-6" style="border: 1px solid">.col-lg-6</div>
        </div>
    </div>
    <hr/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
            <div class="col-xs-1" style="border: 1px solid">.col-xs-1</div>
        </div>
        <div class="row">
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
            <div class="col-xs-6" style="border: 1px solid">.col-xs-6</div>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    数学是最好的语言
    人类的语言--自然语言--》逻辑语言
    为什么大脑喜欢看图?
    思考是调用大脑存储的上下文对输入信息进行处理的过程
    Redis的相关问题总结
    TP5 关联模型使用(嵌套关联、动态排序以及隐藏字段)
    array_column 函数, 以及在PHP5.5之下的替代方法
    thinkphp在app接口开发过程中的通讯安全认证
    PHP开发APP接口实现--基本篇
    分布式与集群的区别是什么?
  • 原文地址:https://www.cnblogs.com/linding/p/13576122.html
Copyright © 2011-2022 走看看