安信娱乐谁是老板

拼图开发文档

网格系统

简介

网格系统用于通过一系列的行与格子的组合创建页面布局,分单行和多行形式。

网格系统如同表格一样,相同的是可以放置很多单元格,不同的是表格不同的行tr安信娱乐谁是老板的约束,网格系统只要单元格数量加起来在12以内,就显示为一行,超过另起一行显示。

单行布局

单行布局为所有的格子在一行内;如果多行,则需要多个.grid容器或使用下文的多行布局。

.x
.x
.x
    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

单行多格

.x
.x
.x
.x
.x
.x
.x
.x
.x
.x
    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

强制换行

在需要换行的单元格后面加上.x100单元格,则强制换行:

.x
.x
.x
.x
.x
.x
.x
.x
.x
    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x100"></div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x100"></div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

单列布局

除了水平方向外,框架还定义了纵向单列的布局,需要在.grid的基础上叠加.grid-y样式,同时单元格样式则改为.y

.y
.y
.y
    <div class="grid grid-y" style="height:300px;">
      <div class="y">.y</div>
      <div class="y">.y</div>
      <div class="y">.y</div>
    </div>
  

多行布局

多行布局为将一行分为12个单元格,样式为.x1.x12

单元网格

.x1
.x1
.x1
.x1
.x1
.x1
.x1
.x1
.x1
.x1
.x1
.x1
    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
    </div>
  

合并单元网格

等份网格

.x2
.x2
.x2
.x2
.x2
.x2
.x3
.x3
.x3
.x3
.x4
.x4
.x4
.x6
.x6
    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
    </div>
    <div class="grid">
      <div class="x12">.x12</div>
    </div>
  
网络只能按1,2,3,4,6,12等份排列网格,在应用中也会常用到5等份的,框架特别增加了.x20网格,每格宽为20%,专用于5等份时排列。

不等份排列

不等份为格子不按平均分配,一行内数值在12以内的;

.x4
.x8
.x3
.x6
.x3
.x2
.x4
.x2
.x4
.x1
.x3
.x2
.x4
.x2
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x8">.x8</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x6">.x6</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x3">.x3</div>
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
      <div class="x2">.x2</div>
    </div>
  

自动宽

在固定的格子数、.x.x0,实现宽度自动填充;

.x4
.x
.x
.x0
.x3
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x">.x</div>
    </div>
    <div class="grid">
      <div class="x">.x</div>
      <div class="x0">.x0</div>
      <div class="x3">.x3</div>
    </div>
  

多行网格

安信娱乐谁是老板单行数值超过12时,则另起一行显示,形成多行网格:

.x6
.x6
.x6
.x6
.x3
.x9
.x12
.x4
.x6
.x2
.x3
.x5
.x4
.x4
.x4
.x4
.x4
.x4
.x4
.x4
.x4
.x4
    <div class="grid">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x9">.x9</div>
      <div class="x12">.x12</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x6">.x6</div>
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
  

强制换行

同时也可以用.x100强制换行

.x1
.x2
.x3
.x4
.x5
.x6
    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="w100"></div>
      <div class="x4">.x4</div>
      <div class="x5">.x5</div>
      <div class="x6">.x6</div>
    </div>
  

多列布局

在一列内.y安信娱乐谁是老板的数值在12以内一列,超过12则另起一列;

.y6
.y6
.y6
.y6
    <div class="grid grid-y" style="height:300px;">
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
    </div>
  

.y的基础上,增加.x安信娱乐谁是老板样式,可形成多列布局:

.x3.y6
.x3.y6
.x4.y6
.x4.y6
.x5.y6
.x5.y6
    <div class="grid grid-y" style="height:300px;">
      <div class="x3 y6">.x3.y6</div>
      <div class="x3 y6">.x3.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x5 y6">.x5.y6</div>
      <div class="x5 y6">.x5.y6</div>
    </div>
  

自动高

在预设好部份单元格高度的情况下,使用.y.y0可实现高度自动填充:

.y3
.y


