Kelas responsif
W3.CSS termasuk responsif, sistem grid pertama ponsel untuk menangani tata letak Anda:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
beristirahat
1/4
beristirahat
100px
45px
beristirahat
sistem grid W3.CSS adalah responsif, dan kolom akan menata kembali secara otomatis, tergantung pada ukuran layar:
| Kelas | Deskripsi |
|---|---|
| w3-setengah | Menempati 1/2 dari jendela (pada layar menengah dan besar) |
| w3-ketiga | Menempati 1/3 dari jendela (pada layar menengah dan besar) |
| w3-twothird | Menempati 2/3 dari jendela (pada layar menengah dan besar) |
| w3-kuartal | Menempati 1/4 dari jendela (pada layar menengah dan besar) |
| w3-threequarter | Menempati 3/4 dari jendela (pada layar menengah dan besar) |
| w3-rest | Mendefinisikan sisa berturut-turut |
| w3-col | Mendefinisikan kolom dalam 12 kolom kotak cairan responsif (lebih pada bab berikutnya) |
Baris responsif
Kelas responsif harus ditempatkan di dalam w3-baris untuk sepenuhnya responsif.
| Kelas | Deskripsi |
|---|---|
| w3-baris | Mendefinisikan sebuah wadah padding-kurang untuk kelas responsif. |
| w3-baris-bantalan | Mendefinisikan wadah empuk untuk kelas responsif. |
The w3-setengah Kelas
Lebar w3-setengah kelas adalah 1/2 dari elemen induk (style = "width: 50%").
Pada layar * kecil itu mengubah ukuran 100%.
w3-setengah
w3-setengah
Contoh
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Cobalah sendiri " The w3-ketiga Kelas
Lebar kelas w3-ketiga adalah 1/3 dari elemen induk (style = "width: 33,33%").
Pada layar * kecil itu mengubah ukuran 100%.
w3-ketiga
w3-ketiga
w3-ketiga
Misalnya menggunakan w3-ketiga
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Cobalah sendiri " The w3-twothird Kelas
Lebar kelas w3-twothird adalah 2/3 dari elemen induk (style = "width: 66,66%").
Pada layar * kecil itu mengubah ukuran 100%.
w3-twothird
w3-ketiga
Misalnya menggunakan w3-ketiga
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Cobalah sendiri " The w3-kuartal Kelas
Lebar kelas w3-kuartal adalah 1/4 dari elemen induk (style = "width: 25%").
Pada layar * kecil itu mengubah ukuran 100%.
w3-kuartal
w3-kuartal
w3-kuartal
w3-kuartal
Misalnya menggunakan w3-kuartal
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Cobalah sendiri " The w3-threequarter Kelas
Lebar kelas w3-threequarter adalah 3/4 dari elemen induk (style = "width: 75%").
Pada layar * kecil itu mengubah ukuran 100%.
w3-kuartal
w3-kuartal
Misalnya menggunakan w3-threequarter
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Cobalah sendiri " kombinasi
w3-kuartal
w3-setengah
w3-kuartal
w3-kuartal
w3-kuartal
w3-setengah
w3-setengah
w3-kuartal
w3-kuartal
Baris bersarang
Contoh: w3-setengah dalam w3-setengah
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Cobalah sendiri " Kolom Menggunakan Istirahat
Saya 150px
Saya sisanya
Misalnya menggunakan w3-sisa
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Cobalah sendiri " Kolom Menggunakan Persen
20%
60%
20%
Misalnya menggunakan persen
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Cobalah sendiri " The w3-konten Kelas
Kelas w3-konten mendefinisikan sebuah wadah untuk berpusat ukuran konten tetap:
Perbedaan antara w3-baris dan w3-baris-bantalan
Kelas w3-baris mendefinisikan wadah empuk-kurang, sedangkan kelas w3-baris-bantalan menambahkan padding kiri dan kanan 8px untuk setiap kolom:
w3-baris:
w3-baris-padding:
Contoh
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> Cobalah sendiri " 12 Kolom cairan responsif jaringan
W3.CSS juga mendukung maju 12 kolom cairan responsif jaringan.
Mengubah ukuran halaman untuk melihat efek!
Bagian ini akan menempati 12 kolom di layar kecil, 4 pada layar menengah, dan 3 pada layar besar.
Bagian ini akan menempati 12 kolom di layar kecil, 8 pada layar menengah, dan 9 pada layar besar.
Anda akan belajar lebih banyak tentang grid cairan dalam bab berikutnya.
* Resolusi Layar
built-in tanggap dari W3.CSS menggunakan ukuran DP dari layar.
W3.CSS akan memperlakukan iPhone 6 dengan resolusi 750 x 1334 piksel sebagai layar kecil dari 375 x 667 piksel.
layar kecil kurang dari 601 piksel DP, layar menengah kurang dari 993 piksel DP.
Di bawah ini adalah daftar resolusi perangkat yang khas dan melaporkan ukuran DP:
iphone 4
Resolusi
640 x 960
DP
320 x 480
iphone 5
Resolusi
640 x 1136
DP
320 x 528
iphone 6
Resolusi
750 x 1334
DP
375 x 667
iphone 6s
Resolusi
1080 x 1920
DP
414 x 736
Galaxy S6
Resolusi
1440 x 2560
DP
360 x 640
Catatan 4
Resolusi
1440 x 2560
DP
400 x 853
Nexus 6
Resolusi
1440 x 2560
DP
411 x 731
ipad ukuran kecil
Resolusi
768 x 1024
DP
768 x 1024
iPad
Resolusi
1536 x 2048
DP
728 x 1024
Laptop khas
Resolusi
1366 x 768
DP
1366 x 768
Desktop khas
Resolusi
1920 x 1080
DP
1920 x 1080