Bootstrap 4 Văn bản / Kiểu chữ
Cài đặt mặc định của Bootstrap 4
Bootstrap 4 sử dụng mặc định
font-sizelà 16px và của nó
line-heightlà 1,5.
Mặc định font-familylà "Helvetica Neue", Helvetica, Arial, sans-serif.
Ngoài ra, tất cả các <p>phần tử đều có
margin-top: 0và margin-bottom: 1rem(16px theo mặc định).
<h1> - <h6>
Bootstrap 4 định kiểu các tiêu đề HTML ( <h1>đến
<h6>) với trọng lượng phông chữ đậm hơn và kích thước phông chữ tăng lên:
Thí dụ
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Tiêu đề hiển thị
Tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường (kích thước phông chữ lớn hơn và trọng lượng phông chữ nhẹ hơn) và có bốn lớp để lựa chọn : .display-1,,.display-2.display-3.display-4
Thí dụ
Display 1
Display 2
Display 3
Display 4
<small>
Trong Bootstrap 4, <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 4 sẽ tạo kiểu cho <mark>phần tử HTML với màu nền vàng và một số phần đệm:
Thí dụ
Use the mark element to highlight text.
<abbr>
Bootstrap 4 sẽ tạo kiểu cho <abbr>phần tử HTML với đường viền chấm ở dưới:
Thí dụ
The WHO was founded in 1948.
<blockquote>
Thêm .blockquotelớp vào a <blockquote>
khi trích dẫn các khối nội dung từ một nguồn khác:
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 4 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 4 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 4 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 4 sẽ tạo kiểu cho <pre>phần tử HTML theo cách sau:
Thí dụ
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Các lớp học kiểu chữ khác
Các lớp Bootstrap 4 bên dưới có thể được thêm vào để tạo kiểu thêm cho các phần tử HTML:
| Class | Description | Example |
|---|---|---|
.font-weight-bold |
Bold text | |
.font-weight-bolder |
Bolder text | |
.font-italic |
Italic text | |
.font-weight-light |
Light weight text | |
.font-weight-lighter |
Lighter weight text | |
.font-weight-normal |
Normal text | |
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 80% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-*-left |
Indicates left-aligned text on small, medium, large or xlarge screens | |
.text-break |
Prevents long text from breaking layout | |
.text-center |
Indicates center-aligned text | |
.text-*-center |
Indicates center-aligned text on small, medium, large or xlarge screens | |
.text-decoration-none |
Removes the underline from a link | |
.text-right |
Indicates right-aligned text | |
.text-*-right |
Indicates right-aligned text on small, medium, large or xlarge screens | |
.text-justify |
Indicates justified text | |
.text-monospace |
Monospaced text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | |
.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 (used together with
.list-inline-item on each <li> elements) |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Toàn bộ tham chiếu 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 trong Bootstrap 4 của chúng tôi .