tutorial pengembangan web terbaru
 

W3.CSS Built-In Responsiveness


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


w3-ketiga

w3-twothird


w3-kuartal

w3-threequarter


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:

Contoh

<body class="w3-content" style="max-width:500px">

  page content...

</body>
Cobalah sendiri "

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!

1
2
3
4
5
6
7
8
9
10
11
12

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.

1
2
3
4
5
6
7
8
9
10
11
12

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