Grid ionik(Grid)
Grid Ionic berbeza daripada kebanyakan rangka kerja lain. Ia menggunakan Model Kotak Fleksibel. Dan dari segi mudah alih, pada asasnya semua telefon bimbit menyokongnya. Gaya baris menentukan baris, dan gaya kol menentukan lajur.
Grid saiz sama
Jika elemen dengan gaya baris mengandungi gaya kol, kol akan ditetapkan kepada saiz yang sama.
Dalam contoh berikut, gaya baris mengandungi 5 gaya kol dan lebar setiap kol ialah 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>
Nyatakan lebar lajur
Anda boleh menetapkan saiz setiap lajur dalam satu baris supaya berbeza. Secara lalai, lajur dibahagikan kepada saiz yang sama. Tetapi anda juga boleh menetapkan lebar lajur sebagai peratusan (12 grid setiap baris).
<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>
Nota: Dalam contoh, setiap gaya kol akan menambah sempadan atas dan latar belakang kelabu secara automatik.
Disenaraikan di bawah ialah nama gaya yang menyatakan beberapa peratusan lebar lajur:
| .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% |
Grid dengan offset
Lajur boleh mempunyai set offset kiri , contohnya adalah seperti berikut :
<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>
Berikut ialah beberapa peratusan nama gaya mengimbangi:
| .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% |
Jajarkan grid secara menegak
Model flexbox memudahkan untuk menetapkan penjajaran menegak lajur. Penjajaran menegak termasuk atas, tengah dan bawah serta boleh digunakan pada setiap baris, lajur atau lajur yang ditentukan.
Dalam contoh, lajur terakhir ditetapkan dengan kandungan tertinggi untuk demonstrasi penjajaran menegak grid yang lebih baik.
<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>
Grid responsif
Apabila skrin peranti pegang tangan ditukar, seperti skrin mendatar, skrin menegak, dsb. Anda perlu menetapkan grid setiap baris untuk menyesuaikan saiz mengikut lebar yang berbeza.
Gaya kelas responsif untuk peranti berbeza adalah seperti berikut:
| 响应式类 | 描述 |
| .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>
