Hướng dẫn font-weight bootstrap 4 - font-weight 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ữ.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).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 ( đến ) 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

  
h2 Bootstrap heading (2.5rem = 40px)
  
h2 Bootstrap heading (2rem = 32px)
  
h3 Bootstrap heading (1.75rem = 28px)
  
h4 Bootstrap heading (1.5rem = 24px)
  
h5 Bootstrap heading (1.25rem = 20px)
  
h6 Bootstrap heading (1rem = 16px)

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 

  
Display 1
  
Display 2
  
Display 3
  
Display 4

Thẻ small ())

Trong Bootstrap 4, phần tử HTML được sử dụng để tạo tiêu đề  phụ, font nhạt hơn trong bất kỳ tiêu đề nào:

Code:

  
h2 heading secondary text
  
h2 heading secondary text
  
h3 heading secondary text
  
h4 heading secondary text
  
h5 heading secondary text
  
h6 heading secondary text

Thẻ mark  ())

Phần tử mark dùng để đánh dấu văn bản với nền nhạt.

  
Đánh dấu văn bản 
    
  
Học Bootstrap 4 tại Hoc.tv nhé.

Thẻ

Bootstrap 4 sẽ tạo kiểu cho phần tử HTML với đường viền chấm ở dưới:

  
The WHO thành lập vào năm 1948.

Thẻ

Bootstrap 4 sẽ tạo kiểu cho phần tử HTML với đường viền chấm ở dưới:.blockquote vào

khi trích dẫn các khối nội dung từ một nguồn khác:

 
  

    
Sóng gợn tràng giang buồn điệp điệp

    Con thuyền khua mái nước song song.
    
  

Trong Bootstrap 4 chúng ta thêm lớp .blockquote vào khi trích dẫn các khối nội dung từ một nguồn khác:

Phần tử dl, dt dùng để liệt kê danh sách, xét ví dụ sau

 
  

    
Cà Phê
    
- Đồ uống đen nóng
    
Sữa
    
- Đồ uống trắng lạnh
  
     

Phần tử dl, dt dùng để liệt kê danh sách, xét ví dụ sau,

,  ... các bạn có thể tự mình trải nghiệm nhé.



Ngoài ra còn nhiều thẻ khác như , , ... 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
.font-weight-bold
Mô tả
.font-weight-bolder
Văn bản in đậm
.font-italic
Văn bản đậm hơn
.font-weight-light
Văn bản in nghiêng
.font-weight-lighter
Văn bản in nhạt
.font-weight-normal
Văn bản in nhạt hơn
.lead
Văn bản bình thường
.small
Làm cho một đoạn văn nổi bật




.text-left
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-break
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-center
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-decoration-none
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-right
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-justify
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-monospace




Cho biết văn bản được căn chỉnh
.text-nowrap
Văn bản liền mạch
.text-lowercase
Cho biết không có văn bản bao bọc
.text-reset
Cho biết văn bản viết thường
.text-uppercase
Đặ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-capitalize
Đặ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ó)
.initialism
Cho biết văn bản viết hoa
.list-unstyled
Hiển thị văn bản bên trong phần tử ở kích thước phông chữ nhỏ hơn một chút
.list-inline
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ả và ). 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)
.pre-scrollable
Đặ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ử )
Làm cho phần tử có thể cuộn được
Lời kết: đị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é !