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

    一、概念:

    ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列

    ②栅格系统其实就是行和列的布局,网格状布局,通过一系列的行(row)与列(column)创建页面布局,你的内容就可以放入创建好的布局中。

    二、行和列

    ①行是类名row,其中container容器默认有15px的左右内间距 ,row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸

      <div class="container">
          <div class="row">
            第一行
          </div>
          <div class="row">
            第二行
          </div>
      </div>
        .container{
            height: 100px;
            background: #ccc;
          }
          /* 推荐使用子代选择器 */
          .container>.row:first-child{
            height: 50px;
            background: green;
          }
          .container>.row:last-child{
            height: 50px;
            background: yellow;
          }

    ②列是类名col,col可以配合媒体查询使用,格式是col-屏幕大小-数字,其中:

    • 屏幕大小 lg 代表大屏设备以上生效包含本身,比如col-lg-4
    • 屏幕大小md 代表中屏设备以上生效包含本身,比如col-md-4
    • 屏幕大小sm 代表小屏设备以上生效包含本身,比如col-sm-4
    • 屏幕大小xs 代表超小屏设备以上生效包含本身,比如col-xs-4
    • 数字代表占多少份,默认分成12等份 ,比如col-lg-8
       <div class="container">
          <div class="row">
            <div class="col-xs-2 col-sm-4 col-md-6 col-lg-8">第一列</div>
            <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">第二列</div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1">第三列</div>
          </div>
        </div>
         .container{
            height: 100px;
            background: #ccc;
          }
          .container>.row{
            height: 50px;
            background: green;
          }
          .container>.row>div{
            height: 50px;
            border: 10px solid #000;
          }

    三、扩展功能

    ①栅格嵌套

        <div class="container">
          <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-xs-6"></div>
                    <div class="col-xs-6"></div>
                </div>
            </div>
          </div>
        </div>
          .container{
            height: 100px;
            background: #ccc;
          }
          .container>.row{
            height: 50px;
            background: green;
          }
          .container>.row>div{
            height: 50px;
            border: 10px solid #000;
          }
          .container>.row>div>.row>div{
              height: 30px;
              border: 5px solid yellow;
          }
     

    ②列的偏移

        <div class="container">
          <div class="row">
            <div class="col-xs-4">第一列</div>
            <div class="col-xs-4 col-xs-offset-3">第二列</div>
          </div>
        </div>
          .container{
            height: 100px;
            background: #ccc;
          }
          .container>.row{
            height: 50px;
            background: green;
          }
          .container>.row>div{
            height: 50px;
            border: 10px solid #000;
          }
      

    ③列的排序

       <div class="container">
          <div class="row">
            <div class="col-xs-4 col-xs-push-8">第一列(push往后推)</div>
            <div class="col-xs-4 col-xs-pull-4">第二列(pull往前拉)</div>
          </div>
        </div>
          .container{
            height: 100px;
            background: #ccc;
          }
          .container>.row{
            height: 50px;
            background: green;
          }
          .container>.row>div{
            height: 50px;
            border: 10px solid #000;
          }

  • 相关阅读:
    实验四 Linux系统搭建C语言编程环境
    实验三 Linux系统用户管理及VIM配置
    实验二 Linux系统简单文件操作命令
    《Linux命令行与shell脚本编程大全》勘错
    考研英语每天一段阅读理解
    仓储管理系统500bug记录一下mysql 8小时超时解决办法
    win7 64位4GB内存下 tomcat7扩大内存
    解决远程连接mysql错误1130代码的方法
    win7 64 位 tomcat 定时重启脚本
    通过Navicat for MySQL远程连接的时候报错mysql 1130
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9347548.html
Copyright © 2011-2022 走看看