Bootstrap - Cover Demo
Chào mừng các bạn đang theo học lập trình web! Hôm nay, chúng ta sẽ cùng nhau lặn vào thế giới thú vị của Bootstrap và khám phá một thành phần đẹp mắt叫做 "Cover." Như một người giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu lập trình này nhé!
Cover là gì?
Trước khi chúng ta nhảy vào mã, hãy cùng hiểu Cover là gì trong ngữ cảnh thiết kế web. Cover, thường được gọi là "hero section" hoặc "jumbotron," là một khu vực lớn, bắt mắt ở đỉnh trang web. Nó giống như bìa của một cuốn sách - được thiết kế để thu hút sự chú ý và cung cấp cho người truy cập cái nhìn nhanh về nội dung trang web của bạn.
Hãy tưởng tượng bạn đang bước vào một nhà hàng sang trọng. Điều đầu tiên bạn thấy là lối vào được trang trí đẹp mắt, tạo nên không khí cho bữa ăn của bạn. Đó chính xác là điều mà Cover làm cho trang web của bạn!
Thiết lập dự án của chúng ta
Để bắt đầu, chúng ta cần thiết lập dự án của mình với Bootstrap. Đừng lo lắng nếu bạn chưa từng làm điều này trước đây - tôi sẽ hướng dẫn bạn từng bước!
Bước 1: Tạo cấu trúc HTML
Đầu tiên, hãy tạo một tệp HTML cơ bản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Cover Tuyệt Vời Của Tôi</title>
<!-- Chúng ta sẽ thêm Bootstrap CSS ở đây -->
</head>
<body>
<!-- Cover của chúng ta sẽ ở đây -->
</body>
</html>Đây giống như việc thiết lập canvas trước khi chúng ta bắt đầu vẽ. Chúng ta đã tạo một tài liệu HTML trống với phần head và body.
Bước 2: Thêm Bootstrap CSS
Bây giờ, hãy thêm một chút魔法 Bootstrap! Thêm dòng này vào phần <head>:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">Dòng này liên kết đến tệp CSS của Bootstrap. Nó giống như việc cho trang web của chúng ta một tủ quần áo sang trọng để chọn!
Tạo Cover
Bây giờ chúng ta đã có nền tảng, hãy xây dựng cover của mình!
Bước 3: Thêm cấu trúc cover
Inside the <body> tag, add the following code:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
<a class="nav-link" href="#">Tính năng</a>
<a class="nav-link" href="#">Liên hệ</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Cover trang của bạn.</h1>
<p class="lead">Cover là mẫu một trang cho việc xây dựng các trang chủ đơn giản và đẹp mắt. Tải xuống, chỉnh sửa văn bản, và thêm ảnh nền toàn屏 của bạn để làm cho nó trở thành của riêng bạn.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Tìm hiểu thêm</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Mẫu Cover cho <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, bởi <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>Wow, đó là rất nhiều mã! Hãy phân tích nó:
- The outer
<div>tạo một容器 linh hoạt cho cover của chúng ta. - Inside, we have three main sections:
<header>,<main>, and<footer>. - The
<header>contains a title and navigation links. - The
<main>section has our main content - a title, description, and a button. - The
<footer>provides some credits (which you can customize).
Bước 4: Thêm một chút CSS tùy chỉnh
Để làm cho cover của chúng ta trông đẹp hơn, hãy thêm một chút CSS tùy chỉnh. Trong phần <head>, thêm:
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>This CSS does several things:
- Sets a maximum width for our cover
- Gives the body a dark background and white text
- Adds some subtle shadows for depth
- Styles our navigation links
Kết hợp tất cả lại
Bây giờ chúng ta đã có tất cả các mảnh, hãy xem cover đẹp của chúng ta trong hành động! Đây là mã hoàn chỉnh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Cover Tuyệt Vời Của Tôi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
<a class="nav-link" href="#">Tính năng</a>
<a class="nav-link" href="#">Liên hệ</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Cover trang của bạn.</h1>
<p class="lead">Cover là mẫu một trang cho việc xây dựng các trang chủ đơn giản và đẹp mắt. Tải xuống, chỉnh sửa văn bản, và thêm ảnh nền toàn屏 của bạn để làm cho nó trở thành của riêng bạn.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Tìm hiểu thêm</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Mẫu Cover cho <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, bởi <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>Kết luận
Chúc mừng! Bạn đã tạo trang Cover Bootstrap đầu tiên của mình. Có phải nó tuyệt vời không? Chỉ với một vài dòng HTML và CSS, chúng ta đã có thể tạo ra một thiết kế chuyên nghiệp như vậy.
Nhớ rằng, đây chỉ là bắt đầu. Hãy tự do thử nghiệm với các màu sắc khác nhau, thêm nội dung của bạn, hoặc thậm chí bao gồm một ảnh nền để làm cho nó thực sự trở thành của riêng bạn. Thế giới phát triển web đầy possibilities, và bạn vừa mới bước vào hành trình thú vị này!
Khi kết thúc, đây là bảng tóm tắt các lớp Bootstrap chính chúng ta đã sử dụng:
| Class | Purpose |
|---|---|
| cover-container | Tạo một container linh hoạt cho cover |
| d-flex | Áp dụng layout flexbox |
| w-100, h-100 | Đặt chiều rộng và chiều cao là 100% |
| p-3 | Thêm padding |
| mx-auto | Trung tâm container horizontially |
| flex-column | Đặt hướng flex thành column |
| mb-auto, mt-auto | Thêm margin vào trên hoặc dưới |
| nav-masthead | Lớp tùy chỉnh cho việc định dạng navigation |
| btn btn-lg btn-secondary | Định dạng nút |
Tiếp tục thực hành, 保持好奇心, và quan trọng nhất, hãy vui vẻ khi lập trình! Đến gặp lại lần sau, chúc bạn thành công trong thiết kế web!
Credits: Image by storyset