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.
<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.
<mark>
Bootstrap sẽ tạo kiểu cho phần tử HTML <mark> theo cách như sau.
<abbr>
Bootstrap sẽ tạo kiểu cho phần tử HTML <abbr> theo cách như sau.
<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.
Để 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.
<dl>
Bootstrap sẽ tạo kiểu cho phần tử HTML <dl> theo cách như sau.
<code>
Bootstrap sẽ tạo kiểu cho phần tử HTML <code> theo cách như sau.
<kbd>
Bootstrap sẽ tạo kiểu cho phần tử HTML <kbd> theo cách như sau.
<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.
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 và .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
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
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> và <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ụ |