Yayasan Grids - peralatan besar
Bab terakhir kami memperkenalkan proporsi peralatan menengah dan tata letak peralatan jaringan kecil, peralatan kecil untuk 25% / 75% (.small-3 dan .small-9), tetapi proporsi peralatan menengah untuk 50% / 50% (.medium-6 dan .medium-6):
<div class="small-3 medium-6 columns">idid</div> <div class="small-9 medium-6 columns">idid</div>
Pada peralatan skala besar, kami merekomendasikan rasio 33% / 66%.
Tip: Ukuran layar yang lebih besar dari definisi 64.0625em peralatan besar.
Penggunaan alat-alat besar .large-*
kategori.
Sekarang kita tambahkan dua pada peralatan skala besar:
<div class="small-3 medium-6 large-4 columns">idid</div> <div class="small-9 medium-6 large-8 columns">idid</div>
menyelesaikan
- Proporsi perangkat kecil dengan dua kolom% 25/75% (
.small-3
dan.small-9
) - Proporsi perangkat menengah dengan dua kolom% 50/50% (
.medium-6
dan.medium-6
) - Proporsi peralatan besar dengan dua kolom% 33/66% (
.large-4
dan.large-8
)
contoh
<Class Div = "kecil-3 menengah-6 kolom-4 besar" style = "background-color: yellow;">
<P> Tutorial ini </ p>
</ Div>
<Class Div = "kecil-9 menengah-6 besar-8 kolom" style = "background-color: pink;">
<P> Tutorial ini </ p>
</ Div>
</ Div>
Coba »
Catatan: Untuk memastikan bahwa jumlah kolom menambahkan hingga 12! |
Penggunaan ketat pada peralatan besar
Contoh berikut, kita tentukan .large-6
kelas (dan tidak .medium- * .small-*
). Hal ini menunjukkan bahwa sebagian besar peralatan adalah 50% / 50%. Namun dalam alat berukuran sedang atau kecil horizontal ditumpuk (100% lebar):
contoh
<Class Div = "besar-6 kolom" style = "background-color: yellow;">
<P> Tutorial ini </ p>
</ Div>
<Div class = "besar-6 kolom" style = "background-color: pink;">
<P> Tutorial ini </ p>
</ Div>
</ Div>
Coba »