Thuộc tính lớp học. h-chiều cao đầy đủ. 100%;. h-autoheight. Tự động. chiều cao h-0. 0px;. chiều cao h-1. 4px;. chiều cao h-2. 8px;. chiều cao h-3. 12px;. chiều cao h-4. 16px;. chiều cao h-5. 20px;. chiều cao h-6. 24px;. chiều cao h-7. 28px;. h-8height. 32px;. h-9height. 36px;. chiều cao h-10. 40px;. chiều cao h-12. 48px;. chiều cao h-16. 64px;. chiều cao h-20. 80px;. h-24height. 96px;. chiều cao h-32. 128px;. chiều cao h-40. 160px;. chiều cao h-48. 192px;. h-56height. 224px;. h-64height. 256px;. chiều cao h-80. 320px;. h-96height. 384px;. h-112height. 448px;. h-128height. 512px;. h-144height. 576px;. chiều cao h-150. 600px;. max-h-fullmax-height. 100%;. max-h-0max-height. 0px;. max-h-1max-height. 4px;. max-h-2max-height. 8px;. max-h-3max-height. 12px;. max-h-4max-height. 16px;. max-h-5max-height. 20px;. max-h-6max-height. 24px;. max-h-7max-height. 28px;. max-h-8max-height. 32px;. max-h-9max-height. 36px;. max-h-10max-height. 40px;. max-h-12max-height. 48px;. max-h-16max-height. 64px;. max-h-20max-height. 80px;. max-h-24max-height. 96px;. max-h-32max-height. 128px;. max-h-40max-height. 160px;. max-h-48max-height. 192px;. max-h-56max-height. 224px;. max-h-64max-height. 256px;. max-h-80max-height. 320px;. max-h-96max-height. 384px;. max-h-112max-height. 448px;. max-h-128max-height. 512px;. max-h-144max-height. 576px;. max-h-150max-height. 600px;
Cách sử dụng
Giống như các tiện ích đệm, nó sử dụng 4px làm kích thước gia tăng cho mỗi số. Vì vậy, h-10 là 10 * 4px là 40px. Để làm 100% chiều cao, bạn có thể sử dụng h-full. Các tiện ích chiều cao và chiều cao tối đa này thực sự hữu ích cho hình ảnh vì hình ảnh cần có chiều rộng và/hoặc chiều cao để chúng được hiển thị chính xác trong nhiều phiên bản Outlook
/* image 48px width */ /* image 600px width, use this for an image that is "full width" in a container in an email */
Kết hợp với các tiện ích chiều rộng, bạn có thể thực hiện những việc như tạo một vòng tròn có số trong đó
1
Phản ứng nhanh nhẹn
Theo mặc định, các lớp này nhắm mục tiêu tất cả các thiết bị. Tuy nhiên, nếu bạn chỉ muốn nhắm mục tiêu vào máy tính để bàn, bạn có thể thực hiện ____1_______0. Đối với tất cả các lớp này, bạn có thể áp dụng một
1
1 ở giữa để nó chỉ áp dụng cho các thiết bị máy tính để bàn. Hoặc giả sử bạn muốn có một nút 100% trên thiết bị di động và một nút ở giữa chiều cao 40px trên máy tính để bàn. Điều đó sẽ trông như thế nàyNó được sử dụng để kích thước phần tử. Bằng cách sử dụng tiện ích định cỡ, bạn có thể dễ dàng tạo một phần tử rộng hoặc cao (so với phần tử gốc) bằng các tiện ích chiều rộng và chiều cao của chúng tôi. Bao gồm hỗ trợ cho 25%, 50%, 75% và 100% theo mặc định
Các tiện ích chiều rộng và chiều cao được tạo từ bản đồ $sizes Sass trong _variables. scss. Bạn có thể sửa đổi các giá trị này khi cần tạo các tiện ích khác tại đây
Định cỡ theo chiều rộng
Sau đây là cú pháp để định cỡ một phần tử theo chiều rộng
cú pháp
Kích thước theo chiều cao
Sau đây là cú pháp để định cỡ một phần tử theo chiều cao
cú pháp
Chiều rộng & Chiều cao tối đa
Bạn cũng có thể đặt chiều rộng và chiều cao ở mức tối đa
chiều rộng tối đa
cú pháp
Chiều cao tối đa
cú pháp
Có thể đặt chiều rộng và chiều cao cho một phần tử bằng cách sử dụng các giá trị 25%, 50%, 75%, 100% và tự động. Chẳng hạn, sử dụng w-25 (đối với các giá trị còn lại, thay thế 25 bằng các giá trị đó) cho tiện ích chiều rộng và h-25 (đối với các giá trị còn lại, thay thế 25 bằng các giá trị đó) cho tiện ích chiều cao
Ví dụ sau minh họa các tiện ích thiết lập chiều rộng và chiều cao cho một phần tử -
Thí dụ
Bootstrap 4 Example
Width
Width : auto
Width : 100%
Width : 75%
Width : 50%
Width : 25%
Height
Height : 100%
Height : 75%
Height : 50%
Height : 25%
Height : auto
Nó sẽ tạo ra kết quả sau -
đầu ra
Tiện ích Max-Width và Max-Height
Bạn cũng có thể đặt chiều rộng và chiều cao tối đa cho một phần tử bằng cách sử dụng các tiện ích mw-100 và mh-100 như trong ví dụ bên dưới –