基本网格系统语法

Created: November-22, 2018

基本网格

在 Ionic 中，你可以通过将 row 类设置为元素来声明行。行将是水平对齐的元素，此元素内的任何内容都将属于行。在行内，你可以声明不同的宽度列。你可以选择以下声明。

类	宽度
.COL-10	10％
.COL-20	20％
.COL-25	25％
.COL-33	33.3333％
.COL-50	50％
.COL-67	66.6666％
.COL-75	75％
.COL-80	80％
.COL-90	90％

行内的最大值列可以是 100.这里是基本网格的几个示例。

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

偏移网格

你也可以将 col-offset-<value> 设置为列。在下面的示例中，宽度列的三分之一具有宽度偏移的三分之一，这意味着它将是宽度的三分之一宽度并且由于它的偏移而在页面中居中。

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

对齐列

垂直对齐列可能是通过将 col-<align_value> 分别设置为一列来完成的。

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

以上内容将使每个列自己对齐。如果要对齐行内的所有列，可以将对齐值设置为行本身。在下面的示例中，此行内的所有列将在行的中心垂直对齐。

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

响应式网格

你可能还希望列具有响应性，因为它们将以某个视口宽度堆叠在彼此之上。你有三个选择。

类	断点（大约）
.responsive-SM	比景观手机小
.responsive-MD	小于肖像平板电脑
.responsive-LG	比景观平板电脑小

在此示例中，这些列将堆叠在大约横向电话的宽度下。

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

如果这些断点不适合你和/或你需要更具体的断点，你当然也可以进行自己的媒体查询。