openplanning

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

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

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ó thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.