Tiện ích Bootstrap 5
Tiện ích / Lớp trợ giúp
Bootstrap 5 có rất nhiều lớp tiện ích/trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào.
Biên giới
Sử dụng các lớp border để thêm hoặc xóa đường viền khỏi một phần tử:
Ví dụ
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border
border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span
class="border-top"></span>
<span class="border-end"></span>
<span
class="border-bottom"></span>
<span class="border-start"></span>
Hãy tự mình thử »Chiều rộng biên giới
Sử dụng .border-1 thành .border-5 để thay đổi độ rộng của đường viền:
Ví dụ
<span class="border border-1"></span>
<span class="border
border-2"></span>
<span class="border border-3"></span>
<span
class="border border-4"></span>
<span class="border border-5"></span>
Hãy tự mình thử » Màu viền
Thêm màu vào đường viền bằng bất kỳ lớp màu đường viền theo ngữ cảnh nào:
Ví dụ
<span class="border border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border
border-dark"></span>
<span class="border border-white"></span>
Hãy tự mình thử »Bán kính đường viền
Thêm các góc tròn vào một phần tử có các lớp rounded :
Ví dụ
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span
class="rounded-circle"></span>
<span class="rounded-pill"
style="width:130px"></span>
<span class="rounded-0"></span>
<span
class="rounded-1"></span>
<span class="rounded-2"></span>
<span
class="rounded-3"></span>
<span class="rounded-4"></span>
<span
class="rounded-5"></span>
Hãy tự mình thử »Float và Clearfix
Làm nổi một phần tử sang bên phải bằng lớp .float-end hoặc sang trái bằng .float-start và xóa phần nổi bằng lớp .clearfix :
Ví dụ
<div class="clearfix">
<span class="float-start">Float left</span>
<span
class="float-end">Float right</span>
</div>
Hãy tự mình thử »Phao đáp ứng
Làm nổi một phần tử sang trái hoặc sang phải tùy thuộc vào chiều rộng màn hình, với các lớp float đáp ứng ( .float-*-start|end - trong đó * là sm (>=576px), md (>=768px), lg (> =992px), xl (>=1200px) hoặc xxl (>=1400px)):
Ví dụ
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or
wider</div><br>
<div class="float-xxl-end">Float right on
XXL screens or
wider</div><br>
<div class="float-none">Float none</div>
Hãy tự mình thử »Căn giữa
Căn giữa một phần tử với lớp .mx-auto (thêm lề trái và lề phải: auto):
Chiều rộng
Đặt độ rộng của một phần tử với các lớp w-* ( .w-25 , .w-50 , .w-75 , .w-100 , .w-auto và .mw-100 ):
Ví dụ
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width
50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div
class="w-100 bg-warning">Width 100%</div>
<div
class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Hãy tự mình thử »Chiều cao
Đặt chiều cao của một phần tử với các lớp h-* ( .h-25 , .h-50 , .h-75 , .h-100 , .h-auto và .mh-100 ):
Ví dụ
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height
50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div
class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning"
style="height:500px">Max Height 100%</div>
</div>
Hãy tự mình thử »khoảng cách
Bootstrap 5 có một loạt các lớp tiện ích đệm và lề đáp ứng. Chúng hoạt động với tất cả các điểm ngắt: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) hoặc xxl (>=1400px)):
Các lớp được sử dụng theo định dạng: {property}{sides}-{size} cho xs và {property}{sides}-{breakpoint}-{size} cho sm , md , lg , xl và xxl .
Trường hợp tài sản là một trong:
-
m- đặtmargin -
p- bộpadding
Trong đó các bên là một trong:
-
t- đặtmargin-tophoặcpadding-top -
b- đặtmargin-bottomhoặcpadding-bottom -
s- đặtmargin-lefthoặcpadding-left -
e- đặtmargin-righthoặcpadding-right -
x- đặt cảpadding-leftvàpadding-righthoặcmargin-leftvàmargin-right -
y- đặt cảpadding-topvàpadding-bottomhoặcmargin-topvàmargin-bottom - trống - đặt
marginhoặcpaddingtrên cả 4 cạnh của phần tử
Trong đó kích thước là một trong:
-
0- đặtmarginhoặcpaddingthành0 -
1- đặtmarginhoặcpaddingthành.25rem -
2- đặtmarginhoặcpaddingthành.5rem -
3- đặtmarginhoặcpaddingthành1rem -
4- đặtmarginhoặcpaddingthành1.5rem -
5- đặtmarginhoặcpaddingthành3rem -
auto- đặtmarginthành tự động
Ví dụ
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides
(3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on
all sides (3rem) and a bottom padding (3rem)</div>
Hãy tự mình thử »Thêm ví dụ về khoảng cách
.m-# / m-*-# | lề ở tất cả các bên | Thử nó |
.mt-# / mt-*-# | lề trên | Thử nó |
.mb-# / mb-*-# | lề dưới | Thử nó |
.ms-# / ms-*-# | lề trái | Thử nó |
.me-# / me-*-# | lề phải | Thử nó |
.mx-# / mx-*-# | lề trái và phải | Thử nó |
.my-# / my-*-# | lề trên và dưới | Thử nó |
.p-# / p-*-# | đệm ở tất cả các mặt | Thử nó |
.pt-# / pt-*-# | đệm đầu | Thử nó |
.pb-# / pb-*-# | đệm đáy | Thử nó |
.ps-# / ps-*-# | phần đệm bên trái | Thử nó |
.pe-# / pe-*-# | đệm bên phải | Thử nó |
.py-# / py-*-# | đệm trên và dưới | Thử nó |
.px-# / px-*-# | đệm trái và phải | Thử nó |
Bạn có thể đọc thêm về rem và các đơn vị kích thước khác nhau trong Tài liệu tham khảo đơn vị CSS của chúng tôi.
Bóng tối
Sử dụng các lớp shadow- để thêm bóng vào một phần tử:
Ví dụ
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div
class="shadow-sm p-4 mb-4 bg-white">Small
shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default
shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large
shadow</div>
Hãy tự mình thử »Căn dọc
Sử dụng các lớp align- để thay đổi cách căn chỉnh các phần tử (chỉ hoạt động trên các phần tử nội tuyến, khối nội tuyến, bảng nội tuyến và ô bảng):
Ví dụ
<span class="align-baseline">baseline</span>
<span
class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span
class="align-text-top">text-top</span>
<span
class="align-text-bottom">text-bottom</span>
Hãy tự mình thử »Tỷ lệ khung hình
Tạo video hoặc trình chiếu đáp ứng dựa trên chiều rộng của phần gốc.
Thêm lớp .ratio cùng với tỷ lệ khung hình mà bạn chọn .ratio-* vào phần tử gốc và thêm phần nhúng (video hoặc iframe) bên trong phần tử đó:
Ví dụ
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio
ratio-16x9">
<iframe
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Hãy tự mình thử »Hiển thị
Sử dụng các lớp .visible hoặc .invisible để kiểm soát mức độ hiển thị của các phần tử. Lưu ý: Các lớp này không thay đổi giá trị hiển thị CSS. Họ chỉ thêm visibility:visible hoặc visibility:hidden :
Ví dụ
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
Hãy tự mình thử »Đóng biểu tượng
Sử dụng lớp .btn-close để tạo kiểu cho biểu tượng đóng. Điều này thường được sử dụng cho các cảnh báo và phương thức.
Trình đọc màn hình
Sử dụng lớp .visually-hidden để ẩn một phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình:
Ví dụ
<span class="visually-hidden">I will be hidden on all screens except for screen
readers.</span> Hãy tự mình thử »Màu sắc
Như được mô tả trong chương Màu sắc , đây là danh sách tất cả các lớp màu văn bản và màu nền:
Các lớp dành cho màu văn bản là: .text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (màu nội dung mặc định/thường là màu đen) và .text-light :
Ví dụ
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết:
Ví dụ
Bạn cũng có thể thêm độ mờ 50% cho văn bản đen hoặc trắng bằng các lớp .text-black-50 hoặc .text-white-50 :
Ví dụ
Black text with 50% opacity on white background
White text with 50% opacity on black background
Màu nền
Các lớp dành cho màu nền là: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light .
Các lớp .bg- color ở trên không hoạt động tốt với văn bản, hoặc ít nhất thì bạn phải chỉ định một lớp .text- color thích hợp để có được màu văn bản phù hợp cho từng nền.
Tuy nhiên, bạn có thể sử dụng các lớp .text-bg- color và Bootstrap sẽ tự động xử lý màu văn bản phù hợp cho từng màu nền:
Ví dụ
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
