HTML模板 文档
< / div >模块
Flex Grid System
HTML Website Template uses the specially developed Flex Grid system. This system in a more multipurpose and flexible solution, in comparison to Bootstrap Grid.
Different aspects of default Flex Grid functionality are covered in the following table:
XXS设备 (< 480px) |
XS设备 (≥ 480px) |
SM设备 (≥ 768px) |
医学设备 (≥ 992px) |
LG电子设备 (≥ 1200px) |
Xl设备 (≥ 1800px) |
|
---|---|---|---|---|---|---|
网格进行 | 即时流 | Collapsed to start, horizontal above breakpoints | ||||
Container width | 300~450px, Fluid | 750px | 970px | 1170px | 1770px | |
前缀类 | .细胞- - - - - - | .细胞- - - - - -xs - | .细胞- - - - - -sm - | .细胞- - - - - -md - | .细胞- - - - - -lg - | .细胞- - - - - -xl - |
列数 | 1 | 12 | ||||
列宽 | 100% | ~25 → ~37px | ~62px | ~81px | ~97px | ~149px |
水槽宽度 | 30px (15px on each column side) | |||||
嵌套 | 是的 | |||||
抵消 | No | 是的 | ||||
Columns order control | No | 是的 | ||||
Horizontal align control | No | 是的 | ||||
Vertical align contro | No | 是的 | ||||
反向 | No | 是的 |
嵌套列
To create nested columns in Grid system, add a new .范围和 .细胞- * - * target columns to an existing column.
1级: .细胞- * 9
|
级.1: .细胞- * 1 | 级.1: .细胞- * 1 | 级.1: .细胞- * 1 |
E.g.:
1级: .细胞- - - - - -md -9
2级: .细胞- - - - - -md -6
2级: .细胞- - - - - -md -6
Attention: nested columns width is determined based on parent column width, not the container width.
列偏移量
To add offset for a column, use the .细胞- - - - - -*-preffix-* 类:
.细胞- * 4 |
E.g.,
1级: .细胞- - - - - -md -4
Columns reverse
To reverse columns order in a .范围,添加 .范围- * 类或 .范围- *-reverse 类:
-
- .范围- *-reverse
- inverts columns order, starting 从 the specified resolution.
-
- .范围- *
- restores the initial columns order, if .范围- *-reverse is used for a smaller resolution.
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
Disabling gutter
To disable column gutter, add the .范围-condensed class to the parent block with .范围 class.
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
Vertical alignment control
To align columns vertically, use one if the following 类:
-
- .范围- *中间
- aligns all the nested columns of the 1st level in the middle;
.细胞- * 6 | |
.细胞- * 6 | |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
-
- .范围- *底部
- aligns all the nested 1st-level columns in the bottom;
.细胞- * 6 | |
.细胞- * 6 |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
-
- .范围- *最高
- aligns all the nested 1st-level columns on top;
.细胞- * 6 | .细胞- * 6 |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
-
- .细胞- *中间
- aligns the target column in the middle;
.细胞- * 6 | |
.细胞- * 6.细胞- *中间 | |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
-
- .细胞- *最高
- aligns the target column on top;
.细胞- * 6 | .细胞- * 6.细胞- *最高 |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
-
- .细胞- *底部
- aligns the target column to the bottom.
.细胞- * 6 | |
.细胞- * 6.细胞- *底部 |
E.g.:
1级: .细胞- - - - - -md -6
1级: .细胞- - - - - -md -6
Horizontal align control
To align columns horizontally, use one of the following 类:
-
- .范围- *离开
- aligns nested columns to the left;
.细胞- * 4 | .细胞- * 4 |
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
-
- .范围- *中心
- aligns 1-st-level nested columns in the middle;
.细胞- * 4 | .细胞- * 4 |
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
-
- .范围- * -对
- aligns 1st-level nested columns to the right;
.细胞- * 4 | .细胞- * 4 |
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
-
- .范围- *证明
- justifies the nested 1st level columns;
.细胞- * 4 | .细胞- * 4 |
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
-
- .范围- *开工
- justifies the nested 1st-level columns and adds an offset on both sides:
.细胞- * 4 | .细胞- * 4 |
E.g.:
1级: .细胞- - - - - -md -4
1级: .细胞- - - - - -md -4
Bootstrap Grid System
HTML Website Template is based on Bootstrap and meets all the requirements of this framework. You can find out more about working with Bootstrap Grid on their official website .
Responsive Units
HTML Website Template has a new content management system, based on Flex. It’s called Responsive Units. Using these units, you can easily manage the layout of the elements: embed them in a horizontal or vertical way at any resolution, manage their location relative to each other, 等.
Responsive Units operating principle is somewhat similar to the operating principle of Media in Bootstrap.
Responsive Units logics meets the requirements of Mobile First. The basic Responsive Unit markup looks the following way:
单位了
单元体
单位对吧
How to align elements relative to each other
To align elements relative to each other, use the .单位- *中间, .单位- *最高, .单位- *底部 类. So, if you need to align elements in a Unit relative to each other in the middle starting 从 XS resolution, use the following code:
单位了
单元体
单位对吧
How to change layout 从 horizontal to vertical
To change the layout of elements in a Responsive Unit 从 horizontal to vertical for different resolutions, use the corresponding combination of *, 单位- - - - - -*-horizontal or 单位- - - - - -*, 单位- - - - - -*-vertical for the target resolution. So, if you need the default Responsive Units layout to be vertical, but become horizontal at the SM screen resolution, use the following example:
单位了
单元体
单位对吧
How to reverse the layout of the elements
You can also invert the layout of the elements in a Responsive Unit. So, if you need a Responsive Unit to be vertical and to have direct display order of elements, 和启动 从 SM resolution become horizontal and have the reverse order of elements (right-body-left), use the following example:
单位了
单元体
单位对吧