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>
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>
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>
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>
Để 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>
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>
Đị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>
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>
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>
Đị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>