Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Sticky Footer Navbar Demo

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng nhau bắt đầu một hành trình thú vị để tạo một footer navbar dính ở dưới cùng của trang web sử dụng Bootstrap. Như một người giáo viên máy tính gần gũi, tôi sẽ hướng dẫn bạn từng bước qua quá trình này, đảm bảo bạn hiểu rõ từng đoạn mã chúng ta viết. Vậy hãy lấy một ly đồ uống yêu thích của bạn, ngồi舒适的 và cùng nhau bắt đầu nhé!

Bootstrap-Sticky footer navbar Demo

什么是 Sticky Footer Navbar?

Trước khi chúng ta bắt đầu viết mã, hãy hiểu rõ điều chúng ta muốn đạt được. Một sticky footer navbar là một thanh điều hướng nằm ở dưới cùng của trang, không matter bao nhiêu nội dung có trên trang hay bạn cuộn xuống bao xa. Nó giống như một người bạn trung thành luôn ở bên bạn trong mọi hoàn cảnh!

Tại sao sử dụng Sticky Footer Navbar?

  1. Nó cung cấp dễ dàng truy cập vào các liên kết hoặc hành động quan trọng.
  2. Nó tiết kiệm không gian màn hình, đặc biệt trên các thiết bị di động.
  3. Nó cải thiện trải nghiệm người dùng bằng cách giữ các tùy chọn điều hướng luôn hiển thị.

Bây giờ chúng ta đã biết chúng ta đang xây dựng cái gì và tại sao nó hữu ích, hãy cùng nhau bắt đầu với mã!

Thiết lập Cấu trúc HTML

Trước tiên, chúng ta cần thiết lập cấu trúc cơ bản của tài liệu HTML của mình. Đừng lo lắng nếu bạn mới làm quen với HTML; tôi sẽ giải thích từng phần khi chúng ta đi qua.

<!DOCTYPE html>
<html lang="vi" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Navbar Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Chúng ta sẽ thêm nội dung ở đây -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Hãy phân tích này:

  1. <!DOCTYPE html>: Điều này cho biết trình duyệt chúng ta đang sử dụng HTML5.
  2. <html lang="vi" class="h-100">: Element gốc của trang web chúng ta. Chúng ta đã thêm class h-100 để làm cho nó chiếm 100% chiều cao của viewport.
  3. Inside the <head> tag:
  • Chúng ta thiết lập mã ký tự và viewport.
  • Chúng ta đặt tiêu đề cho trang.
  • Chúng ta liên kết đến tệp CSS của Bootstrap.
  1. <body class="d-flex flex-column h-100">: Chúng ta sử dụng các class của Bootstrap để làm cho body là một container flex chiếm 100% chiều cao của viewport.
  2. Cuối cùng của <body>, chúng ta bao gồm tệp JavaScript của Bootstrap.

Tạo Header

Bây giờ, hãy thêm một header vào trang của chúng ta:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Thanh navbar cố định</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên kết</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Vô hiệu hóa</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Tìm kiếm" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Tìm kiếm</button>
</form>
</div>
</div>
</nav>
</header>

Mã này tạo ra một thanh điều hướng responsive dính ở trên cùng của trang. Nó bao gồm tên thương hiệu, các liên kết điều hướng và một biểu mẫu tìm kiếm. Thanh navbar sẽ thu gọn thành một menu hamburger trên các màn hình nhỏ hơn.

Thêm Nội dung Chính

Tiếp theo, hãy thêm một ít nội dung chính vào trang của chúng ta:

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer dính với navbar cố định</h1>
<p class="lead">Đính footer vào dưới cùng của viewport trong các trình duyệt desktop với HTML và CSS tùy chỉnh này.</p>
<p>Sử dụng <a href="#">footer dính với navbar cố định</a> nếu cần thiết.</p>
</div>
</main>

Class flex-shrink-0 trên <main> đảm bảo rằng nó không co lại khi không đủ không gian, đẩy footer xuống.

Tạo Footer Dính

Bây giờ đến phần nổi bật của chúng ta, footer dính:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Đặt nội dung footer dính ở đây.</span>
</div>
</footer>

Class mt-auto đẩy footer xuống dưới cùng của trang khi không có đủ nội dung để đầy viewport.

Thêm CSS Tùy Chỉnh

Để mọi thứ hoạt động hoàn hảo, chúng ta cần thêm một ít CSS tùy chỉnh. Thêm này vào trong thẻ <style> trong <head> của tài liệu của bạn:

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

CSS này thêm một ít padding vào trên cùng của nội dung chính (để ngăn nó bị che bởi navbar cố định) và đặt màu nền cho footer.

Kết Hợp Tất Cả

Dưới đây là mã hoàn chỉnh của chúng ta:

<!DOCTYPE html>
<html lang="vi" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Navbar Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Thanh navbar cố định</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên kết</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Vô hiệu hóa</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Tìm kiếm" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Tìm kiếm</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer dính với navbar cố định</h1>
<p class="lead">Đính footer vào dưới cùng của viewport trong các trình duyệt desktop với HTML và CSS tùy chỉnh này.</p>
<p>Sử dụng <a href="#">footer dính với navbar cố định</a> nếu cần thiết.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Đặt nội dung footer dính ở đây.</span>
</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 đã hoàn thành một trang web với một footer navbar dính sử dụng Bootstrap. Nhớ rằng, bí quyết để thành thạo lập trình web là thực hành và sự tò mò. Vậy đừng nản lòng nếu nó không hoàn hảo ở lần thử đầu tiên. Hãy tiếp tục thử nghiệm, và trước khi bạn biết, bạn sẽ thành thạo như một đầu bếp tài ba!

Dưới đây là tóm tắt nhanh những gì chúng ta đã học:

Component Mục đích
Cấu trúc HTML Cung cấp cấu trúc cơ bản của trang web chúng ta
Bootstrap CSS Cung cấp các component và class tiện ích đã được style sẵn
CSS Tùy chỉnh Cho phép chúng ta tinh chỉnh giao diện của trang
Header Chứa thanh điều hướng của chúng ta
Nội dung Chính Giữ nội dung chính của trang
Footer Dính ở dưới cùng của trang, ngay cả khi nội dung ngắn
Bootstrap JS Kích hoạt các component tương tác như thanh điều hướng có thể gập lại

Nhớ rằng, chìa khóa để thành thạo lập trình web là thực hành và sự tò mò. Vậy hãy tiếp tục code, tiếp tục học, và quan trọng nhất, hãy vui vẻ! Đến gặp lại các bạn vào lần sau, chúc các bạn may mắn!

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Bảng Điều Khiển Bootstrap
Hướng Dẫn Tiếp Theo:
Demo Bootstrap-Masonry