Bootstrap Text / Typography

Kích thước mặc định của Bootstrap


Mặc định cài đặt bootstrap của font-size là 14px , với chiều cao hàng line-height  là 1,428 .

Stysheet này được áp dụng cho thẻ <body> và tất cả các thẻ định dạng văn bản. 

Ngoài ra, thẻ <p> được canh lề dưới bằng một nửa chiều cao dòng (10px theo mặc định).

Headings h1 - h6


Theo mặc định, Bootstrap sẽ tạo kiểu cho các tiêu đề HTML (<h1> đến <h6>) theo cách như sau.

Ví dụ

Xem kết quả

<small>


Trong Bootstrap, phần tử HTML <small> được sử dụng để tạo văn bản phụ, nhỏ hơn các thẻ tiêu đề heading.

Ví dụ

Xem kết quả

<mark>


Bootstrap sẽ tạo kiểu cho phần tử HTML <mark> theo cách như sau.

Ví dụ

Sử dụng phần tử mark để highlight văn bản

Xem kết quả

<abbr>


Bootstrap sẽ tạo kiểu cho phần tử HTML <abbr> theo cách như sau.

Ví dụ

Tổ chức WHO được thành lập năm 1948.

Xem kết quả

<blockquote>


Bootstrap sẽ tạo kiểu cho phần tử HTML <blockquote> theo cách như sau.

Ví dụ

Trong 50 năm, WWF đã bảo vệ tương lai của môi trường. 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 ở Hoa Kỳ và gần 5 triệu trên toàn cầu.

Nguồn WWF's website

Xem kết quả

Để hiển thị câu trích dẫn ở bên phải, chúng ta sử dụng lớp .blockquote-reverse.

Ví dụ

Trong 50 năm, WWF đã bảo vệ tương lai của môi trường. 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 ở Hoa Kỳ và gần 5 triệu trên toàn cầu.

Nguồn WWF's website

Xem kết quả

<dl>


Bootstrap sẽ tạo kiểu cho phần tử HTML <dl> theo cách như sau.

Ví dụ

Cà phê
- Thức uống đen và nóng
Milk
- Thức uống trắng và lạnh

Xem kết quả

<code>


Bootstrap sẽ tạo kiểu cho phần tử HTML <code> theo cách như sau.

Ví dụ

Các phần tử HTML sau: span, sectiondiv xác định một phần trong tài liệu.

Xem kết quả

<kbd>


Bootstrap sẽ tạo kiểu cho phần tử HTML <kbd> theo cách như sau.

Ví dụ

Nhấn ctrl + p để mở hộp Print.

Xem kết quả

<pre>


Bootstrap sẽ tạo kiểu cho phần tử HTML <pre> theo cách như sau.

Ví dụ

Văn bản trong một phần tử <pre>
được hiển thị trong một chiều rộng cố định
phông chữ và nó bảo tồn
cả không gian và
ngắt dòng.

Xem kết quả

Màu sắc và hình nền theo ngữ cảnh


Bootstrap cũng có một số lớp ngữ cảnh có thể được sử dụng để cung cấp "ý nghĩa thông qua màu sắc".

Các lớp cho màu văn bản là: .text-muted, .text-primary, .text-success, .text-info, .text-warning.text-danger.

Ví dụ

Văn bản với lớp text-muted

Văn bản với lớp text-primary

Văn bản với lớp text-success

Văn bản với lớp text-info

Văn bản với lớp text-warning

Văn bản với lớp text-danger

Xem kết quả

Các lớp cho màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger.

Ví dụ

Văn bản với lớp bg-primary

Văn bản với lớp bg-success

Văn bản với lớp bg-info

Văn bản với lớp bg-warning

Văn bản với lớp bg-danger

Xem kết quả

Một số lớp kiểu text khác


Class Description Ví dụ
.lead Làm cho một đoạn văn nổi bật Xem ví dụ
.small Cho biết văn bản nhỏ hơn (được đặt thành 85% kích thước của văn bản gốc) Xem ví dụ
.text-left Cho biết văn bản căn trái Xem ví dụ
.text-center Cho biết văn bản căn giữa Xem ví dụ
.text-right Cho biết văn bản căn phải Xem ví dụ
.text-justify Cho biết văn bản được căn chỉnh đều nhau Xem ví dụ
.text-nowrap Cho biết không có văn bản bao bọc Xem ví dụ
.text-lowercase Cho biết văn bản viết thường Xem ví dụ
.text-uppercase Cho biết văn bản viết hoa Xem ví dụ
.text-capitalize Cho biết văn bản viết hoa các ký tự đầu dòng Xem ví dụ
.initialism Hiển thị văn bản bên trong một phần tử <abbr> ở kích thước phông chữ nhỏ hơn một chút Xem ví dụ
.list-unstyled Loại bỏ kiểu danh sách mặc định và lề trái trên các mục danh sách (hoat động trên cả thẻ <ul><ol>). Lớp này chỉ áp dụng cho các mục danh sách con trực tiếp (để xóa kiểu danh sách mặc định khỏi bất kỳ danh sách lồng nhau nào, hãy áp dụng lớp này cho mọi danh sách lồng nhau) Xem ví dụ
.list-inline Đặt tất cả các mục trong danh sách trên một dòng Xem ví dụ
.dl-horizontal Sắp xếp các thuật ngữ (<dt>) và mô tả (<dd>) trong các phần tử <dl> cạnh nhau . Bắt đầu giống như <dl> mặc định, nhưng khi cửa sổ trình duyệt mở rộng, nó sẽ xếp hàng cạnh nhau Xem ví dụ
.pre-scrollable Làm cho phần tử <pre> có thể cuộn được Xem ví dụ