ionic 網(wǎng)格(Grid)

2018-10-13 19:00 更新

ionic 網(wǎng)格(Grid)

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

同等大小網(wǎng)格

在帶有 row 的樣式的元素里如果包含了 col 的樣式,col 就會設置為同等大小。

以下實例中 row 的樣式包含了 5 個 col 樣式,每個 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>

嘗試一下 ?

指定列寬

你可以設定一行中各個列的大小不一樣。默認情況下,列都會被劃分為同等大小。但你也可以按百分比來設置列的寬度(一行為 12 個網(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>

嘗試一下 ?

注意:實例中,每個 col 樣式會自動添加上邊框和灰色背景。

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

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

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

列可以設置左側(cè)偏移量,實例如下:

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

嘗試一下 ?

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

.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%

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

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

實例中,最后一列設置了最高的內(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>

嘗試一下 ?


響應式網(wǎng)格

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

不同設備響應式類的樣式如下:

響應式類 描述
.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>

嘗試一下 ?

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號