Hướng dẫn và ví dụ tiện ích Bootstrap Sizing

Xem thêm các chuyên mục:

Các hướng dẫn Bootstrap

Bootstrap Sizing

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Bootstrap Sizing

Bootstrap Sizing là một tiện ích của Bootstrap, nó cung cấp một vài lớp giúp bạn thiết lập chiều rộng và chiều cao cho phần tử.

Class .w-*

Lớp	Mô tả
w-25	Tương đương với sử dụng Css {width: 25%}.
w-50	Tương đương với sử dụng Css {width: 50%}.
w-75	Tương đương với sử dụng Css {width: 75%}.
w-100	Tương đương với sử dụng Css {width: 100%}.
w-auto	Tương đương với sử dụng Css {width: auto}.

w-example


<div class="border p-1">

   <div class="w-25 p-3 bg-primary">Width 25%</div>
   <div class="w-50 p-3 bg-secondary">Width 50%</div>
   <div class="w-75 p-3 bg-info">Width 75%</div>
   <div class="w-100 p-3 bg-danger">Width 100%</div>
   <div class="w-auto p-3 bg-success">Width auto</div>

</div>

Class .h-*

Lớp	Mô tả
h-25	Tương đương với sử dụng Css {height: 25%}.
h-50	Tương đương với sử dụng Css {height: 50%}.
h-75	Tương đương với sử dụng Css {height: 75%}.
h-100	Tương đương với sử dụng Css {height: 100%}.
h-auto	Tương đương với sử dụng Css {height: auto}.

h-example


<div class="border p-1 mt-3" style="height:155px;">
   <div class="h-25 bg-primary" style="display:inline-block; width: 55px;">
      .h-25
   </div>
   <div class="h-50 bg-secondary" style="display:inline-block; width: 55px;">
      .h-50
   </div>
   <div class="h-75 bg-info" style="display:inline-block; width: 55px;">
      .h-75
   </div>
   <div class="h-100 bg-danger" style="display:inline-block; width: 55px;">
      .h-100
   </div>
   <div class="h-auto bg-success" style="display:inline-block; width: 70px;">
      .h-auto
   </div>
</div>

.mw-100, .mh-100

Lớp	Mô tả
.mw-100	Tương đương với sử dụng Css {max-width: 100%}.
.mh-100	Tương đương với sử dụng Css {max-height: 100%}.

mw-100-example


<h4>Image with max-width:100%</h4>

<img class="mw-100" src="../images/flower.jpeg" alt="Max width 100%">

Xem thêm các chuyên mục:

Các hướng dẫn Bootstrap