Dễ dàng sắp xếp lại văn bản thành các thành phần với các lớp căn chỉnh văn bản. Đối với căn trái, phải và giữa, các lớp phản hồi có sẵn sử dụng các điểm dừng chiều rộng khung nhìn giống như hệ thống lưới
Văn bản được căn trái trên tất cả các kích thước khung nhìn Văn bản được căn giữa trên tất cả các kích thước khung nhìn Văn bản được căn phải trên tất cả các kích thước khung nhìn Văn bản được căn trái trên khung nhìn 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 khung nhìn có kích thước LG [lớn] 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 XL [cực lớn] hoặc rộng hơn
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM [small] or wider.
Left aligned text on viewports sized MD [medium] or wider.
Left aligned text on viewports sized LG [large] or wider.
Left aligned text on viewports sized XL [extra-large] or wider.
Ghi chú. Chúng tôi không cung cấp các lớp tiện ích cho văn bản hợp lý. Mặc dù, về mặt thẩm mỹ, văn bản được căn đều có thể trông hấp dẫn hơn, nhưng nó làm cho khoảng cách từ trở nên ngẫu nhiên hơn và do đó khó đọc hơn
Bootstrap 5 Các lớp chữ nghiêng và trọng lượng phông chữ được sử dụng để thao tác trọng lượng văn bản và kiểu văn bản. Có một số lớp để làm như vậy. Trong bài viết này, chúng ta sẽ thấy việc sử dụng từng lớp đã được sử dụng trong mã ví dụ
Các tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường [cỡ chữ lớn hơn và độ đậm của phông chữ nhẹ hơn] và có bốn loại để lựa chọn. .display-1
, .display-2
, .display-3
, .display-4
Trong Bootstrap 4, phần tử HTML font-size
0 được sử dụng để tạo văn bản phụ, nhẹ hơn trong bất kỳ tiêu đề nào
Thí dụ
tiêu đề h2 văn bản phụ
tiêu đề h3 văn bản phụ
tiêu đề h4 văn bản phụ
tiêu đề h5 văn bản phụtiêu đề h6 văn bản phụ Hãy tự mình thử »Bootstrap 4 sẽ tạo kiểu cho phần tử HTML font-size
0 với màu nền vàng và một số phần đệm
Bootstrap 4 sẽ tạo kiểu cho phần tử HTML font-size
0 với đáy có đường viền chấm
Thêm lớp font-size
3 vào một
khi trích dẫn các khối nội dung từ một nguồn khácThí dụ
Trong 50 năm, WWF đã bảo vệ tương lai của thiên nhiên. Tổ chức bảo tồn hàng đầu thế giới, WWF hoạt động tại 100 quốc gia và được hỗ trợ bởi 1. 2 triệu thành viên tại Hoa Kỳ và gần 5 triệu trên toàn cầu
Tự mình thử » Bootstrap 4 sẽ tạo kiểu cho HTML
phần tử theo cách saufont-size
4font-size
5,font-size
6 vàfont-size
7 định nghĩa một phần trong tài liệuTự mình thử »Bootstrap 4 sẽ tạo kiểu cho phần tử HTML
font-size
0 theo cách sauBootstrap 4 sẽ tạo kiểu cho HTML
element in the following way:
Example
Text in a pre element
Try it Yourself »
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.More Typography Classes
The Bootstrap 4 classes below can be added to style HTML elements further:
Class Description Example.font-weight-bold
Bold text Try it.font-weight-bolder
Bolder text Try it.font-italic
Italic text Try it.font-weight-light
Light weight text Try it.font-weight-lighter
Lighter weight text Try it.font-weight-normal
Normal text Try it.lead
Makes a paragraph stand out Try it.small
Indicates smaller text [set to 80% of the size of the parent] Try it.text-left
Indicates left-aligned text Try it.text-*-left
Indicates left-aligned text on small, medium, large or xlarge screens Try it.text-break
Prevents long text from breaking layout Try it.text-center
Indicates center-aligned text Try it.text-*-center
Indicates center-aligned text on small, medium, large or xlarge screens Try it.text-decoration-none
Removes the underline from a link Try it.text-right
Indicates right-aligned text Try it.text-*-right
Indicates right-aligned text on small, medium, large or xlarge screens Try it.text-justify
Indicates justified text Try it.text-monospace
Monospaced text Try it.text-nowrap
Indicates no wrap text Try it.text-lowercase
Indicates lowercased text Try it.text-reset
Resets the color of a text or a link [inherits the color from its parent] Try it.text-uppercase
Indicates uppercased text Try it.text-capitalize
Indicates capitalized text Try it.initialism
Displays the text inside anelement in a slightly smaller font size Try it
.list-unstyled
Removes the default list-style and left margin on list items [works on bothand
Try it]. This class only applies to immediate children list items [to remove the default list-style from any nested lists, apply this class to any nested lists as well]
.list-inline
Places all list items on a single line [used together with.list-inline-item
on eachelements] Try it.pre-scrollable
Makes aelement scrollableThử điToàn bộ tài liệu tham khảo CSS Bootstrap 4
Để có tài liệu tham khảo đầy đủ về tất cả các lớp CSS có sẵn trong Bootstrap 4, hãy truy cập Tài liệu tham khảo về tất cả các lớp Bootstrap 4 của chúng tôi
Làm cách nào để in đậm văn bản nút trong Bootstrap?
Để in đậm văn bản nút, đặt. lớp font-weight-bold để in đậm văn bản nút trong bootstrap 4.Làm cách nào để đánh dấu văn bản trong Bootstrap?
Sử dụng phần tử đánh dấu để đánh dấu văn bản.Làm cách nào để bọc nội dung trong Bootstrap?
Để bọc nội dung trang bằng Bootstrap, chúng tôi sử dụng. lớp chứa. Vùng chứa được sử dụng để đệm và căn chỉnh nội dung của trang web. .thùng đựng hàngchất lỏng chứavùng chứa-{breakpoint}Làm cách nào để sử dụng phần đệm trong Bootstrap?
Ký hiệu .t - cho các lớp đặt lề trên hoặc đệm trênb - đối với các lớp đặt lề dưới hoặc đệm dướil - cho các lớp đặt lề trái hoặc đệm tráir - dành cho các lớp đặt lề phải hoặc đệm phảix - cho các lớp thiết lập cả *-left và *-right