---

1.布局概述

MisShop中，通过布局区域来实现页面元素的排放。
和通常的html规则相同，MisShop支持 表格布局，弹性布局，网格布局三类通用布局区域，以及九宫格等特殊区域。

• 表格：可以套用常见的数据表样式，第一行是列头，其余行是数据，行和列的格子必定对齐。

• 弹性布局：单行的布局，每一行有12柱宽度，该行的所有单元格评分宽度。如果某个单元格占有n个格子，那么它将获得n倍的宽度。可以通过样式配置格子的实际宽度。如果超出，默认是挤压，也可以通过样式配置，超出后折行。

• 网格布局：就是多行的弹性布局，每行都相当于一个弹性布局。

以模板生成的用户列表为例，我们来看看各种容器有什么功能。
页面设计界面里，用绿色的边线表示区域。

用户列表

用户列表页面可以看到有三个区域。
第一行：标题和按钮区，这是弹性布局区域。
第二行：查询区，这是网格布局区域。
第三行：数据表格区，这是表格区域。

我们先看看表格区域。

---

2.表格区域的控件配置

首先我们进入表格区域的控件设置。
1 选中表格中任意一个格子，例如C5。
2 鼠标右键选中控件（快捷键Ctrl+3），可以看到整个区域变成黄色，表示我们现在选中了区域。
3 鼠标右键选中控件配置（Ctrl+1)，就进入表格区域的控件配置了。

表格的控件配置

我们可以看到这是常见的控件配置界面，我们可以点击控件类型，将控件类型修改为 弹性布局，网格布局等。>
整体填充方式：如果网页比设计的区域大，那么表格是否要撑开填满。
列宽按设计尺寸：单元格的列宽是浏览器里根据列的内容自动调整，还是按照开发者的设计宽度。

3.表格区域的样式

首先我们进入表格区域的样式设置。

1 选中表格中任意一个格子，例如C5。
2 鼠标右键选中控件（快捷键Ctrl+3），可以看到整个区域变成黄色，表示我们现在选中了区域。
3 鼠标右键选中样式配置（Ctrl+2)，就进入表格区域的样式配置了。

表格区域样式配置

除了常见的样式组外，我们可以看到多了一个表格容器的样式组。这是表格的特有样式。
表格主题：默认是bootstrap风格，如果取消，那么就是普通表格。
单元格边款，隔行换色，背景色，悬浮换色，紧凑式等都是bootstrap自带的表格样式风格。