Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
0, <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
1, and <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
2 by default. Modify those values as you need to generate different utilities here.Width 25% Width 50% Width 75% Width 100% <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
Height 25% Height 50% Height 75% Height 100% <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
You can also use <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
3 and <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
4 utilities as needed.<img class="mw-100" src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
h-100 Tương đương với sử dụng Css {height: 100%}.
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-auto Facebook Tương đương với sử dụng Css {height: auto}. .mw-100, .mh-100 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ử. .mw-100
| Lớp
| Mô tả
| | h-25 | Tương đương với sử dụng Css {height: 25%}. Css {width: 25%}.
| | h-50 | Tương đương với sử dụng Css {height: 50%}. Css {width: 50%}.
| | h-75 | Tương đương với sử dụng Css {height: 75%}. Css {width: 75%}.
| | h-100 | Tương đương với sử dụng Css {height: 100%}. Css {width: 100%}.
| | w-auto | Tương đương với sử dụng Css {width: auto}. 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%}. Css {height: 25%}.
| | h-50 | Tương đương với sử dụng Css {height: 50%}. Css {height: 50%}.
| | h-75 | Tương đương với sử dụng Css {height: 75%}. Css {height: 75%}.
| | h-100 | Tương đương với sử dụng Css {height: 100%}. Css {height: 100%}.
| | h-auto | Tương đương với sử dụng Css {height: auto}. 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ả
| | h-25 | Tương đương với sử dụng Css {height: 25%}. Css {max-width: 100%}.
| | h-50 | Tương đương với sử dụng Css {height: 50%}. 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%">
h-75 Tương đương với sử dụng Css {height: 75%}. |
