Bootstrap 4 - Bootstrap Typography

Typography Trong Bootstrap

Trong hướng dẫn này, bạn sẽ tìm hiểu về cách tạo kiểu và định dạng nội dung văn bản như tiêu đề, đoạn văn, dấu ngoặc kép, v.v. với Bootstrap.

Làm việc với heading

Chúng ta có thể xác định tất cả các thẻ heading HTML từ h1 đến h6 tương tự như cách xác định các thẻ này trong tài liệu HTML đơn giản. Trong trường hợp nếu muốn áp dụng các style của phần tử giống style của heading, chúng ta có thể sử dụng các lớp heading .h1 đến .h6 trên các phần tử khác nhau.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các thẻ heading HTML từ h1 đến h6:

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Xem ví dụ


Tùy Chỉnh Heading

Ngoài ra chúng ta có thể sử dụng thẻ small với lớp .text-muted để hiển thị văn bản thứ cấp của heading bất kỳ trong biến thể nhỏ hơn.

Ví dụ: trong ví dụ này chúng ta sử dụng thẻ small với lớp .text-muted để hiển thị văn bản thứ cấp của heading:

<h2>
    Fancy display heading
    <small class="text-muted">HiepsiiT chia sẻ kiến thức</small>
</h2>

Xem ví dụ


Display Heading

Trong Bootstrap 4 bổ sung display heading, được sử dụng để làm nổi bật một tiêu đề (heading).

Ví dụ: trong ví dụ dưới đây 4 tiêu đề được hiển thị theo cách khác nhau:

<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>

Xem ví dụ


Làm việc với đoạn văn bản trong Bootstrap

Kích thước font chữ mặc định trong Bootstrap là 1rem (tương đương 16px), chiều cao giữa các dòng là 1.5. Các thông số này được áp dụng cho thẻ body và tất cả các đoạn văn bản.

Ngoài ra căn lề dưới bằng1/2 chiều cao giữa các dòng (mặc định là 10px) được áp dụng cho tất cả các đoạn văn bản, tức là các phần tử p.

Để làm nổi bật đoạn văn bản, chúng ta thêm lớp .lead vào đó.

Ví dụ: trong ví dụ dưới đây chúng ta thêm lớp .lead để làm nổi bật đoạn văn bản:

<p>This is how a normal paragraph looks like in Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Bootstrap.</p>

Xem ví dụ

Mẹo: Trong CSS, rem là viết tắt của "root em". 1rem tương đương với kích thước font chữ của phần tử gốc (tức là phần tử html) là 16px trong hầu hết các trình duyệt theo mặc định.

Để căn chỉnh văn bản sang trái, phải và chính giữa trong một đoạn, chúng ta sử dụng các lớp căn chỉnh văn bản.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các lớp căn chỉnh để căn chỉnh văn bản sang trái, phải và chính giữa:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

 Xem ví dụ

Ngoài ra chúng ta có thể căn chỉnh văn bản dựa trên kích thước màn hình thiết bị bằng cách sử dụng các lớp căn chỉnh văn bản đáp ứng. Các lớp này sử dụng các breakpoint làm hệ thống lưới (grid system).

Tham khảo ví dụ dưới đây, trong ví dụ này chúng ta sử dụng các lớp căn chỉnh văn bản đáp ứng:

<p class="text-sm-left">Text aligned to left on small or wider viewports.</p>
<p class="text-md-left">Text aligned to left on medium or wider viewports.</p>
<p class="text-lg-left">Text aligned to left on large or wider viewports.</p>
<p class="text-xl-left">Text aligned to left on extra-large or wider viewports.</p>

Xem ví dụ


Định dạng văn bản

Chúng ta có thể sử dụng các thẻ định dạng văn bản như thẻ strong, i, small để định dạng văn bản in đậm, in nghiêng, ... giống như cách mà chúng ta vẫn làm trong văn bản HTML đơn giản.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các thẻ định dạng văn bản để định dạng văn bản:

<p><b>This is bold text</b></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

 Xem ví dụ


Chuyển đổi văn bản

Ngoài ra chúng ta có thể chuyển đổi văn bản sang chữ thường, chữ hoa hoặc chữ viết hoa.

Tham khảo ví dụ dưới đây:

<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>

Xem ví dụ


Màu sắc văn bản

Bootstrap có nhiều tiện ích để hiển thị màu sắc văn bản khác nhau, chẳng hạn như các thông báo lỗi hay thông báo cài đặt thành công, ... .

Ví dụ: trong ví dụ này chúng ta sử dụng màu sắc khác nhau cho các văn bản khác nhau:

<p class="text-primary">Primary: Please read the instructions carefully before proceeding.</p>
<p class="text-secondary">Secondary: This is featured has been removed from the latest version.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Info: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Danger: An error has been occurred while submitting your data.</p>
<p class="text-muted">Muted: This paragraph of text is grayed out.</p>

Xem ví dụ 


Định dạng trích dẫn

Để định dạng các trích dẫn, chúng ta chỉ cần xác định các trích dẫn bằng cách sử dụng phần tử blockquote và Bootstrap sẽ thực hiện nốt phần còn lại.

Ngoài ra, để xác định nguồn, chúng ta có thể thêm phần tử footer với lớp .blockquote-footer và bọc tên nguồn trong cite, như trong ví dụ dưới đây:

<blockquote class="blockquote">
    <p class="mb-0">The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>

Xem ví dụ