Bố cục W3.CSS
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Các lớp bố cục W3.CSS
Lớp học | Sự miêu tả |
---|---|
w3-ô-hàng | Vùng chứa các ô (cột). |
ô w3 | Ô bố trí (cột). |
w3-cell-top | Căn chỉnh nội dung ở đầu ô (cột). |
w3-cell-giữa | Căn chỉnh nội dung theo chiều dọc giữa ô (cột). |
w3-cell-đáy | Căn chỉnh nội dung ở cuối ô (cột). |
w3-mobile | Thêm khả năng phản hồi ư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 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 bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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>
Vùng chứa bố cục
Hàng w3-cell là nơi chứa 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 bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 độ 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 bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 ô bố cục đang tự điều chỉnh
Lớp w3-cell có 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 bố cục W3.CSS.
Xin chào bố cục W3.CSS. Xin chào bố cục W3.CSS.
Ví 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 điều chỉnh theo chiều cao bằng nhau
Các phần tử ô w3 cạnh nhau cũng sẽ tự động điều chỉnh theo chiều cao bằng nhau:
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 phản hồi đầ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à theo chiều ngang trên màn hình trung bình/lớn.
Trên màn hình vừa và lớn:
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Trên màn hình nhỏ:
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 căn chỉnh văn bản rất dễ dàng.
Có 3 lớp căn chỉnh khác nhau:
- w3-cell-top (mặc định)
- w3-cell-giữa
- w3-cell-đáy
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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 của trang:
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Xin chào bố cục W3.CSS.
Ví 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>