Bootstrap 4 Text/Typography
Bootstrap 4 Default Settings
Bootstrap 4 sử dụng mặc định font-size là 16px, và line-height là 1.5.
Mặc định font-family là "Helvetica Neue", Helvetica, Arial, sans-serif.
Ngoài ra, tất cả các thẻ <p> đều có margin-top: 0 và margin-bottom: 1rem (16px theo mặc định).
<h1> - <h6>
Bootstrap 4 styles lại các thẻ HTML headings (<h1> - <h6>) với phông chữ đậm hơn (font-weight) và kích thước phông chữ (font-size) tăng:
Ví dụ
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>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)
Display Headings
Display headings được sử dụng để nổi bật hơn headings bình thường (font-size lớn hơn và font-weight nhẹ hơn), và có 4 classes để chọn: .display-1, .display-2, .display-3, .display-4
Ví dụ
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>Display 1
Display 2
Display 3
Display 4
<small>
Trong Bootstrap 4 thẻ <small> được sử dụng để tạo một văn bản thứ cấp có font nhẹ hơn trong bất kỳ heading nào:
Ví dụ
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap 4 có thẻ <mark> dùng để hightlight chữ:
Ví dụ
<p>Dùng thẻ mark để <mark>highlight</mark> chữ.</p>Dùng thẻ mark để highlight chữ.
<abbr>
Bootstrap 4 có thẻ <abbr> dùng để tạo border dạng dots bên dưới chữ:
Ví dụ
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>WHO được thành lập năm 1948.
<blockquote>
Add class .blockquote trong thẻ <blockquote> khi trích dẫn các khối nội dung từ một nguồn khác:
Ví dụ
<blockquote class="blockquote">
<p>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.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>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 có thẻ<dl> được biểu diễn như sau:
Ví dụ
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>- Coffee
- - black hot drink
- Milk
- - white cold drink
<code>
Bootstrap 4 có thẻ <code> được biểu diễn như sau:
Ví dụ
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>Các thẻ: span, section, và div định nghĩa một phần trong tài liệu HTML.
<kbd>
Bootstrap 4 có thẻ <kbd> được biểu diễn như sau:
Ví dụ
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap 4 có thẻ <pre> được biểu diễn như sau:
Ví dụ
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Typography Classes
Các class trong Bootstrap 4 dưới đây có thể thêm vào các thẻ HTML:
| Class | Mô tả | |
|---|---|---|
.font-weight-bold | Bôi đậm chữ | |
.font-weight-bolder | Bolder text | |
.font-italic | Chữ in nghiêng | |
.font-weight-light | Chữ nhẹ | |
.font-weight-lighter | Chữ nhẹ hơn | |
.font-weight-normal | Chữ bình thường | |
.lead | Làm cho một đoạn văn nổi bật | |
.small | Làm chữ nhỏ (80% đối với kích thước parent) | |
.text-left | Chữ sang trái | |
.text-*-left | Chữ sang trái theo kích cỡ màn hình xs, sm, lg, xlarge | |
.text-break | Ngăn chặn văn bản dài từ phá vỡ bố cục | |
.text-center | Chữ vào giữa | |
.text-*-center | Chữ vào giữa theo kích cỡ màn hình xs, sm, lg, xlarge | |
.text-decoration-none | Bỏ gạch chân link | |
.text-right | Chữ sang phải | |
.text-*-right | Chữ sang phải theo kích cỡ màn hình xs, sm, lg, xlarge | |
.text-justify | Justified chữ | |
.text-monospace | Chữ monospaced | |
.text-nowrap | Chữ no wrap | |
.text-lowercase | Chữ lowercase | |
.text-reset | Reset màu chữ hoặc link (kế thừa màu sắc từ parent của nó) | |
.text-uppercase | Chữ uppercase | |
.text-capitalize | Chữ cái đầu viết hoa | |
.initialism | Hiển thị chữ trong thẻ <abbr> ở cỡ chữ nhỏ hơn một chút | |
.list-unstyled | Loại bỏ list-style mặc định và left margin ở list items (có tác dụng với <ul> và <ol>). Class này chỉ áp dụng cho list items con của thẻ (để loại bỏ list-style mặc định trong bất cử nested lists - list items lồng nhau, hãy áp dụng class này đối với mọi nested lists - list item lồng nhau) | |
.list-inline | Đặt mọi list items vào một dòng duy nhất (dùng class .list-inline-item ở từng thẻ <li>) | |
.pre-scrollable | Khiến thẻ <pre> scrollable |
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
