Bootstrap Text / Typography
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 <body>phần tử và tất cả các đoạn ( <p>).
Ngoài ra, tất cả các <p>phần tử đều có lề dưới bằng một nửa chiều cao dòng tính toán của chúng (10px theo mặc định).
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ố phần tử HTML sẽ được Bootstrap tạo kiểu 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ẽ tạo kiểu cho các tiêu đề HTML ( <h1>đến
<h6>) theo cách sau:
Thí 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)
<small>
Trong Bootstrap, <small>phần tử HTML được sử dụng để tạo văn bản phụ, nhẹ hơn trong bất kỳ tiêu đề nào:
Thí 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ẽ tạo kiểu cho <mark>phần tử HTML theo cách sau:
Thí dụ
Use the mark element to highlight text.
<abbr>
Bootstrap sẽ tạo kiểu cho <abbr>phần tử HTML theo cách sau:
Thí dụ
The WHO was founded in 1948.
<blockquote>
Bootstrap sẽ tạo kiểu cho <blockquote>phần tử HTML theo cách sau:
Thí 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ị câu trích dẫn ở bên phải, hãy sử dụng .blockquote-reverselớp:
Thí 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ẽ tạo kiểu cho <dl>phần tử HTML theo cách sau:
Thí dụ
- Coffee
- - black hot drink
- Milk
- - white cold drink
<mã>
Bootstrap sẽ tạo kiểu cho <code>phần tử HTML theo cách sau:
Thí dụ
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap sẽ tạo kiểu cho <kbd>phần tử HTML theo cách sau:
Thí dụ
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap sẽ tạo kiểu cho <pre>phần tử HTML theo cách sau:
Thí 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 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,,,
và :.text-primary.text-success.text-info.text-warning.text-danger
Thí 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 cho màu nền là : .bg-primary,,, và :
.bg-success.bg-info.bg-warning.bg-danger
Thí dụ
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 học kiểu chữ khác
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 thêm nữa:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 85% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-center |
Indicates center-aligned text | |
.text-right |
Indicates right-aligned text | |
.text-justify |
Indicates justified text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.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) |
|
.list-inline |
Places all list items on a single line | |
.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 |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Toàn bộ tài liệu tham khảo về kiểu chữ Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các phần tử / 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 Tham khảo 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.