Chúng ta sẽ "chơi" với những "con chữ" trong phần này.
Trước hết, để "xôm tụ" chúng ta thêm 4 cột nữa vào hàng dưới của mã HTML trong phần trước. Lưu ý:<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
Vì có 4 cột trên một hàng nên khi xem trên màn hình lớn, mỗi cột sẽ nhóm từ 3 cột col-lg-3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ví dụ Bootstrap 5 Grid System </h1>
<div class="row pb-2">
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title">Column 1</h5>
<p class="card-text">Nội dung nằm trong cột 1.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title">Column 2</h5>
<p class="card-text">Nội dung nằm trong cột 2.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title ">Column 3</h5>
<p class="card-text ">Nội dung nằm trong cột 3.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title">Column 4</h5>
<p class="card-text">Nội dung nằm trong cột 4.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title">Column 5</h5>
<p class="card-text">Nội dung nằm trong cột 5.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title ">Column 6</h5>
<p class="card-text ">Nội dung nằm trong cột 6.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title ">Column 7</h5>
<p class="card-text ">Nội dung nằm trong cột 7.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Vẫn sử dụng OnlineGDB, chúng ta thực thi và resize lại trình duyệt cho đến khi thấy tương tự như sau:
Với sự trợ giúp của Bootstrap, trang web dù xem trên màn hình nào với độ phân giải ra sao vẫn khá rõ ràng.
Bây giờ chúng ta chuyển qua "xào nấu" Text.
Bootstrap 5 định dạng Heading HTML (<h1> đến <h6>) với độ đậm phông chữ đậm hơn và kích thước phông chữ phản hồi.
Bootstrap 5 Heading HTML (<h1> đến <h6>) được sử dụng để nổi bật hơn tiêu đề thông thường là .display-1 đến .display-6.
Chúng ta cần thử để thấy khác biệt, còn việc sử dụng cái nào là lựa chọn riêng của mỗi người.
- Row trên chúng ta sẽ thử với h1, h3 và h6
- Row dưới chúng ta sẽ thử với display-1, display-2, display-3, display-6
Đây là mã HTML sau khi đã thêm các class nói trên, chúng ta làm hơi...tào lao vì đặt trong thẻ <h5> đã có sẵn nhưng không sao miễn là vẫn chạy tốt là được!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ví dụ Bootstrap 5 Grid System </h1>
<div class="row pb-2">
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title h1">Column 1 sử dụng H1</h5>
<p class="card-text">Nội dung nằm trong cột 1.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title h3">Column 2 sử dụng H3</h5>
<p class="card-text">Nội dung nằm trong cột 2.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title h6">Column 3 sử dụng H6</h5>
<p class="card-text ">Nội dung nằm trong cột 3.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-1">Column 4 sử dụng display-1</h5>
<p class="card-text">Nội dung nằm trong cột 4.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title display-2">Column 5 sử dụng display-2</h5>
<p class="card-text">Nội dung nằm trong cột 5.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title display-3">Column 6 sử dụng display-3</h5>
<p class="card-text ">Nội dung nằm trong cột 6.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-6">Column 7 sử dụng display-6</h5>
<p class="card-text ">Nội dung nằm trong cột 7.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bấm Run để thực thi, đây là "thành quả"
Bootstrap 5 sẽ định dạng <mark> và .mark với màu nền vàng và thêm một chút padding xung quanh. Trong ví dụ này, chúng ta dùng thẻ <mark> trong cột 1 và .mark tức là mark class cho cột 2. Đây là mã HTML, trong những ví dụ sau, chúng ta sẽ thay đổi luôn một lần để tránh tình trạng lặp đi lặp lại mã HTML làm cho bài viết dài không cần thiết.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ví dụ Bootstrap 5 Grid System </h1>
<div class="row pb-2">
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title h1">Column 1 sử dụng H1</h5>
<p class="card-text">Nội dung nằm trong <mark>cột 1.</mark></p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title h3">Column 2 sử dụng H3</h5>
<p class="card-text mark">Nội dung nằm trong cột 2.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title h6">Column 3 sử dụng H6</h5>
<p class="card-text ">Nội dung nằm trong cột 3.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-1">Column 4 sử dụng display-1</h5>
<p class="card-text">Nội dung nằm trong cột 4.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title display-2">Column 5 sử dụng display-2</h5>
<p class="card-text">Nội dung nằm trong cột 5.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title display-3">Column 6 sử dụng display-3</h5>
<p class="card-text ">Nội dung nằm trong cột 6.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-6">Column 7 sử dụng display-6</h5>
<p class="card-text ">Nội dung nằm trong cột 7.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bấm Run để thực thi
Thêm mã sau vào trước thẻ </div> cuối cùng
<p><del>Sử dụng thẻ del để xóa một dòng chữ.</del></p>
<p><u>Sử dụng thẻ u để gạch dưới dòng chữ.</u></p>
<p><small>Sử dụng thẻ small để làm cỡ chữ nhỏ hơn</small></p>
<p><strong>Sử dụng thẻ strong để tô đậm dòng chữ.</strong></p>
<p><em>Sử dụng thẻ em để in nghiêng dòng chữ.</em></p>
Bấm Run để thực thi
Tiếp tục thêm mã sau ngay dưới mã trên
<p><abbr title="Tự học lập trình, học code online" class="initialism">Đât Việt Lập Trình</abbr></p>
<p class="text-center">Sử dụng text center</p>
<p class="text-end">Sử dụng text end</p>
Bấm Run để thực thi
Không có nhận xét nào:
Đăng nhận xét