基本網格系統語法

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>

如果這些斷點不適合你和/或你需要更具體的斷點，你當然也可以進行自己的媒體查詢。