Latest web development tutorials

ionik Grid (Grid)

ionik Grid (Grid) dan paling kerangka lainnya berbeda, itu menggunakan model kotak elastis (Flexible Box Model). Dan di terminal mobile, pada dasarnya ponsel yang didukung. baris gaya ditentukan baris, col gaya kolom yang ditetapkan.

ukuran yang sama jaringan

Pada baris dengan unsur gaya dalam gaya jika Anda termasuk pelana, col akan ditetapkan dengan ukuran yang sama.

Contoh berikut gaya baris berisi 5 gaya col, masing-masing lebar col dari 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>

Menentukan lebar kolom

Anda dapat mengatur ukuran sampel untuk setiap kolom berturut-turut. Secara default, kolom akan dibagi menjadi ukuran yang sama. Tapi Anda juga dapat diatur sebagai persentase dari lebar kolom (perilaku 12 mesh). 

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

Catatan: Contoh masing-masing gaya akan secara otomatis ditambahkan ke col perbatasan dan latar belakang abu-abu.

Di bawah ini adalah beberapa kolom tertentu nama persentase lebar gaya:

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

Ada mengimbangi jaringan

Anda dapat mengatur kolom kiri diimbangi contoh adalah sebagai 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 adalah beberapa persentase diimbangi nama gaya:

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

Potret Snap ke Grid

model kotak fleksibel dapat dengan mudah mengatur kolom longitudinal selaras. Terdiri atas longitudinal sejajar, bagian tengah bagian bawah, dapat diterapkan untuk setiap baris kolom, atau kolom tertentu.

Misalnya, yang terakhir mengatur konten demo untuk penyelarasan jaringan memanjang 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

layar genggam ketika Anda beralih, misalnya, layar horizontal, layar vertikal dan sebagainya. Kita perlu mengatur grid untuk setiap baris dapat diimplementasikan tergantung pada lebar ukuran adaptif.

perangkat yang berbeda gaya responsif kelas sebagai berikut:

kelas responsif deskripsi
.responsive-sm Lebih kecil dari ponsel cross-layar
.responsive-md Kurang dari layar datar vertikal
.responsive-lg Kurang dari layar horizontal datar 
<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>