Trong bài viết này chúng ta sẽ tìm hiểu về các thiết lập mặc định về văn bản kiểu chữ trong Bootstrap 4. Đồng thời tìm hiểu về cách dùng các phần tử trong Bootstrap 4 để định nghĩa văn bản và kiểu chữ.
Thiết lập mặc định Bootstrap 4
Bootstrap 4 sử dụng font chữ có kích thước mặc định là 16px, với chiều cao dòng là 1.5. Kiểu chữ mặc định là “Helvetica Neue”, Helvetica, Arial, Sans-Serif. Thêm nữa, tất cả phần tử p đều có margin-top: 0 và có margin-bottom: 1rem (mặc định là 16px).
Các thẻ H1 - H6
Bootstrap 4 định kiểu các tiêu đề HTML (<h1> đến <h6>) với phông chữ đậm hơn và kích thước phông chữ tăng dần lên từ H6 cho đến H1
<div class="container"> <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> </div>
Tiêu đề Display
Tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường (kích thước phông chữ lớn hơn và độ đậm phông chữ nhạt hơn) và có bốn lớp để lựa chọn: .display-1, .display-2, .display-3, .display- 4
<div class="container"> <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> </div>
Thẻ small (<small>)
Trong Bootstrap 4, phần tử HTML <small> được sử dụng để tạo tiêu đề phụ, font nhạt hơn trong bất kỳ tiêu đề nào:
Code:
<div class="container"> <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> </div>
Thẻ mark (<mark>)
Phần tử mark dùng để đánh dấu văn bản với nền nhạt.
<div class="container"> <h1>Đánh dấu văn bản </h1> <p>Học Bootstrap 4 tại <mark>Hoc.tv</mark> nhé.</p> </div>
Thẻ <abbr>
Bootstrap 4 sẽ tạo kiểu cho phần tử <abbr> HTML với đường viền chấm ở dưới:
<div class="container"> <p>The <abbr title="World Health Organization">WHO</abbr> thành lập vào năm 1948.</p> </div>
Thẻ <blockquote>
Trong Bootstrap 4 chúng ta thêm lớp .blockquote vào <blockquote> khi trích dẫn các khối nội dung từ một nguồn khác:
<div class="container"> <blockquote class="blockquote"> <p>Sóng gợn tràng giang buồn điệp điệp<br> Con thuyền khua mái nước song song.</p> <footer class="blockquote-footer">Tràng giang- Huy Cận</footer> </blockquote>
<dl><dt>
Phần tử dl, dt dùng để liệt kê danh sách, xét ví dụ sau
<div class="container"> <dl> <dt>Cà Phê</dt> <dd>- Đồ uống đen nóng</dd> <dt>Sữa</dt> <dd>- Đồ uống trắng lạnh</dd> </dl> </div>
Ngoài ra còn nhiều thẻ khác như <code>, <pre>, <kbd> ... các bạn có thể tự mình trải nghiệm nhé.
Các lớp định kiểu chữ khác:
Các lớp Bootstrap 4 bên dưới có thể được thêm vào để tạo kiểu thêm cho các phần tử HTML:
Lời kết:
Học xong bài này chắc hẳn bạn đã biết cách định dạng văn bản, kiểu chữ bằng Bootstrap 4 rồi phải không nào. Bài tiếp theo chúng ta sẽ tìm hiểu về màu sắc trong Bootstrap 4 các bạn nhé !
