Latest web development tutorials

Grid Yayasan - perangkat kecil

Misalkan kita memiliki tata letak grid sederhana pada perangkat kecil, dua, rasio lebar 25% dan 75%.

Tip: Tentukan layar perangkat kecil kurang dari 40.0625em .

Kami menggunakan perangkat kecil .small-* kategori.

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

Contoh berikut mendirikan dua kolom, rasio adalah 25% dan 75% (Foundation adalah ponsel pertama: Jika tidak ditentukan, peralatan besar akan mewarisi .small kode kelas): .small . Di them Mereka dan penggunaan "

contoh

<Class Div = "row">
<Class Div = "kecil-3 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-9 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>

Coba »
catatan Catatan: Untuk memastikan bahwa jumlah kolom menambahkan hingga 12!

Jika Anda perlu menyiapkan 33,3% rasio / 66,6%, Anda dapat menggunakan .small-4 dan .small-8 :

contoh

<Class Div = "row">
<Class Div = "kecil-4 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-8 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>

Coba »