Văn bản trong Bootstrap 4

Văn bản trong Bootstrap 4

Bài viết này sẽ giới thiệu về Văn bản trong Bootstrap 4, một số lớp hay dùng và cách sử dụng trong framework này.

Thiết lập mặc định Bootstrap 4

Bootstrap 4 dùng font chữ có kích thước mặc định (font-size) là 16px, với chiều cao dòng (line-height) là 1.5.

Kiểu chữ mặc định (font-family) là “Helvetica Neue”, Helvetica, Arial, sans-serif.

Thêm nữa, tất cả phần tử <p> đều có margin-top: 0 và margin-bottom: 1rem  (mặc định là 16px).

Các thẻ <h1> – <h6>

Phong cách Bootstrap 4 cho các thẻ tiêu đề (từ h1 đến h6) sẽ có chữ đậm và tăng dần kích thước:

Van ban trong Bootstrap 4 1

Tiêu đề Display

Tiêu đề Display được sử dụng làm nổi bật hơn so với các tiêu đề bình thường (cỡ chữ lớn hơn và độ dày nhỏ hơn) và có 4 class để chọn: .display-1, .display-2, .display-3, .display-4.

Van ban trong Bootstrap 4 2

<small>

Trong Bootstrap 4, phần tử HTML <small> được sử dụng để tạo bất cứ tiêu đề phụ với font nhạt hơn.

Van ban trong Bootstrap 4 3

<mark>

Trong Bootstrap 4, phần tử HTML <mark> được sử dụng để đánh dấu văn bản với màu vàng nhạt và một ít padding.

Van ban trong Bootstrap 4 4

<abbr>

Trong Bootstrap 4, phần tử HTML <abbr> được sử dụng để đường gạch chân chấm.

Van ban trong Bootstrap 4 5

<blockquote>

Phần tử này dùng để tạo 1 đoạn trích dẫn nội dung từ một nguồn nào đó.

Van ban trong Bootstrap 4 6

<dl/dt>

Hai phần tử này dùng để liệt kê danh sách, các bạn có thể xem ví dụ dưới đây.

Van ban trong Bootstrap 4 7

<code>

Bootstrap 4 sẽ định dạng phần tử HTML <code> theo cách dưới đây:

Van ban trong Bootstrap 4 8

<kdb>

Bootstrap 4 sẽ định dạng phần tử HTML <kdb> theo cách dưới đây:

Van ban trong Bootstrap 4 9

Ngoài ra, Bootstrap 4 còn một số lớp khác để định dạng phần tử HTML, bạn hãy xem thêm nó ở thư viện của framework này nhé!

Kết luận

Qua đây là một số chia sẻ về Bootstrap, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về Bootstrap.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CodeGym Full-stack

Leave a Reply

Your email address will not be published. Required fields are marked *