utilitas Kelas
Sebagian besar W3.CSS dibangun di sekitar kelas utilitas menyediakan padding, margin, ukuran, dan posisi.
Padding Kelas
Kelasukuran w3-padding- menambahkan padding untuk setiap elemen HTML:
Kelas w3-padding-jumbo menambahkan 32px atas dan bawah dan 64px kiri dan kanan.
Kelas w3-padding-xxlarge menambahkan 24px atas dan bawah dan 48px kiri dan kanan.
Kelas w3-padding-xlarge menambahkan 16px atas dan bawah dan 32px kiri dan kanan.
Kelas w3-padding-besar menambah 12px atas dan bawah dan 24px kiri dan kanan.
Kelas w3-padding-menengah menambahkan 8px atas dan bawah dan 16px kiri dan kanan.
Kelas w3-padding-kecil menambahkan 4px atas dan bawah dan 8px kiri dan kanan.
Kelas w3-padding-kecil menambahkan 2px atas dan bawah dan 4px kiri dan kanan.
Contoh
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Cobalah sendiri " Thew3-padding-hormonal kelas nomormenambahkan horizontal (atas dan bawah) padding untuk setiap elemen HTML:
The w3-padding-hor-4 kelas menambahkan 4px padding atas dan bawah.
Kelas w3-padding-hor-8 menambahkan 8px padding atas dan bawah.
The w3-padding-hor-16 kelas menambahkan 16px atas dan padding bawah.
The w3-padding-hor-32 kelas menambahkan 32px atas dan padding bawah.
The w3-padding-hor-64 kelas menambahkan 64px atas dan padding bawah.
Contoh
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Cobalah sendiri " KelasJumlah w3-padding-ver- menambahkan vertikal (kiri dan kanan) padding untuk setiap elemen HTML:
The w3-padding-ver-4 kelas menambahkan 4px bantalan kiri dan kanan.
The w3-padding-ver-8 kelas menambahkan 8px bantalan kiri dan kanan.
The w3-padding-ver-16 kelas menambahkan 16x bantalan kiri dan kanan.
The w3-padding-ver-32 kelas menambahkan 32px bantalan kiri dan kanan.
The w3-padding-hor-48 kelas menambahkan 64px bantalan kiri dan kanan.
Contoh
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Cobalah sendiri " Margin Kelas
Kelasw3-marjin menambahkan margin untuk elemen:
Kelas w3-marjin menambahkan 16px margin semua sisi dari suatu elemen.
Kelas w3-margin-bottom menambahkan 16px margin bawah ke elemen.
The w3-margin-left kelas menambahkan 16px margin kiri ke elemen.
Kelas w3-margin-right menambahkan margin kanan 16px ke elemen.
Kelas w3-margin-top menambahkan margin atas 16px ke elemen.
Contoh
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Cobalah sendiri " sizing Kelas
Ukuran kelas w3- mengubah font-size dari unsur:
Saya kecil (menggunakan w3-kecil)
Saya kecil (menggunakan w3-kecil)
Aku menengah. Standar.
Saya besar (menggunakan w3-besar)
Aku xlarge (menggunakan w3-xlarge)
Contoh
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Cobalah sendiri " Anda dapat membaca lebih lanjut tentang ukuran kelas dalam bab Tipografi W3.CSS .
pembulatan Kelas
Kelas ukuran w3-bulat-bulat menambahkan perbatasan ke elemen:
Contoh
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Cobalah sendiri " The Circle Kelas
Pusat Kelas
Kelas w3-pusat Pusat unsur:
Contoh
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Cobalah sendiri " mengambang Kelas
Kelas w3-kiri mengapung elemen ke kiri, kelas w3-benar mengapung elemen ke kanan:
Contoh
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Cobalah sendiri " Tampilkan / Sembunyikan Kelas
The w3-hide-kecil | menengah | kelas besar menyembunyikan elemen pada ukuran layar tertentu.
Catatan: Mengubah ukuran jendela browser untuk memahami cara kerjanya:
Contoh
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Cobalah sendiri "