Bootstrap 4 Text/Typography

Short URL: https://gokisoft.com/1246

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 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>

<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>

<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:

Typography Classes

Các class trong Bootstrap 4 dưới đây có thể thêm vào các thẻ HTML: