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.
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:
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:
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:
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:
Mẹo: Trong CSSremlà 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.
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:
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>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:
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:
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:
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:
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:
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>.
Đố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ạ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ạ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>Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
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.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
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.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.