Tata Letak W3.CSS
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Kelas Tata Letak W3.CSS
W3.CSS versi 2.90 / 2.91 memperkenalkan kelas berikut untuk tata letak "seperti kolom":
| Kelas | Keterangan |
|---|---|
| w3-sel-baris | Wadah untuk sel (kolom). |
| w3-sel | Tata letak sel (kolom). |
| w3-sel-atas | Meratakan konten di bagian atas sel (kolom). |
| w3-sel-tengah | Meratakan konten di tengah vertikal sel (kolom). |
| w3-sel-bawah | Meratakan konten di bagian bawah sel (kolom). |
| w3-seluler | Menambahkan respons yang mengutamakan seluler ke sel (kolom). Menampilkan elemen sebagai elemen blok pada perangkat seluler. |
Kelas tata letak menggantikan kelas tata letak yang tidak digunakan lagi.
Classer tata letak baru lebih fleksibel dan lebih mudah digunakan.
Kelas tata letak yang tidak digunakan lagi tercantum di bagian bawah halaman ini.
Elemen Blok HTML
Awalnya, elemen blok HTML (seperti elemen <div>) ditampilkan sebagai blok vertikal:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Tata Letak Sel
Kelas sel w3 mendefinisikan ulang elemen blok untuk ditampilkan secara horizontal (seperti sel tabel):
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Tata Letak Wadah
Baris sel w3 adalah wadah untuk sel (kolom).
Lebar wadah baris sel w3 menentukan lebar total semua sel yang ada.
Lebar default adalah 100%:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Jika Anda mengubah lebar wadah sel, itu akan mengurangi lebar total sel yang ditampung:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Sel Tata Letak Menyesuaikan Diri
Kelas sel w3 memiliki standar penyesuaian diri bawaan yang sangat bagus. Elemen berdampingan akan secara otomatis menyesuaikan dengan lebar yang diperlukan:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS. Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Tata Letak Sel Sesuaikan dengan Tinggi Yang Sama
Elemen sel w3 yang berdampingan juga akan secara otomatis menyesuaikan diri dengan ketinggian yang sama:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Tata Letak Responsif
Kelas w3-mobile menambahkan respons pertama seluler ke elemen HTML apa pun.
Digunakan bersama dengan w3-cell akan menampilkan kolom tata letak secara vertikal pada layar kecil/ponsel dan secara horizontal pada layar sedang/besar.
Pada layar sedang dan besar:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Di layar kecil:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Penjajaran Mudah
Kelas sel w3 membuatnya sangat mudah untuk menyelaraskan teks.
Ada 3 kelas keselarasan yang berbeda:
- w3-sel-atas (default)
- w3-sel-tengah
- w3-sel-bawah
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
Kelas baris sel w3 meregangkan elemen agar sesuai dengan lebar halaman:
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Halo Tata Letak W3.CSS.
Contoh
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Kelas Tata Letak Tabel W3.CSS yang sudah tidak digunakan lagi
| w3-tata letak-wadah | Gunakan w3-cell-row sebagai gantinya. |
| w3-layout-baris | |
| sel tata letak w3 | Gunakan sel w3 sebagai gantinya. |
| w3-tata letak-atas | Gunakan w3-cell-top sebagai gantinya. |
| w3-tata letak-tengah | Gunakan w3-cell-middle sebagai gantinya. |
| w3-tata letak-bawah | Gunakan w3-cell-bottom sebagai gantinya. |
| w3-tata letak-kol | Gunakan w3-mobile sebagai gantinya. |
Kelas yang tidak digunakan lagi akan dihapus dari W3.CSS di versi 4.0.