Văn bản (Text/Typography) trong Boostrap 4
Trong bài trước chúng ta đã học về Grid system của Bootstrap, trong bài này, chúng ta cùng đến tiếp với văn bản (text, typography) trong bootstrap 4
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: 0
và margin-bottom: 1rem
(1rem = 16px).
p {margin-top: 0;margin-bottom: 1rem;}
Các thẻ Heading H1 đến H6
Bootstrap 4 quy định cho các thẻ tiêu đề (từ H1 đến H6) như sau:
h1, .h1 {font-size: 2.5rem; /*40px*/}h2, .h2 {font-size: 2rem; /*32px*/}h3, .h3 {font-size: 1.75rem; /*28px*/}h4, .h4 {font-size: 1.5rem; /*24px*/}h5, .h5 {font-size: 1.25rem; /*20px*/}h6, .h6 {font-size: 1rem; /*16px*/}
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:
.display-1 {font-size: 6rem;font-weight: 300;line-height: 1.2;}.display-2 {font-size: 5.5rem;font-weight: 300;line-height: 1.2;}.display-3 {font-size: 4.5rem;font-weight: 300;line-height: 1.2;}.display-4 {font-size: 3.5rem;font-weight: 300;line-height: 1.2;}
Các phần tử HTML định dạng trong Bootstrap
Thẻ <small>
small,.small {font-size: 80%;font-weight: 400;}
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.
<html lang="en">
<head>
<title>Ví dụ Bootstrap 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
</body>
</html>
Phần tử <mark>
mark,.mark {padding: 0.2em;background-color: #fcf8e3;}
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ụ:
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Đánh dấu văn bản</h1>
<p>Đây là cách <mark>highlight</mark> văn bản phần quan trọng.</p>
</div>
</body>
</html>
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.
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Viết tắt</h1>
<p>Phần tử abbr dùng để đánh dấu từ viết tắt</p>
<p>Từ viết tắt <abbr title="World Health Organization">WHO</abbr> có nghĩa là Tổ chức Y tế Thế giới.</p>
</div>
</body>
</html>
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:
blockquote {margin: 0 0 1rem;}
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:
dl {margin-top: 0;margin-bottom: 1rem;}dt {font-weight: 700;}
Ví dụ:
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</body>
</html>
Ngoài ra còn có phần tử kbd và pre 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: căn đều
Riêng phần text và typography này có tương đối nhiều class, nên các bạn cần phải học được càng nhiều càng tốt để áp dụng vào công việc của mì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ụ. Chúng ta sẽ gặp lại nhau ở bài học tiếp theo trong series này.
- Posted by baobinhnet
- 2020-06-11 16:34:56