ionic 網(wǎng)格(Grid)

ionic 的網(wǎng)格(Grid)和其他大部分框架有所不同，它采用了彈性盒子模型(Flexible Box Model) 。而且在移動(dòng)端，基本上的手機(jī)都支持。row 樣式指定行，col 樣式指定列。

同等大小網(wǎng)格

在帶有 row 的樣式的元素里如果包含了 col 的樣式，col 就會(huì)設(shè)置為同等大小。

以下實(shí)例中 row 的樣式包含了 5 個(gè) col 樣式，每個(gè) col 的寬度為 20%。

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

嘗試一下 ?

指定列寬

你可以設(shè)定一行中各個(gè)列的大小不一樣。默認(rèn)情況下，列都會(huì)被劃分為同等大小。但你也可以按百分比來(lái)設(shè)置列的寬度（一行為 12 個(gè)網(wǎng)格）。

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

嘗試一下 ?

注意：實(shí)例中，每個(gè) col 樣式會(huì)自動(dòng)添加上邊框和灰色背景。

下面列出了指定列寬的一些百分比的樣式名:

有偏移量的網(wǎng)格

列可以設(shè)置左側(cè)偏移量，實(shí)例如下：

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

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

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

嘗試一下 ?

下面是一些百分比的偏移量樣式名：

縱向?qū)R網(wǎng)格

彈性盒子模型可以很容易設(shè)置列縱向?qū)R。縱向?qū)R包含頂部，中間部分，底部，可以應(yīng)用到每一行的列，或者指定的某列。

實(shí)例中，最后一列設(shè)置了最高的內(nèi)容用于更好的演示縱向?qū)R網(wǎng)格。

<div class="row">
  <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>

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

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

<div class="row row-bottom">
  <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>

嘗試一下 ?

響應(yīng)式網(wǎng)格

手持設(shè)備屏幕在切換時(shí)，例如橫屏，豎屏等。就需要設(shè)置每行的網(wǎng)格可以實(shí)現(xiàn)根據(jù)不同寬度自適應(yīng)大小。

不同設(shè)備響應(yīng)式類的樣式如下:

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

嘗試一下 ?