Bài 4: Văn bản trong Boostrap 4 (Text/Typography)

0
646

Xin chào các bạn, bài số 4 hôm nay, mình sẽ giới thiệu với các bạn 1 số class mẫu tiếp theo trong Bootstrap để các bạn có thể trang trí thêm cho phần văn bản trên website thêm đẹp và nhiều kiểu dáng hơn nhé.

Thiết lập mặc định văn bản thẻ <p> trong Bootstrap 4

Bootstrap 4 quy định sử dụng font chữ mặc định trên website có kích thước font-size 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. Tất cả các phần tử <p> đều có margin-top: 0margin-bottom: 1rem (1rem = 16px).

Các thẻ Heading H1 đến H6

Bootstrap 4 quy định cho các thẻ tiêu đề (từ H1 đến H6) như sau:

Tiêu đề display

Các tiêu đề display mở rộng tính phong phú cho các tiêu đề thông thường với font chữ lớn hơn và có độ đậm font chữ hơn.

Có 4 class display để lập trình viên có thể lựa chọn, như sau:

Các phần tử HTML định dạng trong Bootstrap

Thẻ <small>

Trong Bootstrap 4, phần tử <small> dùng để tạo bất cứ tiêu đề phụ với font nhạt hơn. Bạn có thể xem ví dụ sau để cảm nhận sự thay đổi.

Phần tử <mark>

Phần tử mark dùng để đánh dấu văn bản với nền nhạt, giống kiểu highlight cho phần cần đánh dấu.

Ví dụ:

Phần tử <abbr>

Phần tử <abbr> dùng để định nghĩa cụm từ viết tắt với đường gạch chân chấm.

Phần tử 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 đó.

Trong Bootstrap 4 quy định CSS như sau:

Ví dụ:

Phần tử dl, dt

Hai phần tử này dùng để liệt kê danh sách.

Bootstrap 4 quy định CSS như sau:

Ví dụ:

Ngoài ra còn có phần tử kbdpre dùng để định dạng văn bản mà bạn có thể tự tìm hiểu thêm. Bootstrap 4 quy định như sau:

Các class định nghĩa văn bản

Bootstrap 4 chứa một số class mẫu khác dùng để định nghĩa văn bản sau đây.

  • .font-weight-bold: in đậm
  • .font-italic: in nghiêng
  • .font-weight-light: in nhạt
  • .font-weight-normal: in bình thường
  • .lead: làm văn bản nổi bật
  • .small: chữ nhỏ (85% bình thường)
  • .text-left, .text-center:, .text-right canh trái, canh giữa, canh phải
  • .text-*-left, .text-*-center, .text-*-right: canh trái, canh giữa, canh phải tùy theo màn hình small, medium, large hay xlarge.
  • .text-monospace: văn bản khoảng trống đơn
  • .text-nowrap: văn bản không bao
  • .text-lowercase, .text-uppercase, .text-capitalize: văn bản thường, văn bản hoa chữ đầu, văn bản in hoa
  • .text-justify: canh đều

Rất nhiều đúng không nào, các bạn chỉ cần hiểu học Bootstrap là cách chúng ta học được thật nhiều class mẫu, nên có thời gian các bạn cố gắng tìm hiểu và áp dụng để nhớ nhé.

Kết luận

Bài học này giúp bạn tìm hiểu một số cách định dạng văn bản, kiểu chữ bằng Bootstrap 4 thông qua các ví dụ. Mời bạn theo dõi bài tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây