Văn bản/kiểu chữ Bootstrap
Cài đặt mặc định của Bootstrap
Kích thước phông chữ mặc định chung của Bootstrap là 14px, với chiều cao dòng là 1,428.
Điều này được áp dụng cho phần tử <body> và tất cả các đoạn văn ( <p> ).
Ngoài ra, tất cả các phần tử <p> đều có lề dưới bằng một nửa chiều cao dòng được tính toán của chúng (theo mặc định là 10px).
Bootstrap so với mặc định của trình duyệt
Trong chương này, chúng ta sẽ xem xét một số thành phần HTML sẽ được Bootstrap tạo kiểu hơi khác một chút so với mặc định của trình duyệt.
<h1> - <h6>
Theo mặc định, Bootstrap sẽ định kiểu các tiêu đề HTML ( <h1> đến <h6> ) theo cách sau:
Ví dụ
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<nhỏ>
Trong Bootstrap, phần tử HTML <small> được sử dụng để tạo văn bản phụ, nhẹ hơn trong bất kỳ tiêu đề nào:
Ví dụ
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<dấu>
Bootstrap sẽ định kiểu phần tử HTML <mark> theo cách sau:
<abbr>
Bootstrap sẽ định kiểu phần tử HTML <abbr> theo cách sau:
<trích dẫn>
Bootstrap sẽ định kiểu phần tử HTML <blockquote> theo cách sau:
Ví dụ
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Để hiển thị trích dẫn ở bên phải, hãy sử dụng lớp .blockquote-reverse :
Ví dụ
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap sẽ định kiểu phần tử HTML <dl> theo cách sau:
<mã>
Bootstrap sẽ tạo kiểu cho phần tử HTML <code> theo cách sau:
Ví dụ
The following HTML elements: span , section , and div defines a section in a document.
<kbd>
Bootstrap sẽ định kiểu phần tử HTML <kbd> theo cách sau:
<trước>
Bootstrap sẽ định kiểu phần tử HTML <pre> theo cách sau:
Ví dụ
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Màu sắc và hình nền theo ngữ cảnh
Bootstrap cũng có một số lớp theo 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 dành cho màu văn bản là: .text-muted , .text-primary , .text-success , .text-info , .text-warning và .text-danger :
Ví dụ
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Các lớp dành cho màu nền là: .bg-primary , .bg-success , .bg-info , .bg-warning và .bg-danger :
Ví dụ
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Thêm các lớp học về kiểu chữ
Các lớp Bootstrap bên dưới có thể được thêm vào để tạo kiểu cho các phần tử HTML hơn nữa:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | Try it |
.small |
Indicates smaller text (set to 85% of the size of the parent) | Try it |
.text-left |
Indicates left-aligned text | Try it |
.text-center |
Indicates center-aligned text | Try it |
.text-right |
Indicates right-aligned text | Try it |
.text-justify |
Indicates justified text | Try it |
.text-nowrap |
Indicates no wrap text | Try it |
.text-lowercase |
Indicates lowercased text | Try it |
.text-uppercase |
Indicates uppercased text | Try it |
.text-capitalize |
Indicates capitalized text | Try it |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it |
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol> ). 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) |
Try it |
.list-inline |
Places all list items on a single line | Try it |
.dl-horizontal |
Lines up the terms ( <dt> ) and descriptions ( <dd> ) in
<dl> elements side-by-side. Starts off like default <dl> s, but when the browser window expands, it will line up side-by-side |
Try it |
.pre-scrollable |
Makes a <pre> element scrollable |
Try it |
Tham khảo kiểu chữ Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các thành phần/lớp kiểu chữ, hãy truy cập Tài liệu tham khảo kiểu chữ Bootstrap hoàn chỉnh của chúng tôi.
Ngoài ra, hãy xem Tài liệu tham khảo về các lớp trợ giúp Bootstrap của chúng tôi để biết thêm thông tin về các lớp theo ngữ cảnh.
