Ionic网格

使用 Ionic网格系统 非常简单。有两大类- 行 与行和工作 山坳 的列。

您可以选择所需的列数或行数。所有这些都将调整其大小以适应可用空间，但您可以根据需要更改此行为。

注意 - 本教程中的所有示例都将边框应用于我们的网格，以便能够以易于理解的方式显示它。

简单的网格

以下示例显示如何使用 col 和 行 类。我们将创建两行。第一行将有五列，第二行只有三列。请注意第一行和第二行中列的宽度是如何不同的。

<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>

上面的代码将生成以下屏幕 -

Ionic网格

列大小

有时您不希望自动分配列大小。如果是这种情况，您可以选择 col 前缀，后跟一个代表 行 宽百分比的数字。这仅适用于应用了特定大小的列。其他列将调整为剩余的可用空间。

在以下示例中，第一列将使用全宽的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网格柱

下表显示了Ionic网格系统提供的可用百分比选项 -

列百分比类名

班级名称 使用百分比
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％

水平和垂直定位

列可以从左侧偏移。对于列的特定大小，它的工作方式相同。这次前缀将是 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>

上面的代码将生成以下屏幕 -

Ionic网格偏移

您还可以垂直对齐行内的列。有三个类可以使用，即 - top ， center 和带有 col 前缀的 bottom 类。以下代码显示了如何垂直放置两行的前三列。 **

注意 - 在下面的示例中， 我们在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垂直网格

响应式网格

Ionic网格也可用于响应式布局。有三个班级可供选择。该 响应-SM 类将陷落柱成单列当视比景观电话较小。该 响应-MD 当视比肖像平板电脑更小的类将被应用。该 响应-LG 时视比风景更小的平板类将被应用。

以下示例之后的第一个图像显示了 响应式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>

移动网格视图

移动网格视图

平板网格视图

平板网格视图