Bootstrap - Album Demo
Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ nhảy vào thế giới thú vị của Bootstrap và tạo một album demo đẹp mắt. Là giáo viên khoa học máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua hành trình này từng bước một. 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 код này nhé!
Album là gì?
Trước khi chúng ta nhảy vào mã, hãy nói về album là gì trong ngữ cảnh thiết kế web. Hãy nghĩ về nó như một album ảnh kỹ thuật số, nhưng thay vì chỉ có ảnh, nó có thể trình bày nhiều loại nội dung khác nhau. Đây là một cách trình bày visually appealing để giới thiệu một bộ sưu tập các mục, bất kể chúng là sản phẩm, các-piece portfolio, hoặc thậm chí là bài viết blog.
Trong trường hợp của chúng ta, chúng ta sẽ tạo một lưới card responsive, mỗi card đại diện cho một mục trong album của chúng ta. Đó như việc sắp xếp một đống ảnh Polaroid trên bàn, nhưng chúng ta đang làm điều đó trên một trang web!
Thiết lập dự án của chúng ta
Bước 1: Cấu trúc HTML
Hãy bắt đầu bằng cách thiết lập cấu trúc HTML cơ bản cho album demo của chúng ta. Chúng ta sẽ sử dụng các tệp CSS và JavaScript của Bootstrap để cuộc sống dễ dàng hơn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung album của chúng ta sẽ ở đây -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Đây là nền tảng của chúng ta. Hãy nghĩ về nó như một canvas trống mà chúng ta sắp vẽ lên. Thẻ <link> mang vào các phong cách của Bootstrap, và thẻ <script> ở dưới cùng tải chức năng JavaScript của nó.
Tạo bố cục album
Bước 2: Thêm một tiêu đề
Hãy thêm một tiêu đề đơn giản vào album của chúng ta:
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Album Tuyệt Vời Của Tôi</strong>
</a>
</div>
</div>
</header>Điều này tạo ra một navbar tối ở trên cùng của trang. Nó như tiêu đề trang của album ảnh của chúng ta!
Bước 3: Vùng nội dung chính
Bây giờ, hãy thiết lập vùng nội dung chính nơi các mục album của chúng ta sẽ nằm:
<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Các mục album sẽ ở đây -->
</div>
</div>
</div>
</main>Cấu trúc này tạo ra một nền sáng cho album của chúng ta và thiết lập một lưới responsive. Nó như việc铺开 một trang album ảnh trống, sẵn sàng để chúng ta.fill với kỷ niệm!
Bước 4: Tạo các mục album
Bây giờ là phần thú vị - hãy thêm một số mục vào album của chúng ta:
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
<div class="card-body">
<p class="card-text">Đây là một card rộng hơn với văn bản hỗ trợ dưới đây như một dẫn vào tự nhiên cho nội dung bổ sung.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Xem</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Chỉnh sửa</button>
</div>
<small class="text-muted">9 phút</small>
</div>
</div>
</div>
</div>Mã này tạo ra một mục album duy nhất. Thẻ <svg> là một placeholder cho ảnh. Trong một dự án thực tế, bạn sẽ thay thế này bằng thẻ <img> chỉ đến ảnh thực tế của bạn.
Để tạo nhiều mục, chỉ cần sao chép và dán khối mã này nhiều lần trong thẻ row chúng ta đã tạo trước đó.
Cải thiện album của chúng ta
Bước 5: Thêm một footer
Hãy kết thúc album của chúng ta với một footer đơn giản:
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Trở lại đầu trang</a>
</p>
<p class="mb-1">Album mẫu là © Bootstrap, nhưng vui lòng tải xuống và tùy chỉnh nó cho riêng bạn!</p>
</div>
</footer>Điều này thêm một chi tiết đẹp vào cuối trang, đưa ra tín dụng nơi cần thiết và cung cấp một liên kết "Trở lại đầu trang" tiện lợi.
Kết hợp tất cả lại với nhau
Bây giờ chúng ta đã qua tất cả các thành phần, hãy xem file HTML hoàn chỉnh của chúng ta trông như thế nào:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Album Tuyệt Vời Của Tôi</strong>
</a>
</div>
</div>
</header>
<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Mục album 1 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
<div class="card-body">
<p class="card-text">Đây là một card rộng hơn với văn bản hỗ trợ dưới đây như một dẫn vào tự nhiên cho nội dung bổ sung.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Xem</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Chỉnh sửa</button>
</div>
<small class="text-muted">9 phút</small>
</div>
</div>
</div>
</div>
<!-- Lặp lại cấu trúc Mục album ở trên cho nhiều mục -->
</div>
</div>
</div>
</main>
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Trở lại đầu trang</a>
</p>
<p class="mb-1">Album mẫu là © Bootstrap, nhưng vui lòng tải xuống và tùy chỉnh nó cho riêng bạn!</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Kết luận
Và thế là chúng ta đã tạo ra một album demo đẹp mắt, responsive bằng Bootstrap. Nhớ rằng, đây chỉ là bắt đầu. Hãy thoải mái tùy chỉnh màu sắc, thêm ảnh của bạn và chơi với bố cục. Lập trình web là về thử nghiệm và sáng tạo!
Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi, "Thầy, tôi không bao giờ nghĩ rằng tôi có thể tạo ra điều gì đó chuyên nghiệp như vậy chỉ với HTML!" Đó là phép màu của các framework như Bootstrap - chúng cho bạn một bước khởi đầu, để bạn có thể tập trung vào nội dung và sáng tạo.
Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ với nó! Đến gặp lại, chúc các bạn lập mã vui vẻ!
Credits: Image by storyset