openplanning

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

  1. Bootstrap Sizing

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%">

Các hướng dẫn Bootstrap

Show More