zoukankan      html  css  js  c++  java
  • 03 网格系统

    //实现原理

    <div class="container"> //必须在容器之内
      <div class="row"> //最多12行
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
      <div class="row">//行的意思
        <div class="col-md-1">.col-md-1</div>//列的意思
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
    </div>

    显示结果如下:

    //工作原理

    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-7">.col-md-7</div>//加在一起不能大于12
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>//加在一起不能大于12
      </div>
      <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>//加在一起不能大于12
      </div>
    </div>
    显示结果如下:

    //列偏移

    <div class="container">
      <h4>列向右移动四列的间距</h4>
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
          <div class="col-md-2">.col-md-3</div> //4+2+4+2 不能大于12
        </div>
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> //4+4+4 不能大于12
        </div>
    </div>
    <br />
    <h4>发生行断裂</h4>
      <div class="container">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
          <div class="col-md-2">.col-md-3</div> //4+2+4+2 不能大于12
        </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> //4+4+4 不能大于12
        </div>
      <div class="row">
        <div class="col-md-3">.col-md-3</div>
          <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
          <div class="col-md-4">col-md-4</div>//3+3+3+4=13 >12 会另起一行
      </div>
    </div>

    显示结果如下:

    //列排序(两个列交换位置)

    <div class="container">
      <div class="row">
        <div class="col-md-4 ">.col-md-4</div>
        <div class="col-md-8 ">.col-md-8</div>
      </div>
    </div>

    显示结果如下:

    列交换位置:

    <div class="container">
      <div class="row">

        <div class="col-md-4 col-md-push-8">.col-md-4</div>

        <div class="col-md-8 col-md-pull-4">.col-md-8</div>

      </div>

    </div>

    显示结果如下:

    //列嵌套表格

    <div class="container">
      <div class="row">
        <div class="col-md-8">
          我的里面嵌套了一个网格
          <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
          <div class="row">
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
          </div>
        </div>
        <div class="col-md-4">col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">
          我的里面嵌套了一个网格
          <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
          </div>
          <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
          </div>
        </div>
      </div>
    </div>

    显示结果如下:

  • 相关阅读:
    IDEA创建WEB项目部署详细步骤
    Java计算两个日期相差的天数
    使用Callable和Future创建线程
    Java使用POI导出Excel表格
    关于Intellij IDEA的使用小技巧
    python描述符
    登录百度下载博客
    WINDOWS下Mysql的安装
    迭代器就是重复地做一些事情,可以简单的理解为循环,在python中实现了__iter__方法的对象是可迭代的,实现了next()方法的对象是迭代器,这样说起来有
    Python札记 -- 装饰器
  • 原文地址:https://www.cnblogs.com/YyuTtian/p/4533808.html
Copyright © 2011-2022 走看看