Bootstrap 5 công cụ thực tế

Utilities / Helper Classes

Bootstrap 5 có rất nhiều lớp utility/helper giúp nhanh chóng thiết lập樣式 yếu tố mà không cần sử dụng mã CSS.

Cạnh

Sử dụng lớp cạnh để thêm hoặc xóa cạnh cho yếu tố:

Mô hình

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Thử trực tiếp

Độ rộng viền

Sử dụng .border-1 đến .border-5 Để thay đổi độ rộng viền:

Mô hình

<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>

Thử trực tiếp

Màu viền

Sử dụng bất kỳ lớp màu viền văn bản nào để thêm màu vào viền:

Mô hình

<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>

Thử trực tiếp

Góc tròn viền

Sử dụng rounded Loại để thêm góc tròn cho phần tử:

Mô hình

<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>

Thử trực tiếp

Nổi và xóa nổi

Sử dụng .float-end Lớp nổi sang phải cho yếu tố, hoặc sử dụng .float-start Nổi sang trái và sử dụng .clearfix Lớp xóa nổi:

Mô hình

<div class="clearfix">
  <span class="float-start">Nổi sang trái</span>
  <span class="float-end">Nổi sang phải</span>
</div>

Thử trực tiếp

Nổi响应

Căn nổi theo độ rộng màn hình, sử dụng lớp nổi响应 (.float-*-left|right) trong đó * là:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Mô hình

<div class="float-sm-end">Nổi sang phải trên màn hình nhỏ hoặc rộng hơn</div><br>
<div class="float-md-end">Nổi sang phải trên màn hình trung hoặc rộng hơn</div><br>
<div class="float-lg-end">Nổi sang phải trên màn hình lớn hoặc rộng hơn</div><br>
<div class="float-xl-end">Nổi sang phải trên màn hình siêu lớn hoặc rộng hơn</div><br>
<div class="float-xxl-end">Nổi sang phải trên màn hình lớn hoặc rộng hơn</div><br>
<div class="float-none">Không thực hiện nổi</div>

Thử trực tiếp

Căn giữa

Sử dụng .mx-auto Các yếu tố căn giữa (thêm margin-left và margin-right: auto):

Mô hình

<div class="mx-auto bg-warning" style="width:150px">C方正中</div>

Thử trực tiếp

Chiều rộng

Sử dụng lớp w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100

Mô hình

<div class="w-25 bg-warning">Chiều rộng 25%</div>
<div class="w-50 bg-warning">Chiều rộng 50%</div>
<div class="w-75 bg-warning">Chiều rộng 75%</div>
<div class="w-100 bg-warning">Chiều rộng 100%</div>
<div class="w-auto bg-warning">Chiều rộng tự động</div>
<div class="mw-100 bg-warning">Chiều rộng lớn nhất 100%</div>

Thử trực tiếp

Chiều cao

Sử dụng lớp h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100

Mô hình

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Chiều cao 25%</div>
  <div class="h-50 bg-warning">Chiều cao 50%</div>
  <div class="h-75 bg-warning">Chiều cao 75%</div>
  <div class="h-100 bg-warning">Chiều cao 100%</div>
  <div class="h-auto bg-warning">Chiều cao tự động</div>
  <div class="mh-100 bg-warning" style="height:500px">Chiều cao lớn nhất 100%</div>
</div>

Thử trực tiếp

Khoảng cách

Bootstrap 5 có các lớp tiện ích margin và padding tương ứng với phản hồi rộng. Chúng áp dụng cho tất cả các điểm ngắt:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Cách sử dụng định dạng của các lớp này là:{property}{các cạnh}-{size} dùng cho xsvà {property}{các cạnh}-{breakpoint}-{size} dùng cho sm、md、lg、xl và xxl。

property Là một trong số sau:

  • m - Đặt margin
  • p - Đặt padding

các cạnh Là một trong số sau:

  • t - Đặt margin-top hoặc padding-top
  • b - Đặt margin-bottom hoặc padding-bottom
  • s - Đặt margin-left hoặc padding-left
  • e - Đặt margin-right hoặc padding-right
  • x - Đặt padding-left và padding-right hoặc margin-left và margin-right
  • y - Đặt padding-top và padding-bottom hoặc margin-top và margin-bottom
  • blank - Đặt margin hoặc padding

size Là một trong số sau:

  • 0 - Đặt margin hoặc padding Đặt thành 0
  • 1 - Đặt margin hoặc padding Đặt thành .25rem
  • 2 - Đặt margin hoặc padding Đặt thành .5rem
  • 3 - Đặt margin hoặc padding Đặt thành 1rem
  • 4 - Đặt margin hoặc padding Đặt thành 1.5rem
  • 5 - Đặt margin hoặc padding Đặt thành 3rem
  • auto - Đặt margin Đặt thành

Mô hình

<div class="pt-4 bg-warning">Tôi chỉ có khoảng cách trong biên trên (1.5rem)</div>
<div class="p-5 bg-success">Tôi có khoảng cách trong biên (3rem) ở tất cả các cạnh</div>
<div class="m-5 pb-5 bg-info">Tôi có khoảng cách ngoài biên (3rem) và khoảng cách trong biên dưới (3rem) ở tất cả các cạnh</div>

Thử trực tiếp

Các ví dụ khoảng cách thêm

.m-# / m-*-# Khoảng cách ngoài biên tất cả các cạnh Thử thử
.mt-# / mt-*-# Khoảng cách ngoài biên trên Thử thử
.mb-# / mb-*-# Khoảng cách ngoài biên dưới Thử thử
.ms-# / ms-*-# Khoảng cách ngoài biên trái Thử thử
.me-# / me-*-# Khoảng cách ngoài biên phải Thử thử
.mx-# / mx-*-# Khoảng cách trong biên trái và phải Thử thử
.my-# / my-*-# Khoảng cách ngoài biên trên và dưới Thử thử
.p-# / p-*-# Khoảng cách trong biên tất cả các cạnh (đệm) Thử thử
.pt-# / pt-*-# Khoảng cách trong biên trên Thử thử
.pb-# / pb-*-# Khoảng cách trong biên dưới Thử thử
.ps-# / ps-*-# Khoảng cách trong biên trái Thử thử
.pe-# / pe-*-# Khoảng cách trong biên phải Thử thử
.py-# / py-*-# Khoảng cách trong biên trên và dưới Thử thử
.px-# / px-*-# Khoảng cách trong biên trái và phải Thử thử

Bạn có thể trong Sách tham khảo đơn vị CSS Đọc thêm về rem và các đơn vị kích thước khác trong phần.

Bóng mờ

Hãy sử dụng shadow- Loại để thêm bóng mờ cho phần tử:

Mô hình

<div class="shadow-none p-4 mb-4 bg-light">Không có bóng mờ</div>
<div class="shadow-sm p-4 mb-4 bg-white">Bóng nhỏ</div>
<div class="shadow p-4 mb-4 bg-white">Bóng mặc định</div>
<div class="shadow-lg p-4 mb-4 bg-white">Bóng lớn</div>

Thử trực tiếp

Đối齐 theo chiều dọc

Hãy sử dụng align- Lớp thay đổi cách对齐 của phần tử (chỉ áp dụng cho các phần tử inline, inline-block, inline-table và ô bảng):

Mô hình

<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>

Thử trực tiếp

Tỷ lệ khung hình

Tạo video hoặc slideshow phản hồi dựa trên chiều rộng của phần tử cha.

Đặt .ratio Lớp và tỷ lệ khung hình bạn chọn .aspect-ratio-* Thêm vào phần tử cha và thêm nội dung đính kèm (video hoặc iframe) vào đó:

Mô hình

<!-- Tỷ lệ khung hình 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Tỷ lệ khung hình 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Tỷ lệ khung hình 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Tỷ lệ khung hình 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Thử trực tiếp

Tính hiển thị

Sử dụng .visible hoặc .invisible Lớp có thể kiểm soát tính hiển thị của phần tử：

Ghi chú：Những lớp này sẽ không thay đổi giá trị CSS display. Chúng chỉ thêm visibility:visible hoặc visibility: hidden。

Mô hình

<div class="visible">Tôi là có thể nhìn thấy.</div>
<div class="invisible">Tôi là không thể nhìn thấy.</div>

Thử trực tiếp

Biểu tượng đóng

Sử dụng .btn-close Lớp có thể thiết lập phong cách cho biểu tượng đóng. Thường được sử dụng cho hộp cảnh báo và mô hình.

Mô hình

<button type="button" class="btn-close"></button>

Thử trực tiếp

Màn hình đọc屏

Sử dụng .visually-hidden Lớp có thể ẩn phần tử trên tất cả các thiết bị, trừ màn hình đọc屏:

Mô hình

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

Thử trực tiếp

Màu sắc

Như đã mô tả trong chương "Màu sắc", dưới đây là danh sách tất cả các lớp văn bản và màu nền:

Các lớp 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 mặc định của body/thường là đen）
  • .text-light

Mô hình

Thử trực tiếp

Các lớp văn bản ngữ cảnh cũng có thể được sử dụng cho liên kết:

Mô hình

Thử trực tiếp

Bạn cũng có thể sử dụng các lớp .text-black-50 hoặc .text-white-50 để thêm 50% độ mờ cho văn bản đen hoặc trắng:

Mô hình

Thử trực tiếp

Màu nền

Các lớp cho màu nền là:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Lưu ý rằng màu nền sẽ không thiết lập màu văn bản, vì vậy trong một số trường hợp, bạn cần phải sử dụng chúng với .text-* Loại cùng nhau sử dụng.

Mô hình

Thử trực tiếp