Nội dung bài viết
Giới thiệu nội dung bài viết
Cũng tương tự như các ngôn ngữ lập trình khác trong lập trình web, ngôn ngữ Bootstrap cũng có những thuộc tính để thiết lập cho các phần tử trong web.lập trình web, ngôn ngữ Bootstrap cũng có những thuộc tính để thiết lập cho các phần tử trong web.
Trong phạm vi bài viết này, anh sẽ chia sẻ với các bạn về thuộc tính Typography được sử dụng trong lập trình web Bootstrap. Bài viết lần lượt giới thiệu về các thẻ Heading, những mặc định có sẵn trong Bootstrap 4, và các thẻ small, mark, abbr, blockquote, dl được sử dụng trong Bootstrap 4. Trong mỗi phần anh có kèm theo hình ảnh minh hoạ cách làm cho mỗi phần để các bạn tham khảo thêm và dễ nắm bắt với những kiến thức anh chia sẻ trong bài.Typography được sử dụng trong lập trình web Bootstrap. Bài viết lần lượt giới
thiệu về các thẻ Heading, những mặc định có sẵn trong Bootstrap 4, và các thẻ small, mark, abbr, blockquote, dl được sử dụng trong Bootstrap 4. Trong mỗi phần anh có kèm theo hình ảnh minh hoạ cách làm cho mỗi phần để các bạn tham khảo thêm và dễ nắm bắt với những kiến thức anh chia sẻ trong bài.
1. Mặc định có sẵn trong Bootstrap 4
Bootstrap 4 sử dụng kích thước font-size là 16px và line-height là 1.5. Font mặc định được sử dụng trong bootstrap 4 là Helvetica Neue. Các thẻ đều có margin top là bằng 0 và margin bottom là 16 px.
2. Các thẻ Heading trong Bootstrap 4
Các thẻ Heading từ H1 đến H6 có kích thước border và font như sau.
1
2
3
4
5
6
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]
Để hiển thị font có kích thước to, chúng ta sử dụng class display sau đó là kích thước. Bootstrap cung cấp 4 loại class để hiển thị kích thước font như sau:
1
2
3
4
Display 1
Display 2
Display 3
Display 4
3. Thẻ small trong Bootstrap 4
1
2
3
4
5
6
7
8
9
10
Lighter, Secondary Text
The small element is used to create a lighter, secondary text in any heading:
h2 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
4. Thẻ mark trong Bootstrap 4
Dùng để highlight các chữ text lên màu vàng. Nếu chúng ta muốn sử dụng chức năng highlight.
1
2
3
4
Display 1
Display 2
Display 3
Display 4
3. Thẻ small trong Bootstrap 4
1
2
3
4
5
6
7
8
9
10
Lighter, Secondary Text
The small element is used to create a lighter, secondary text in any heading:
h2 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
4. Thẻ mark trong Bootstrap 4 Dùng để highlight các chữ text lên màu vàng. Nếu chúng ta muốn sử dụng chức năng highlight.
Highlight Text
Use the mark element to highlight text.
5. Thẻ abbr trong Bootstrap 4Dùng để gạch dưới các từ mà mình mong muốn. 1
2
3
4
5
1
2
3
4
5
6
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]
Để hiển thị font có kích thước to, chúng ta sử dụng class display sau đó là kích thước. Bootstrap cung cấp 4 loại class để hiển thị kích thước font như sau:
1
2
3
4
Display 1
Display 2
Display 3
Display 4
3. Thẻ small trong Bootstrap 4 1
2
3
4
5
6
7
8
9
10
Lighter, Secondary Text
The small element is used to create a lighter, secondary text in any heading:
h2 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
4. Thẻ mark trong Bootstrap 4
Dùng để highlight các chữ text lên màu vàng. Nếu chúng ta muốn sử dụng chức năng highlight.
Chủ Đề