Bố cục W3.CSS
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Các lớp bố cục W3.CSS
W3.CSS phiên bản 2.90 / 2.91 đã giới thiệu các lớp sau cho bố cục "dạng cột":
| Lớp học | Sự miêu tả |
|---|---|
| w3-ô-hàng | Vùng chứa cho các ô (cột). |
| w3-ô | Bố cục ô (cột). |
| w3-cell-top | Căn chỉnh nội dung ở đầu ô (cột). |
| w3-ô-giữa | Căn chỉnh nội dung ở giữa theo chiều dọc của ô (cột). |
| w3-cell-bottom | Căn chỉnh nội dung ở cuối ô (cột). |
| w3-di động | Thêm khả năng đáp ứng ưu tiên thiết bị di động vào một ô (cột). Hiển thị các phần tử dưới dạng phần tử khối trên thiết bị di động. |
Các lớp bố trí thay thế các lớp bố trí không được dùng nữa.
Trình phân loại bố cục mới linh hoạt hơn và dễ sử dụng hơn.
Các lớp bố cục không dùng nữa được liệt kê ở cuối trang này.
Phần tử khối HTML
Ban đầu, các phần tử khối HTML (như phần tử <div>) hiển thị dưới dạng khối dọc:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Bố cục ô
Lớp w3-cell xác định lại các phần tử khối để hiển thị theo chiều ngang (như các ô trong bảng):
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Bố cục vùng chứa
Hàng w3-cell là một vùng chứa cho các ô (cột).
Chiều rộng của vùng chứa hàng w3 xác định tổng chiều rộng của tất cả các ô được chứa.
Chiều rộng mặc định là 100%:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Nếu bạn thay đổi chiều rộng của vùng chứa ô, nó sẽ làm giảm tổng chiều rộng của các ô được chứa:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Các ô trong bố cục tự điều chỉnh
Lớp w3-cell có một tiêu chuẩn tự điều chỉnh tích hợp rất đẹp. Các phần tử cạnh nhau sẽ tự động điều chỉnh theo chiều rộng cần thiết:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout. Xin chào W3.CSS Layout.
Thí dụ
<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>
Các ô bố cục được điều chỉnh để có chiều cao bằng nhau
Các phần tử ô w3 cạnh nhau cũng sẽ tự động tự điều chỉnh để có chiều cao bằng nhau:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Bố cục đáp ứng
Lớp w3-mobile bổ sung khả năng đáp ứng đầu tiên trên thiết bị di động cho bất kỳ phần tử HTML nào.
Được sử dụng cùng với w3-cell, nó sẽ hiển thị các cột bố cục theo chiều dọc trên màn hình nhỏ / điện thoại di động và chiều ngang trên màn hình vừa / lớn.
Trên màn hình vừa và lớn:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Trên màn hình nhỏ:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Căn chỉnh dễ dàng
Lớp w3-cell giúp dễ dàng căn chỉnh văn bản.
Có 3 lớp căn chỉnh khác nhau:
- w3-cell-top (mặc định)
- w3-ô-giữa
- w3-cell-bottom
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Lớp w3-cell-row kéo dài các phần tử để vừa với chiều rộng trang:
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Xin chào W3.CSS Layout.
Thí dụ
<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>
Các lớp bố cục bảng W3.CSS không được dùng nữa
| w3-layout-container | Sử dụng w3-cell-row để thay thế. |
| w3-layout-row | |
| w3-layout-cell | Sử dụng w3-cell để thay thế. |
| w3-layout-top | Sử dụng w3-cell-top để thay thế. |
| w3-layout-middle | Thay vào đó, hãy sử dụng w3-cell-middle. |
| w3-layout-bottom | Thay vào đó, hãy sử dụng w3-cell-bottom. |
| w3-layout-col | Sử dụng w3-mobile để thay thế. |
Các lớp không dùng nữa sẽ bị xóa khỏi W3.CSS trong phiên bản 4.0.