.y
.y0
.y2
    <div class="grid grid-y" style="height:300px;">
      <div class="y3">.y3</div>
      <div class="y">.y</div>
    </div>
    <div class="grid grid-y" style="height:300px;">
      <div class="y">.y</div>
      <div class="y0">.y0</div>
      <div class="y2">.y2</div>
    </div>
  

强制换列

在预设好单元格宽度的情况下,使用.y100可强制换列:

.x4.y6
.x4.y6
.x4.y6
.x4.y6
.x4.y6
    <div class="grid grid-y" style="height:300px;">
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="y100"></div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
    </div>
  

对齐

因网格采用的是flex布局,所以上节弹性布局中的对齐样式,同样可应用在网格系统里。

横向对齐

即为主轴对齐,样式有.flex-start|center|end|between|around

.x2
.x2
.x2
.x2
.x2
.x2
.x2
.x2
.x2
    <div class="grid flex-center">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid flex-end">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid flex-between">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
  

纵向对齐

即为交叉轴对齐,样式有.flex-items-start|center|end|baseline|stretch

.x
.x
.x
.x4
.x4
.x4
.x2
.x3
.x4
    <div class="grid flex-items-start" style="height:100px;">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
    <div class="grid flex-items-center" style="height:100px;">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid flex-items-end" style="height:100px;">
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="x4">.x4</div>
    </div>
  

项目对齐

弹性项目的对齐,即为格子的对齐方式,样式有.flex-self-start|center|end|baseline|stretch

.x
.x
.x
    <div class="grid" style="height:100px;">
      <div class="x flex-self-start">.x</div>
      <div class="x flex-self-center">.x</div>
      <div class="x flex-self-end">.x</div>
    </div>
  

多行对齐

即在换行的情况下,多轴对齐方式,样式有.flex-content-start|center|end|between|around

.x6
.x6
.x12
.x3
.x5
.x6
.x6
.x12
.x3
.x5
    <div class="grid flex-content-center" style="height:160px;">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x12">.x12</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
    </div>
    <div class="grid flex-content-between" style="height:160px;">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x12">.x12</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
    </div>
  

排序

单元格按默认的节点排序,如需要改变顺序,可使用.order0-13安信娱乐谁是老板改变排序,0为排最前面,13为排最后面:

行排序

.x1
.x2
.x3
.x4
.x5
.x6
    <div class="grid">
      <div class="x1 order5">.x1</div>
      <div class="x2 order13">.x2</div>
      <div class="x3 order1">.x3</div>
      <div class="x4 order2">.x4</div>
      <div class="x5 order0">.x5</div>
      <div class="x6 order3">.x6</div>
    </div>
  

列排序

.y1
.y2
.y3
.y4
.y5
.y6
    <div class="grid grid-y">
      <div class="y1 order5">.y1</div>
      <div class="y2 order13">.y2</div>
      <div class="y3 order1">.y3</div>
      <div class="y4 order2">.y4</div>
      <div class="y5 order0">.y5</div>
      <div class="y6 order3">.y6</div>
    </div>
  

水平偏移

单元格叠加.move1-11样式,可以快速实现元素的水平方向偏移:

.x4
.x4
.x4
.x3
.x3
.x2
.x3
.x3
.x2
    <div class="grid">
      <div class="x4 move4">.x4</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4 move4">.x4</div>
    </div>
    <div class="grid">
      <div class="x3 move3">.x3</div>
      <div class="x3 move3">.x3</div>
    </div>
    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x3 move1">.x3</div>
      <div class="x3">.x3</div>
      <div class="x2 move1">.x2</div>
    </div>
  

自动偏移

配合盒子模型的.margin-left-auto.margin-center-auto.margin-right-auto可实现单元格自动偏移。

.x3
.x3
.x3
.x3
.x3
.x3
.x3
.x3
.x3
.x3
    <div class="grid">
      <div class="x3 margin-left-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-center-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-right-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3 margin-left-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3 margin-center-auto">.x3</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-right-auto">.x3</div>
      <div class="x3">.x3</div>
    </div>
  
