Bootstrap Typography

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 Tiêu đề

Bạn có thể định nghĩa tất cả các tiêu đề HTML, từ <h1> tới <h6> - theo cách giống như cách bạn định nghĩa trong tài liệu HTML đơn giản. Bạn cũng có thể sử dụng các lớp tiêu đề .h1 tới .h6 cho các phần tử khác, nếu bạn muốn áp dụng kiểu trên văn bản của phần tử giống như các tiêu đề.

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

Kết quả của ví dụ trên sẽ giống như sau:

Tùy chỉnh tiêu đề

Ngoài ra, bạn có thể sử dụng thẻ <small> với lớp .text-muted để hiển thị văn bản phụ của bất kỳ tiêu đề nào trong một biến thể nhỏ hơn và nhẹ hơn. Đây là một ví dụ:

<h2>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h2>

Kết quả của ví dụ trên sẽ giống như sau:

Tùy chỉnh tiêu đề trong Bootstrap

Tiêu đề hiển thị

Bootstrap cũng cung cấp các tiêu đề hiển thị có thể được sử dụng khi bạn cần một tiêu đề nổi bật. Các tiêu đề hiển thị được hiển thị với font-size lớn hơn nhưng font-weight nhẹ hơn.

Bootstrap có sẵn 6 tiêu đề hiển thị khác nhau. Đây là một ví dụ:

<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>
<h1 class="display-5">Display Heading 5</h1>
<h1 class="display-6">Display Heading 6</h1>

Kết quả của ví dụ trên sẽ giống như sau:

Tiêu đề hiển thị trong Bootrap

Làm việc với đoạn văn

Mặc định font-size chung của Bootstrap là 1rem (thường là 16px), với line-height là 1.5 ( thường là 24px), được áp dụng cho phần tử <body> cũng như tất cả các đoạn văn bản tức là phần tử <p>. Ngoài ra margin-bottom là 1rem cũng được áp dụng cho tất cả các đoạn văn.

Bạn cũng có thể làm cho một đoạn văn nổi bật bằng cách thêm lớp .lead cho 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>

Mã HTML trong các ví dụ trên sẽ tạo ra kết quả sau:

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

Căn chỉnh văn bản

Bạn có thể dễ dàng căn chỉnh văn bản sang trái, phải và giữa bằng cách sử dụng các lớp căn chỉnh văn bản.

<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh văn bản trong Bootstrap

Bạn cũng có thể căn chỉnh văn bản dựa trên kích thước màn hình 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 điểm ngắt độ rộng khung nhìn giống như hệ thống lưới.

<p class="text-sm-center">Text will be center aligned on small sized (sm) viewports and up.</p>
<p class="text-md-center">Text will be center aligned on medium sized (md) viewports and up.</p>
<p class="text-lg-center">Text will be center aligned on large sized (lg) viewports and up.</p>
<p class="text-xl-center">Text will be center aligned on extra-large sized (xl) viewports and up.</p>

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

Bạn có thể tự do sử dụng các thẻ định dạng văn bản như <strong>, <i>, <small> để làm cho văn bản của bạn in đậm, nghiêng, nhỏ, v.v., giống như cách bạn làm trong trang HTML đơn giản. Đây là một ví dụ:

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

Kết quả của ví dụ trên sẽ giống như sau:

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

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

Bạn cũng có thể biến đổi văn bản thành chữ thường, chữ hoa hoặc viết hoa.

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

Kết quả của ví dụ trên sẽ giống như sau:

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

Tô màu văn bản

Màu sắc là phương pháp mạnh mẽ để truyền tải thông tin quan trọng trong thiết kế trang web.

Bootstrap có một số lớp tiện ích nhấn mạnh có thể được sử dụng cho mục đích này như hiển thị thông báo thành công bằng màu xanh lá cây, cảnh báo hoặc thông báo lỗi có màu đỏ, v.v.

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

Kết quả của ví dụ trên sẽ giống như sau:

Tô màu văn bản trong Bootstrap

Tạo phong cách trích dẫn

Bạn cũng có thể tạo ra phong cách đẹp mắt cho các trích dẫn (blockquotes) của mình - Chỉ cần định nghĩa các trích dẫn bằng cách sử dụng phần tử <blockquote> chuẩn và style sheet của bootstrap sẽ thực hiện phần còn lại.

<blockquote class="blockquote">
    <p>Imagination is more important than knowledge.</p>
</blockquote>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo phong cách Blockquotes trong Boostrap

Khi cung cấp thuộc tính, hãy bao bọc phần tử <blockquote> của bạn trong một phần tử <figure> và sử dụng một phần tử <figcaption> hoặc một phần tử khối (ví dụ <p>:) với lớp .blockquote-footer, như sau:

<figure>
    <blockquote class="blockquote">
        <p>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>
    </blockquote>
    <figcaption class="blockquote-footer">by <cite>Albert Einstein</cite></figcaption>
</figure>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo phong cách Blockquotes trong Boostrap

Bạn cũng có thể căn chỉnh các khối trích dẫn ở bên phải hoặc chính giữa bằng cách chỉ cần áp dụng các lớp căn chỉnh văn bản .text-end hoặc .text-center trên phần tử <blockquote> hoặc <figure>.

Cắt bớt văn bản dài

Đối với văn bản dài hơn, bạn có thể sử dụng lớp .text-truncate để cắt ngắn văn bản bằng dấu chấm lửng. Giá trị thuộc tính display của phần tử phải là inline-block hoặc block.

Nó đặc biệt hữu ích trong trường hợp bạn muốn hiển thị một đoạn văn bản trong một dòng duy nhất nhưng không có đủ dung lượng. Hãy thử một ví dụ và xem nó hoạt động như thế nào:

<!-- Block level element -->
<div class="row">
    <div class="col-2 text-truncate">
        The quick brown fox jumps over the lazy dog.
    </div>
</div>

<!-- Inline level element -->
<span class="d-inline-block text-truncate" style="max-width: 100px;">
    The quick brown fox jumps over the lazy dog.
</span>

Bọc văn bản và phần tràn

Bạn có thể sử dụng lớp .text-wrap để bọc văn bản trong một phần tử bằng cách ghi đè thuộc tính white-space của nó nếu nó được đặt thành pre hoặc nowrap, chẳng hạn như các thành phần badge của Bootstrap .

Tương tự, bạn có thể sử dụng lớp .text-nowrap để ngăn văn bản nằm trong một phần tử.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="badge bg-primary text-wrap" style="width: 6rem;">
    This text will wrap.
</div>
<div class="bg-warning text-nowrap" style="width: 6rem;">
    This text will overflow the element's box.
</div>

Bọc từ dài

Bạn có thể sử dụng lớp .text-break để ngăn từ dài làm hỏng bố cục của bạn.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="row">
    <div class="col-2">
        <p class="text-break">veryveryveryveryveryveryverylongword</p>
    </div>
</div>
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.