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>

    显示结果如下:

  • 相关阅读:
    IE6,IE7,IE8,Firefox 兼容的css hack以及常见兼容性问题
    BAT及各大互联网公司2014前端笔试面试题:HTML/CSS/JAVASCRIPT
    C语言学习
    HDU 3861 The King’s Problem 最小路径覆盖(强连通分量缩点+二分图最大匹配)
    HDU 2089 不要62【解题报告】
    POJ2762 Going from u to v or from v to u? 强连通分量缩点+拓扑排序
    HDU 1754 线段树入门解题报告
    2019/4/22 kmp模板
    2019/4/22 拓扑排序的高效写法. 模板题HDU1285:确定比赛名次
    HDU 2544最短路 【dijkstra 链式前向星+优先队列优化】
  • 原文地址:https://www.cnblogs.com/YyuTtian/p/4533808.html
Copyright © 2011-2022 走看看