margin高不是容器高的百分比,而是宽的,所以无法实现垂直的偏移效果。

内嵌套

安信娱乐谁是老板内嵌套大单元格内放网格,如同表格里的单元格内放整个表格:

.x6
.x6
.x8
.x4
.x4
.x8
.x6
.x3
.x4
.x5
.x6
    <div class="grid">
      <div class="x8">
        <div class="grid">
          <div class="x6">.x6</div>
          <div class="x6">.x6</div>
        </div>
        .x8
      </div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x6">
        <div class="grid">
          <div class="x4">.x4</div>
          <div class="x8">.x8</div>
        </div>
        .x6
      </div>
      <div class="x6">
        <div class="grid">
          <div class="x3">.x3</div>
          <div class="x4">.x4</div>
          <div class="x5">.x5</div>
        </div>
        .x6
      </div>
    </div>
  

列嵌套

.y6
.y6
.x4
.x8
    <div class="grid grid-y" style="height:300px;">
      <div class="y8">
        <div class="grid grid-y">
          <div class="y6">.y6</div>
          <div class="y6">.y6</div>
        </div>
      </div>
      <div class="y4">
        <div class="grid">
          <div class="x4">.x4</div>
          <div class="x8">.x8</div>
        </div>
      </div>
    </div>
  

网格间距

默认的网格之间是没有间距的,可以给单元格的内容加上填充或边距方式获取间距;因此框架定义.grid-大小来处理单元格之间的边距,大小分别为minismallmiddlebiglarge五个等级:

.grid网格间距需要包含在.grid-大小上使用;

.x
.x
.x
.x4
.x4
.x4
.x
.x
.x
.x4
.x4
.x4
.x
.x
.x
    <div class="grid-mini">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-small">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-middle">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-big">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-large">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
  

配合容器使用

因边距处理的关系,使用网格间距.grid-大小与容器叠加使用时,建议填充值为1rem,如.container .grid-small.padding .grid-big样式。

.x
.x
.x
.x4
.x4
.x4
.x
.x
.x
.x4
.x4
.x4
.x
.x
.x
    <div class="grid-mini padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-small padding">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-middle padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-big padding">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-large padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
  

列间距

同样,在列垂直布局的情况下,间距同样适用。

.y
.y
.y
    <div class="grid-middle padding" style="height:300px;">
      <div class="grid">
        <div class="y">.y</div>
        <div class="y">.y</div>
        <div class="y">.y</div>
      </div>
    </div>
  

九宫格

根据网格系统,快速使用行.x和列.y实现九宫格布局实例:

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
    <div class="grid-big padding">
      <div class="grid">
        <div class="x4">1</div>
        <div class="x4">2</div>
        <div class="x4">3</div>
        <div class="x4">4</div>
        <div class="x4">5</div>
        <div class="x4">6</div>
        <div class="x4">7</div>
        <div class="x4">8</div>
        <div class="x4">9</div>
      </div>
    </div>

    <div class="grid-middle padding">
      <div class="grid grid-y" style="height:300px;">
        <div class="y4">1</div>
        <div class="y4">2</div>
        <div class="y4">3</div>
        <div class="y4">4</div>
        <div class="y4">5</div>
        <div class="y4">6</div>
        <div class="y4">7</div>
        <div class="y4">8</div>
        <div class="y4">9</div>
      </div>
    </div>

    <div class="grid-small padding">
      <div class="grid grid-y" style="height:300px;">
        <div class="w4 y4">1</div>
        <div class="w4 y4">2</div>
        <div class="w4 y4">3</div>
        <div class="w4 y4">4</div>
        <div class="w4 y4">5</div>
        <div class="w4 y4">6</div>
        <div class="w4 y4">7</div>
        <div class="w4 y4">8</div>
        <div class="w4 y4">9</div>
      </div>
    </div>
  
合理使用网格系统,便利网页排版,实现快速布局开发,下一节,我们将实现响应式网格系统,可在不同设备响应显示不同的单元格数量,实现页面的适配。