ionic 網格(Grid)
ionic 的網格(Grid)和其他大部分框架有所不同,它採用了彈性盒子模型(Flexible Box Model) 。而且在移動端,基本上的手機都支援。row 樣式指定行,col 樣式指定列。
同等大小網格
在帶有 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 個網格)。
<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% |
有偏移量的網格
列可以設定左側偏移量,例項如下:
<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% |
縱向對齊網格
彈性盒子模型可以很容易設定列縱向對齊。縱向對齊包含頂部,中間部分,底部,可以應用到每一行的列,或者指定的某列。
例項中,最後一列設定了最高的內容用於更好的演示縱向對齊網格。
<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>
響應式網格
手持裝置螢幕在切換時,例如橫屏,豎屏等。就需要設定每行的網格可以實現根據不同寬度自適應大小。
不同裝置響應式類的樣式如下:
響應式類 | 描述 |
.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>