Buzz
Trong phần này, chúng ta sẽ tìm hiểu về chữ việt, kiểu và định dạng văn bản trong Bootstrap.
Khám Phá Chữ Việt Trong Bootstrap
1. Đối Mặt với Heading
Chúng ta có thể xác định tất cả các thẻ heading HTML từ h1 đến h6 tương tự như cách xác định các thẻ này trong tài liệu HTML đơn giản. Trong trường hợp nếu muốn áp dụng các style của phần tử giống style của heading, chúng ta có thể sử dụng các lớp heading .h1 đến .h6 trên các phần tử khác nhau.
Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các thẻ heading HTML từ h1 đến h6:
Kết quả trả về có dạng như dưới đây:
1.1. Điều Chỉnh Heading
Hơn nữa, ta có khả năng sử dụng thẻ small với lớp .text-muted để thể hiện văn bản thứ cấp của heading trong các biến thể nhỏ hơn.
Ví dụ: trong ví dụ này, chúng ta sử dụng thẻ small với lớp .text-muted để biểu diễn văn bản thứ cấp của heading:
Kết quả trả về có dạng như bên dưới:
1.2. Hiển Thị Heading
Trong Bootstrap 4, chúng ta có thêm tính năng display heading, được dùng để làm nổi bật một tiêu đề (heading).
Ví dụ: trong ví dụ dưới đây, có 4 tiêu đề hiển thị theo cách khác nhau:
Kết quả trả về sẽ có dạng như bên dưới:
2. Điều Chỉnh Đoạn Văn Bản trong Bootstrap
Kích thước font chữ mặc định trong Bootstrap là 1rem (tương đương 16px), và chiều cao giữa các dòng là 1.5. Những thông số này được áp dụng cho thẻ body và tất cả các đoạn văn bản.
Ngoài ra, khoảng cách dưới là bằng 1/2 chiều cao giữa các dòng (mặc định là 10px) được áp dụng cho tất cả các đoạn văn bản, nghĩa là cho các phần tử p.
Để làm cho đoạn văn bản nổi bật, chúng ta thêm lớp .lead vào đó.
Ví dụ: Trong ví dụ dưới đây, chúng ta thêm lớp .lead để làm nổi bật đoạn văn bản:
Kết quả trả về có dạng như sau:
Mẹo: Trong CSS, rem viết tắt của 'root em'. 1rem tương đương kích thước font chữ của phần tử gốc (html) là 16px trong hầu hết các trình duyệt theo mặc định.
Để căn chỉnh văn bản sang trái, phải và chính giữa trong một đoạn, chúng ta sử dụng các lớp căn chỉnh văn bản.
Ví dụ: Trong ví dụ dưới đây, chúng ta sử dụng các lớp căn chỉnh để căn chỉnh văn bản sang trái, phải và chính giữa:
Kết quả trả về có dạng như sau:
Ngoài ra, chúng ta có thể căn chỉnh văn bản dựa trên kích thước màn hình thiết bị bằng cách sử dụng các lớp căn chỉnh văn bản đáp ứng. Các lớp này sử dụng các breakpoint làm hệ thống lưới (grid system).
Tham khảo ví dụ dưới đây, trong ví dụ này chúng ta sử dụng các lớp căn chỉnh văn bản đáp ứng:
Kết quả hiển thị như sau:
3. Định dạng văn bản
Chúng ta có thể sử dụng các thẻ định dạng văn bản như thẻ strong, i, small để làm nổi bật văn bản, in đậm, in nghiêng, ... tương tự như cách chúng ta thường thực hiện trong văn bản HTML thông thường.
Ví dụ: Trong ví dụ dưới đây, chúng ta sử dụng các thẻ định dạng văn bản để làm nổi bật văn bản:
Kết quả xuất hiện như sau:
3.1. Biến đổi văn bản
Chúng ta cũng có thể thay đổi văn bản thành chữ thường, chữ hoa hoặc viết hoa.
Xem ví dụ dưới đây:
Kết quả xuất hiện như sau:
3.2. Màu sắc văn bản
Bootstrap tích hợp nhiều công cụ để hiển thị văn bản với các màu sắc đa dạng, như thông báo lỗi hay thông báo thành công, ... .
Ví dụ: dưới đây là cách sử dụng màu sắc khác nhau cho các đoạn văn bản:
Kết quả xuất hiện như sau:
4. Định dạng trích dẫn
Để định dạng các trích dẫn, ta chỉ cần sử dụng phần tử blockquote và Bootstrap sẽ tự thêm các kiểu dáng cần thiết.
Bên cạnh đó, để chỉ định nguồn, có thể thêm phần tử footer với lớp .blockquote-footer và bọc tên nguồn trong thẻ cite, như minh họa dưới đây:
Kết quả hiển thị như sau:
Để canh chỉnh trích dẫn về bên phải hoặc giữa, bạn chỉ cần sử dụng các lớp canh chỉnh văn bản như .text-right hoặc .text-center trong phần tử blockquote.
Trong bài học này, Mytour đã giới thiệu về Typography trong Bootstrap. Trong bài học tiếp theo, Mytour sẽ hướng dẫn chi tiết về cách tạo bảng trong Bootstrap.
