openplanning

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

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

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: