Bootstrap - Văn bản: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting vào thế giới của việc định dạng văn bản trong Bootstrap. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc thành thạo việc manipulates văn bản giống như học cách vẽ với từ trên canvas kỹ thuật số của bạn. Vậy, chúng ta cùng nhảy vào và làm cho trang web của bạn trông tuyệt vời!

Canh lề văn bản

Một trong những điều đầu tiên bạn sẽ muốn học là cách canh lề văn bản. Bootstrap làm điều này rất dễ dàng với một bộ các lớp mà bạn có thể áp dụng cho các phần tử HTML của mình.

<p class="text-start">Văn bản canh trái.</p>
<p class="text-center">Văn bản canh giữa.</p>
<p class="text-end">Văn bản canh phải.</p>

Trong ví dụ này, chúng ta đang sử dụng ba lớp khác nhau:

• text-start: Canh văn bản bên trái (mặc định trong hầu hết các trường hợp)
• text-center: Canh văn bản giữa
• text-end: Canh văn bản bên phải

Hãy nhớ, việc canh lề giống như việc sắp xếp nội thất trong một căn phòng. Bạn muốn nó trông cân đối và dễ nhìn!

Đ wrapping và tràn text

Đôi khi, bạn có thể có văn bản quá dài so với容器 của nó. Bootstrap cung cấp các lớp để xử lý điều này một cách tinh tế.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
Văn bản này nên wrapping.
</div>

<div class="text-nowrap bg-light" style="width: 8rem;">
Văn bản này nên tràn.
</div>

Tại đây, chúng ta đang sử dụng:

• text-wrap: Cho phép văn bản dài wrapping sang dòng tiếp theo
• text-nowrap: Ngăn không cho văn bản wrapping, gây ra tràn container

Hãy tưởng tượng text-wrap như một chiếc chăn ấm quấn quanh bạn, trong khi text-nowrap giống như cố gắng mặc vào quần áo quá nhỏ!

Ngắt từ

Khi xử lý từ dài hoặc URL, bạn có thể cần ngắt chúng để ngăn chặn tràn. Bootstrap có thể giúp bạn:

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Lớp text-break cho phép từ dài ngắt và wrapping sang dòng tiếp theo. Nó giống như cho phép từ của bạn nghỉ ngơi khi chúng quá dài!

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

Muốn hô to từ trên mái nhà hay thì thầm nhẹ nhàng? Các lớp chuyển đổi văn bản có thể giúp bạn thiết lập tone:

<p class="text-lowercase">VĂN BẢN THƯỜNG.</p>
<p class="text-uppercase">VĂN BẢN HOA.</p>
<p class="text-capitalize">VĂN BẢN VIẾT HOA ĐẦU.</p>

• text-lowercase: Chuyển đổi tất cả các chữ cái thành chữ thường
• text-uppercase: Chuyển đổi tất cả các chữ cái thành chữ hoa
• text-capitalize: Viết hoa chữ cái đầu tiên của mỗi từ

Nó giống như có một Điều khiển âm lượng cho văn bản của bạn!

Cỡ chữ

Bootstrap cung cấp một loạt các lớp cỡ chữ để giúp bạn nhấn mạnh hoặc giảm nhấn văn bản:

<p class="fs-1">Cỡ chữ 1 (lớn nhất)</p>
<p class="fs-2">Cỡ chữ 2</p>
<p class="fs-3">Cỡ chữ 3</p>
<p class="fs-4">Cỡ chữ 4</p>
<p class="fs-5">Cỡ chữ 5</p>
<p class="fs-6">Cỡ chữ 6 (nhỏ nhất)</p>

Các lớp này trải từ fs-1 (lớn nhất) đến fs-6 (nhỏ nhất). Nó giống như có một bộ cọ khác nhau cho văn bản của bạn!

Độ đậm và Nghiêng chữ

Đôi khi bạn cần nhấn mạnh văn bản của mình. Bootstrap làm điều này rất dễ dàng:

<p class="fw-bold">Văn bản đậm.</p>
<p class="fw-bolder">Văn bản đậm hơn (so với phần tử cha).</p>
<p class="fw-normal">Văn bản bình thường.</p>
<p class="fw-light">Văn bản mảnh.</p>
<p class="fw-lighter">Văn bản mảnh hơn (so với phần tử cha).</p>
<p class="fst-italic">Văn bản nghiêng.</p>
<p class="fst-normal">Văn bản với字体样式 bình thường</p>

Các lớp này cho phép bạn điều chỉnh trọng lượng và样式 của văn bản. Nó giống như tập thể dục hoặc cho phép văn bản của bạn thư giãn!

Chiều cao dòng

Điều chỉnh chiều cao dòng có thể cải thiện khả năng đọc. Bootstrap cung cấp một lớp đơn giản cho điều này:

<p class="lh-1">Đây là một đoạn văn bản dài để hiển thị cách chiều cao dòng của một phần tử bị ảnh hưởng bởi các công cụ của chúng tôi. Lưu ý cách đoạn văn bản này có chiều cao dòng khác so với đoạn trước.</p>
<p class="lh-sm">Đây là một đoạn văn bản dài để hiển thị cách chiều cao dòng của một phần tử bị ảnh hưởng bởi các công cụ của chúng tôi. Lưu ý cách đoạn văn bản này có chiều cao dòng khác so với đoạn trước.</p>
<p class="lh-base">Đây là một đoạn văn bản dài để hiển thị cách chiều cao dòng của một phần tử bị ảnh hưởng bởi các công cụ của chúng tôi. Lưu ý cách đoạn văn bản này có chiều cao dòng khác so với đoạn trước.</p>
<p class="lh-lg">Đây là một đoạn văn bản dài để hiển thị cách chiều cao dòng của một phần tử bị ảnh hưởng bởi các công cụ của chúng tôi. Lưu ý cách đoạn văn bản này có chiều cao dòng khác so với đoạn trước.</p>

Các lớp này điều chỉnh khoảng cách giữa các dòng văn bản. Nó giống như điều chỉnh khoảng cách trong một cuốn sách để dễ đọc hơn!

Font chữ fixed-width

Để hiển thị mã hoặc nội dung kỹ thuật khác, bạn có thể muốn sử dụng font chữ fixed-width:

<p class="font-monospace">Đây là văn bản trong font monospace</p>

Lớp font-monospace đặt văn bản trong font chữ fixed-width, nơi mỗi ký tự chiếm cùng một lượng không gian ngang. Nó hoàn hảo cho đoạn mã hoặc khi bạn cần sự align chính xác!

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

Đôi khi, bạn có thể cần đặt lại màu sắc của văn bản về mặc định:

<p class="text-muted">
Văn bản mờ với một <a href="#" class="text-reset">liên kết đặt lại</a>.
</p>

Lớp text-reset loại bỏ bất kỳ màu sắc nào của văn bản, trả về mặc định. Nó giống như nhấn nút đặt lại cho màu sắc văn bản của bạn!

Trang trí văn bản

Cuối cùng, hãy nói về trang trí văn bản:

<p class="text-decoration-underline">Văn bản này có một dòng dưỡn dưỡn.</p>
<p class="text-decoration-line-through">Văn bản này có một dòng gạch ngang.</p>
<a href="#" class="text-decoration-none">Liên kết này không có trang trí mặc định</a>

Các lớp này cho phép bạn thêm hoặc loại bỏ gạch dưới và gạch ngang. Nó giống như thêm những chi tiết cuối cùng cho kiệt tác văn bản của bạn!

Dưới đây là bảng tóm tắt tất cả các lớp liên quan đến văn bản mà chúng ta đã xem xét:

Phân loại	Lớp
Canh lề	text-start, text-center, text-end
Đ wrapping	text-wrap, text-nowrap
Ngắt từ	text-break
Chuyển đổi	text-lowercase, text-uppercase, text-capitalize
Cỡ chữ	fs-1, fs-2, fs-3, fs-4, fs-5, fs-6
Độ đậm	fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter
Font Style	fst-italic, fst-normal
Chiều cao dòng	lh-1, lh-sm, lh-base, lh-lg
Font chữ fixed-width	font-monospace
Đặt lại màu sắc	text-reset
Trang trí	text-decoration-underline, text-decoration-line-through, text-decoration-none

Và thế là xong! Bây giờ bạn đã có kiến thức để định dạng văn bản của mình như một chuyên gia sử dụng Bootstrap. Hãy nhớ, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm các lớp này trong dự án của bạn. Chúc mừng编码, và mong rằng văn bản của bạn luôn trông rạng rỡ!

Credits: Image by storyset