Văn bản/ kiểu chữ (Text/Typography) trong Bootstrap 4

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ử đề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ớp
Mô tả
.font-weight-bold
Văn bản in đậm
.font-weight-bolder
Văn bản đậm hơn
.font-italic
Văn bản in nghiêng
.font-weight-light
Văn bản in nhạt
.font-weight-lighter
Văn bản in nhạt hơn
.font-weight-normal
Văn bản bình thường
.lead
Làm cho một đoạn văn nổi bật
.small
Cho biết văn bản nhỏ hơn (được đặt thành 80% kích thước của văn bản gốc)
.text-left
Cho biết văn bản căn trái
.text-*-left
Cho biết văn bản căn trái trên màn hình nhỏ, vừa, lớn hoặc phóng to
.text-break
Ngăn văn bản dài bị vỡ bố cục
.text-center
Cho biết văn bản được căn giữa
.text-*-center
Cho biết văn bản được căn giữa trên màn hình nhỏ, vừa, lớn hoặc phóng to
.text-decoration-none
Xóa gạch chân khỏi một liên kết
.text-right
Cho biết văn bản căn phải
.text-*-right
Cho biết văn bản được căn phải trên màn hình nhỏ, vừa, lớn hoặc phóng to
.text-justify
Cho biết văn bản được căn chỉnh
.text-monospace
Văn bản liền mạch
.text-nowrap
Cho biết không có văn bản bao bọc
.text-lowercase
Cho biết văn bản viết thường
.text-reset
Đặt lại màu của văn bản hoặc liên kết (kế thừa màu từ màu gốc của nó)
.text-uppercase
Cho biết văn bản viết hoa
.text-capitalize
Cho biết văn bản viết hoa
.initialism
Hiển thị văn bản bên trong phần tử <abbr> ở kích thước phông chữ nhỏ hơn một chút
.list-unstyled
Loại bỏ kiểu danh sách mặc định và lề trái trên các mục danh sách (hoạt động trên cả <ul> và <ol>). Lớp này chỉ áp dụng cho các mục danh sách con ngay lập tức (để xóa kiểu danh sách mặc định khỏi bất kỳ danh sách lồng nhau nào, hãy áp dụng lớp này cho mọi danh sách lồng nhau)
.list-inline
Đặt tất cả các mục danh sách trên một dòng (được sử dụng cùng với .list-inline-item trên mỗi phần tử <li>)
.pre-scrollable
Làm cho phần tử <pre> có thể cuộn được


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

Bình luận