抠丁客
网格
简介
用于基于Bootstrap网格系统的ABP标签助手。
演示
查看 网格演示页面 以查看实际效果。
尺寸调整
等宽列： 创建等宽的列。
示例：
<abp-container>
<abp-row>
<abp-column abp-border="Info">1 / 2</abp-column>
<abp-column abp-border="Danger">2 / 2</abp-column>
</abp-row>
<abp-row>
<abp-column abp-border="Primary">1 / 3</abp-column>
<abp-column abp-border="Secondary">2 / 3</abp-column>
<abp-column abp-border="Dark">3 / 3</abp-column>
</abp-row>
</abp-container>
列分隔符： abp-column-breaker 用于中断当前行的自动宽度布局，并在之后开始新行。
示例：
<abp-container>
<abp-row>
<abp-column>列</abp-column>
<abp-column>列</abp-column>
<abp-column-breaker/>
<abp-column>列</abp-column>
<abp-column>列</abp-column>
</abp-row>
</abp-container>
设置单列宽度： size 属性用于设置特定列的宽度。
示例：
<abp-container>
<abp-row>
<abp-column>1 / 3</abp-column>
<abp-column size="_6">2 / 3 (更宽)</abp-column>
<abp-column>3 / 3</abp-column>
</abp-row>
<abp-row>
<abp-column>1 / 3</abp-column>
<abp-column size="_5">2 / 3 (更宽)</abp-column>
<abp-column>3 / 3</abp-column>
</abp-row>
</abp-container>
可变宽度内容： 基于内容自动调整列宽。
<abp-container>
<abp-row h-align="Center">
<abp-column size-lg="_2" abp-border="Info">1 / 3</abp-column>
<abp-column size-md="Auto" abp-border="Danger">与普遍的看法相反，Lorem Ipsum 不仅仅是随机文本。</abp-column>
<abp-column size-lg="_2" abp-border="Warning">3 / 3</abp-column>
</abp-row>
<abp-row>
<abp-column>1 / 3</abp-column>
<abp-column size-md="Auto">可变宽度内容</abp-column>
<abp-column size-lg="_2">3 / 3</abp-column>
</abp-row>
</abp-container>
响应式类
响应式类可以在 abp 标签内以强类型方式使用。
<abp-row>
<abp-column size-sm="_8">col-sm-8</abp-column>
<abp-column size-sm="_4">col-sm-4</abp-column>
</abp-row>
<abp-row>
<abp-column size-sm="_">col-sm</abp-column>
<abp-column size-sm="_">col-sm</abp-column>
<abp-column size-sm="_">col-sm</abp-column>
<abp-column size-sm="_">col-sm</abp-column>
</abp-row>
<!-- 通过使一个全宽，另一个半宽，在移动设备上堆叠列 -->
<abp-row>
<abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column>
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
</abp-row>
<!-- 列在移动设备上从50%宽开始，在桌面上增加到33.3%宽 -->
<abp-row>
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
</abp-row>
<!-- 列在移动设备和桌面上始终为50%宽 -->
<abp-row>
<abp-column size="_6">.col-6</abp-column>
<abp-column size="_6">.col-6</abp-column>
</abp-row>
对齐
列的对齐可以在 abp 标签中以强类型方式完成，包括垂直和水平对齐。
垂直对齐： 使用 v-align 属性值来垂直对齐列。
示例：
<abp-container>
<abp-row v-align="Start">
<abp-column>列</abp-column>
<abp-column>列</abp-column>
<abp-column>列</abp-column>
</abp-row>
<abp-row v-align="Center">
<abp-column>列</abp-column>
<abp-column>列</abp-column>
<abp-column>列</abp-column>
</abp-row>
<abp-row v-align="End">
<abp-column>列</abp-column>
<abp-column>列</abp-column>
<abp-column>列</abp-column>
</abp-row>
</abp-container>
水平对齐： 使用 h-align 属性值来水平对齐列。
示例：
<abp-container>
<abp-row h-align="Start">
<abp-column size="_4">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
<abp-row h-align="Center">
<abp-column size="_4">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
<abp-row h-align="End">
<abp-column size="_4">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
<abp-row h-align="Around">
<abp-column size="_4">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
<abp-row h-align="Between">
<abp-column size="_4">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
</abp-container>
无间隔： 可以使用 gutters="false" 移除预定义网格类中列之间的间隔（Gutters）。这会移除 abp-row 的负 margin 和所有直接子列的水平 padding。
示例：
<abp-row gutters="false">
<abp-column size="_8">两列之一</abp-column>
<abp-column size="_4">两列之一</abp-column>
</abp-row>
列换行： 如果在一行内放置超过12列，每组额外的列将作为一个整体换行到新的一行。
示例：
<abp-row>
<abp-column size="_9">.col-9</abp-column>
<abp-column size="_4">.col-4<br>由于 9 + 4 = 13 > 12，这个4列宽的 div 作为一个连续单元被换行到新的一行。</abp-column>
<abp-column size="_6">.col-6<br>后续的列继续沿新行排列。</abp-column>
</abp-row>
重新排序
排序类： order 属性用于控制内容的视觉顺序。
示例：
<abp-container>
<abp-row>
<abp-column order="_12">第一个，但最后</abp-column>
<abp-column>第二个，但未排序</abp-column>
<abp-column order="_6">第三个，但第二个</abp-column>
</abp-row>
</abp-container>
列偏移： offset 属性用于设置网格列的偏移量。
示例：
<abp-container>
<abp-row>
<abp-column size-md="_4">.col-md-4</abp-column>
<abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
</abp-row>
<abp-row>
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
</abp-row>
<abp-row>
<abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
</abp-row>
<abp-row>
<abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column>
<abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column>
</abp-row>
<abp-row>
<abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column>
<abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column>
</abp-row>
</abp-container>
abp-row 属性
- v-align： 指示包含列的垂直定位的值。应为以下值之一：
Default(默认值)Start(起始)Center(居中)End(末端)
- h-align： 指示包含列的水平定位的值。应为以下值之一：
Default(默认值)Start(起始)Center(居中)Around(环绕)Between(之间)End(末端)
- gutters： 指示是否将从所有子列中移除负
margin和水平padding。如果未设置此属性，则默认为true。应为以下值之一：truefalse
abp-column 属性
- size： 指示列宽度的值，可选范围包括
_、Undefined、_1.._12、Auto。也可以与以下预定义值一起使用：size-smsize-mdsize-lgsize-xl
- order： 指示列顺序的值，可选范围包括
Undefined、_1.._12、First(第一) 和Last(最后)。 - offset： 指示列偏移量的值，可选范围包括
_、Undefined、_1.._12、Auto。也可以与以下预定义值一起使用：offset-smoffset-mdoffset-lgoffset-xl
