Hướng dẫn và ví dụ tiện ích 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
- Giới thiệu về Bootstrap
- Hướng dẫn và ví dụ Bootstrap Container
- Hướng dẫn sử dụng hệ thống lưới trong Bootstrap
- Hướng dẫn và ví dụ Bootstrap Nav, Tab, Pill
- Hướng dẫn và ví dụ Bootstrap NavBar
- Hướng dẫn và ví dụ Bootstrap Table
- Hướng dẫn và ví dụ Bootstrap Modal
- Hướng dẫn và ví dụ Bootstrap Form
- Hướng dẫn và ví dụ Bootstrap Input Group
- Hướng dẫn và ví dụ Bootstrap Pagination
- Hướng dẫn và ví dụ Bootstrap Badge
- Hướng dẫn và ví dụ Bootstrap Jumbotron
- Hướng dẫn và ví dụ Bootstrap Dropdown
- Hướng dẫn và ví dụ Bootstrap Alert
- Hướng dẫn và ví dụ Bootstrap Button
- Hướng dẫn và ví dụ Bootstrap Button Group
- Hướng dẫn và ví dụ Bootstrap Popover (Tooltip)
- Hướng dẫn và ví dụ Bootstrap List Group
- Hướng dẫn và ví dụ Bootstrap ProgressBar
- Hướng dẫn và ví dụ Bootstrap Spinner
- Hướng dẫn và ví dụ Bootstrap Card
- Hướng dẫn và ví dụ Bootstrap Collapse và Accordion
- Hướng dẫn và ví dụ Bootstrap Scrollspy
- Hướng dẫn và ví dụ Bootstrap Breadcrumb
- Hướng dẫn và ví dụ Bootstrap Carousel
- Hướng dẫn và ví dụ tiện ích Bootstrap Spacing
- Hướng dẫn và ví dụ tiện ích Bootstrap Border
- Hướng dẫn và ví dụ tiện ích Bootstrap Color
- Hướng dẫn và ví dụ tiện ích Bootstrap Text
- Hướng dẫn và ví dụ tiện ích Bootstrap Sizing
- Hướng dẫn và ví dụ tiện ích Bootstrap Position
- Hướng dẫn và ví dụ tiện ích Bootstrap Flex
- Hướng dẫn và ví dụ tiện ích Bootstrap Display
- Hướng dẫn và ví dụ tiện ích Bootstrap Visibility
- Hướng dẫn và ví dụ tiện ích Bootstrap Embed
Show More
