Ionic - 網格

---

---

使用Ionic 網格系統非常簡單。有兩個主要類 - 用於處理行的row 和用於列的col。

您可以根據需要選擇任意數量的列或行。它們都將調整其大小以適應可用空間，儘管您可以更改此行為以滿足您的需求。

注意 - 本教程中的所有示例都將應用網格邊框，以便能夠以易於理解的方式顯示它。

簡單網格

以下示例顯示瞭如何使用col 和row 類。我們將建立兩行。第一行將有五列，第二行將只有三列。請注意，第一行和第二行中列的寬度是不同的。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

以上程式碼將生成以下螢幕 -

列大小

有時您不希望自動分配列大小。如果是這種情況，您可以選擇col 字首後跟一個數字，該數字將表示row 寬度的百分比。這將僅應用於應用了特定大小的列。其他列將調整到剩餘的可用空間。

在以下示例中，第一列將使用完整寬度的 50%，其他列將相應調整。

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

以上程式碼將生成以下螢幕 -

下表顯示了 Ionic 網格系統提供的可用百分比選項 -

列百分比類名

水平和垂直定位

列可以從左側偏移。它對列的特定大小也有效。這次字首將是col-offset，然後我們將使用上表中顯示的相同百分比數字。以下示例顯示瞭如何將兩行中的第二列偏移 25%。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

以上程式碼將生成以下螢幕 -

您還可以垂直對齊行內的列。可以使用三個類，即 - top、center 和bottom 類與col 字首一起使用。以下程式碼顯示瞭如何垂直放置兩行中的前三列。

注意 - 在下面的示例中，我們在 CSS 中添加了“.col {height: 120px}” 以向您展示列的垂直放置。

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

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

以上程式碼將生成以下螢幕 -

響應式網格

Ionic 網格也可用於響應式佈局。有三個類可用。responsive-sm 類將在視口小於橫向手機時將列摺疊成單行。responsive-md 類將在視口小於縱向平板電腦時應用。responsive-lg 類將在視口小於橫向平板電腦時應用。

以下示例後的第一個影像顯示了responsive-sm 類在移動裝置上的外觀，第二個影像顯示了相同的響應式網格在平板電腦上的不同外觀。

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

移動網格檢視

平板電腦網格檢視