Chúng ta sẽ thử sử dụng Bootstrap để tạo một website đơn giản và upload lên web hosting.
Luôn lưu ý rằng mục đích của chúng ta là chia sẻ. Chúng ta sẽ không cố gắng tạo ra những website đẹp lung linh hay có cấu trúc phức tạp. Những chia sẻ nhằm mục đích giúp chúng ta hiểu hơn cách vận hành căn bản, hiểu hơn về các dòng lệnh, các thẻ HTML...Vì thực tế có hàng ngàn template miễn phí hay trả phí để chúng ta có thể tạo ra những website hoàn hảo. Nhưng nếu chúng ta nắm rõ những cái "căn bản" chúng ta sẽ dễ dàng Edit các template, dễ dàng khắc phục các sự cố...Chúng ta sẽ phác thảo trang homepage của website
Chúng ta sẽ tạm sử dụng Cách 2: Bao gồm Bootstrap từ CDN và thử trên OnlineGDB trước, sau đó sẽ upload lên 000webhost và chỉnh lại code sau. Lưu ý là link của cách 2 nói trên sử dụng cho Bootstrap 3, với Bootstrap 5 chúng ta sẽ sử dụng cấu trúc:
<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>
Chúng ta dự kiến sẽ tạo ra mấy vùng như sau:
1. Vùng màu xanh là Banner của webpage. Như phần trước đã thảo luận, chúng ta sẽ sử dụng "Fake" Jumbotron, tức là một dạng "hàng nhái" của Jumbotron. Lý do là Bootstrap 5 không còn hỗ trợ Jumbotron nữa.
2. Vùng màu đen sẽ là Menu. Chúng ta chưa đề cập đến cái này, cũng không có gì quá cao siêu. Thanh điều hướng chuẩn được tạo bằng lớp .navbar, theo sau là lớp thu gọn đáp ứng: .navbar-expand-xxl|xl|lg|md|sm
Để thêm liên kết bên trong thanh điều hướng, ta sử dụng phần tử <ul> (hoặc <div>) có class="navbar-nav". Sau đó, thêm phần tử <li> có lớp .nav-item theo sau là phần tử <a> có lớp .nav-link.
3.Hai vùng màu vàng sẽ là hai cột. Cột bên trái được nhóm từ 4 cột (4/12), cột bên phải được nhóm từ 8 cột (8/12)
4. Phần màu tím phía trong sẽ là các row.
Chúng ta sẽ viết code với những phác thảo căn bản như trên
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</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="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<p>Giới thiệu....</p>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>TIÊU ĐỀ 1</h2>
<p>Đây là bài viết về blah blah......</p>
<h2 class="mt-5">TIÊU ĐỀ 2</h2>
<p>Đây là bài viết về blah blah.......</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Bấm Run để thực thi
Chúng ta sẽ cần vài hình ảnh. Ta sẽ sử dụng img-fluid, cho phép chiều ngang của ảnh sẽ chiếm max-width: 100%; và height: auto; Có nghĩa là trong trường hợp của chúng ta, những ảnh chèn vào bên trái sẽ chiếm bề ngang là 4/12 và những ảnh chèn vào cột bên phải sẽ chiếm 8/12 bề ngang. Đây là mã HTML hiện tại
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình Bootstrap Website</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>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>Đất Việt Lập Trình Bootstrap Website</h1>
<p>Một website đơn giản sử dụng Bootstrap!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu</h2>
<div> <img class="img-fluid" src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Đất Việt Lập Trình"></div>
<p>Giới thiệu....</p>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>TIÊU ĐỀ 1</h2>
<div> <img class="img-fluid" src="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" alt="Đất Việt Lập Trình"></div>
<p>Đây là bài viết về blah blah......</p>
<h2 class="mt-5">TIÊU ĐỀ 2</h2>
<div> <img class="img-fluid" src="https://images.pexels.com/photos/417045/pexels-photo-417045.jpeg" alt="Đất Việt Lập Trình"></div>
<p>Đây là bài viết về blah blah.......</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>© Đất Việt Lập Trình</p>
</div>
</body>
</html>
Bấm Run để thực thi
Chúng ta đã tạm xong phần "khung" của trang Homepage.
Không có nhận xét nào:
Đăng nhận xét