Chữ
Tài liệu và ví dụ cho các tiện ích văn bản phổ biến để kiểm soát căn chỉnh, bao bọc, trọng lượng và hơn thế nữa.
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.
Một số văn bản giữ chỗ để chứng minh căn chỉnh văn bản hợp lý. Bạn se lam điêu tương tự cho tôi? Đã đến lúc đối mặt với âm nhạc Em không còn là nàng thơ của anh nữa. Nghe nói nó đẹp, hãy làm giám khảo và các cô gái của tôi sẽ bỏ phiếu. Tôi có thể cảm thấy một con phượng hoàng trong tôi. Thiên đường ghen tị với tình yêu của chúng tôi, thiên thần đang khóc từ trên cao. Yeah, bạn đưa tôi đến điều không tưởng.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>Đối với căn chỉnh trái, phải và trung tâm, các lớp đáp ứng có sẵn sử dụng các điểm ngắt độ rộng khung nhìn giống như hệ thống lưới.
Văn bản căn trái trên tất cả các kích thước cửa sổ xem.
Văn bản được căn giữa trên tất cả các kích thước cửa sổ xem.
Văn bản được căn phải trên tất cả các kích thước cửa sổ xem.
Văn bản được căn trái trên các cửa sổ xem có kích thước SM (nhỏ) hoặc rộng hơn.
Văn bản được căn trái trên khung nhìn có kích thước MD (trung bình) hoặc rộng hơn.
Văn bản được căn trái trên các cửa sổ xem có kích thước LG (lớn) hoặc rộng hơn.
Văn bản căn trái trên các cửa sổ xem có kích thước XL (cực lớn) hoặc rộng hơn.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Gói văn bản và phần tràn
Gói văn bản bằng một .text-wraplớp.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Ngăn văn bản gói bằng một .text-nowraplớp.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Đối với nội dung dài hơn, bạn có thể thêm một .text-truncatelớp để cắt ngắn văn bản bằng dấu chấm lửng. Yêu cầu display: inline-blockhoặc display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Ngắt từ
Ngăn các chuỗi văn bản dài phá vỡ bố cục các thành phần của bạn bằng cách sử dụng .text-breakđể đặt word-wrap: break-wordvà word-break: break-word. Chúng tôi sử dụng word-wrapthay vì phổ biến overflow-wraphơn để hỗ trợ trình duyệt rộng hơn và thêm những thứ không dùng nữa word-break: break-wordđể tránh các vấn đề với vùng chứa linh hoạt.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>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.
Chữ viết thường.
Văn bản viết hoa.
Văn bản CapiTaliZed.
<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 .text-capitalizechỉ 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.
Độ đậm và độ nghiêng của phông chữ
Nhanh chóng thay đổi trọng lượng (độ đậm) của văn bản hoặc in nghiêng văn bản.
Chữ in đậm.
Văn bản đậm hơn (liên quan đến phần tử mẹ).
Văn bản trọng lượng bình thường.
Văn bản có trọng lượng nhẹ.
Văn bản có trọng lượng nhẹ hơn (liên quan đến phần tử mẹ).
Văn bản in nghiêng.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>Monospace
Thay đổi lựa chọn thành ngăn xếp phông chữ monospace của chúng tôi với .text-monospace.
Đây là trong monospace
<p class="text-monospace">This is in monospace</p>Đặt lại màu
Đặt lại màu của văn bản hoặc liên kết với .text-reset, để nó kế thừa màu từ cha của nó.
Đã tắt tiếng văn bản có liên kết đặt lại .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Trang trí văn bản
Loại bỏ một trang trí văn bản với một .text-decoration-nonelớp.
<a href="#" class="text-decoration-none">Non-underlined link</a>