Yayasan grid blok
jaringan besar untuk berbagi konten halaman: misalnya, satu baris untuk menampilkan empat gambar, tidak peduli apa yang lebar rata-rata layar diperlukan.
Anda dapat menggunakan <ul> elemen ditambah .small|medium|large-block-grid- num sebagai sistem yang num kelas untuk menciptakan jaringan besar. num adalah nomor yang digunakan untuk menentukan rata-rata:
contoh
<Class Ul = "kecil-blok -grid-3">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
Coba »
Contoh lain, menggunakan ayat:
contoh
<Class Ul = "kecil-blok -grid-3">
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
</ Ul>
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
<Li> <p> Hanya Sederhana Contoh Teks ... </ p> </ li>
</ Ul>
Coba »
Menampilkan nomor yang berbeda dari ukuran yang berbeda
Dengan menambahkan beberapa blok grid kelas ukuran yang berbeda dapat diatur untuk menampilkan nomor yang berbeda dari blok:
contoh
<Ul class = "kecil-blok -grid-2 media-blok-grid-3 besar-blok-grid-4">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
Coba »