tutorial pengembangan web terbaru
 

W3.CSS Utilitas (Pembantu)


utilitas Kelas

Sebagian besar W3.CSS dibangun di sekitar kelas utilitas menyediakan padding, margin, ukuran, dan posisi.

Catatan: Kelas Utilitas sering disebut kelas Helper.


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:

Bulat
Pengadu
Pengadu
roundest

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

Contoh

<img class="w3-circle" src="img_car.jpg" alt="Car">
Cobalah sendiri "

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:

mengapung meninggalkan
mengapung tepat

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:

Saya akan tersembunyi di layar kecil (ponsel)

Saya akan disembunyikan pada layar menengah (tablet)

Saya akan tersembunyi di layar besar (laptop / desktop)

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 "