Mục lục

Hướng dẫn sử dụng tiện ích Bootstrap Sizing

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

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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: