Hướng dẫn text align bootstrap 5 - căn chỉnh văn bản bootstrap 5

Căn chỉnh văn bản

Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản. Để sắp xếp bắt đầu, kết thúc và căn chỉnh trung tâm, các lớp đáp ứng có sẵn sử dụng cùng một điểm dừng chiều rộng chế độ xem như hệ thống lưới.

Bắt đầu căn chỉnh văn bản trên tất cả các kích thước chế độ xem.

Trung tâm căn chỉnh văn bản trên tất cả các kích thước chế độ xem.

Kết thúc văn bản căn chỉnh trên tất cả các kích thước chế độ xem.

Bắt đầu căn chỉnh văn bản trên sm có kích thước viewports (nhỏ) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên MD có kích thước visports (trung bình) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên LG có kích thước viewports (lớn) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên chế độ xem XL có kích thước (cực lớn) hoặc rộng hơn.

<p class="text-start">Start aligned text on all viewport sizes.p>
<p class="text-center">Center aligned text on all viewport sizes.p>
<p class="text-end">End aligned text on all viewport sizes.p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.p>

Lưu ý rằng chúng tôi không cung cấp các lớp tiện ích cho văn bản hợp lý. Trong khi, về mặt thẩm mỹ, văn bản hợp lý có thể trông hấp dẫn hơn, nó làm cho khoảng cách từ ngẫu nhiên hơn và do đó khó đọc hơn.

Văn bản gói và tràn

Bao bọc văn bản với một lớp

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

4.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

Ngăn chặn văn bản kết thúc bằng một lớp

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

5.

Văn bản này sẽ tràn ra cha mẹ.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

Từ phá vỡ

Ngăn chặn các chuỗi văn bản dài phá vỡ bố cục của các thành phần của bạn bằng cách sử dụng

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

6 để đặt

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

7 và

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

8. Chúng tôi sử dụng

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

9 thay vì

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

0 phổ biến hơn cho hỗ trợ trình duyệt rộng hơn và thêm

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

8 không dùng để tránh các vấn đề với các thùng chứa Flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

Chuyển đổi văn bản

Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.

Văn bản hạ thấp.

Văn bản trên nền.

Văn bản viết hoa.

<p class="text-lowercase">Lowercased text.p>
<p class="text-uppercase">Uppercased text.p>
<p class="text-capitalize">CapiTaliZed text.p>

Lưu ý cách

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

2 chỉ thay đổi chữ cái đầu tiên của mỗi từ, để lại trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởng.

Cỡ chữ

Nhanh chóng thay đổi

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

3 của văn bản. Trong khi các lớp tiêu đề của chúng tôi (ví dụ: ____ ____ 24, ____________ 25) áp dụng

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

3,

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

7 và

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

8, các tiện ích này chỉ áp dụng

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

3. Kích thước cho các tiện ích này phù hợp với các yếu tố tiêu đề HTML, vì vậy khi số lượng tăng, kích thước của chúng giảm.

.FS-1 Văn bản

.FS-2 Văn bản

.FS-3 Văn bản

.FS-4 Văn bản

.FS-5 Văn bản

.fs-6 văn bản

<p class="fs-1">.fs-1 textp>
<p class="fs-2">.fs-2 textp>
<p class="fs-3">.fs-3 textp>
<p class="fs-4">.fs-4 textp>
<p class="fs-5">.fs-5 textp>
<p class="fs-6">.fs-6 textp>

Tùy chỉnh

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

3 có sẵn của bạn bằng cách sửa đổi bản đồ SASS

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

1.

Trọng lượng phông chữ và in nghiêng

Nhanh chóng thay đổi

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

7 hoặc

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

3 của văn bản với các tiện ích này. Các tiện ích

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

3 được viết tắt là

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

5 và

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

7 Tiện ích được viết tắt là

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

7.

Chữ in đậm.

Văn bản trọng lượng táo bạo hơn (liên quan đến phần tử cha).

Văn bản cân nặng bình thường.

Văn bản trọng lượng nhẹ.

Văn bản trọng lượng nhẹ hơn (liên quan đến phần tử cha).

Văn bản in nghiêng.

Văn bản với kiểu phông chữ bình thường

<p class="fw-bold">Bold text.p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).p>
<p class="fw-normal">Normal weight text.p>
<p class="fw-light">Light weight text.p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).p>
<p class="fst-italic">Italic text.p>
<p class="fst-normal">Text with normal font stylep>

Chiều cao giữa các dòng

Thay đổi chiều cao dòng với các tiện ích

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

8.

Đây là một đoạn dài được viết để cho thấy độ cao dòng của một yếu tố bị ảnh hưởng bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.

Đây là một đoạn dài được viết để cho thấy độ cao dòng của một yếu tố bị ảnh hưởng bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.

Đây là một đoạn dài được viết để cho thấy độ cao dòng của một yếu tố bị ảnh hưởng bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.

Đây là một đoạn dài được viết để cho thấy độ cao dòng của một yếu tố bị ảnh hưởng bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.p>

Không gian đơn

Thay đổi lựa chọn vào ngăn xếp phông chữ đơn vị của chúng tôi với

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

9.

Đây là trong không gian đơn sắc

<p class="font-monospace">This is in monospacep>

Đặt lại màu sắc

Đặt lại một văn bản hoặc màu liên kết màu với

<p class="text-lowercase">Lowercased text.p>
<p class="text-uppercase">Uppercased text.p>
<p class="text-capitalize">CapiTaliZed text.p>

0, để nó kế thừa màu từ cha mẹ của nó.

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset linka>.
p>

Trang trí văn bản

Trang trí văn bản trong các thành phần với các lớp trang trí văn bản.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

0

Sass

Biến

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

1

Bản đồ

Các tiện ích kích thước phông chữ được tạo từ bản đồ này, kết hợp với API tiện ích của chúng tôi.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

2

API tiện ích

Phông chữ và các tiện ích văn bản được khai báo trong API tiện ích của chúng tôi trong

<p class="text-lowercase">Lowercased text.p>
<p class="text-uppercase">Uppercased text.p>
<p class="text-capitalize">CapiTaliZed text.p>

1. Tìm hiểu cách sử dụng API Tiện ích.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

3