Bootstrap - Footers 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 khám phá thế giới tuyệt vời của các footer Bootstrap. Là một giáo viên khoa học 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. Nào, hãy lấy饮料 yêu thích của bạn, thư giãn và bắt đầu nào!

Footer là gì?

Trước khi chúng ta nhảy vào các chi tiết cụ thể của Bootstrap, hãy bắt đầu với những điều cơ bản. Hãy tưởng tượng bạn đang đọc một cuốn sách. Thường thì bạn sẽ tìm thấy gì ở cuối mỗi trang? Đúng rồi - số trang, đôi khi là tiêu đề chương hoặc những thông tin hữu ích khác. Well, trong thế giới kỹ thuật số, chúng ta có một thứ tương tự cho các trang web, và chúng ta gọi nó là footer!

Footer là một phần ở dưới cùng của trang web chứa các thông tin như:

Thông báo bản quyền
Thông tin liên hệ
Liên kết đến các trang quan trọng
Biểu tượng mạng xã hội
Menu điều hướng nhanh
Liên kết điều khoản sử dụng hoặc chính sách bảo mật

Hãy nghĩ về nó như một lời chào thân thiện ở cuối trang web của bạn, cung cấp cho người truy cập những thông tin hữu ích trước khi họ rời đi hoặc điều hướng đến một phần khác của trang web.

Tại sao sử dụng Bootstrap cho footer?

Bây giờ, bạn có thể tự hỏi, "Tại sao tôi nên sử dụng Bootstrap cho footer?" Well, các học sinh ham học của tôi, Bootstrap giống như một bộ công cụ siêu anh hùng cho các nhà phát triển web. Nó cung cấp các thành phần và phong cách được xây dựng sẵn giúp tạo ra các yếu tố web phản hồi và hấp dẫn một cách dễ dàng. Khi nói đến footer, Bootstrap cung cấp:

Thiết kế phản hồi sẵn có
Phong cách nhất quán trên các trình duyệt khác nhau
Hệ thống lưới dễ sử dụng cho bố cục
Các thành phần được thiết kế sẵn để bạn tùy chỉnh

Hãy c rolled up our sleeves và xem chúng ta có thể tạo ra những footer tuyệt vời như thế nào với Bootstrap!

Footer Cơ Bản Bootstrap

Hãy bắt đầu với một footer đơn giản. Dưới đây là một ví dụ mã:

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Nội dung Footer</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Liên Kết</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Liên Kết 1</a></li>
<li><a href="#!" class="text-dark">Liên Kết 2</a></li>
<li><a href="#!" class="text-dark">Liên Kết 3</a></li>
<li><a href="#!" class="text-dark">Liên Kết 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Liên Kết</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">Liên Kết 1</a></li>
<li><a href="#!" class="text-dark">Liên Kết 2</a></li>
<li><a href="#!" class="text-dark">Liên Kết 3</a></li>
<li><a href="#!" class="text-dark">Liên Kết 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Bản quyền:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Giải thích:

Chúng ta bắt đầu với thẻ <footer> và thêm một số lớp Bootstrap để định dạng.
Bên trong, chúng ta có một container với các hàng và cột (hệ thống lưới của Bootstrap).
Chúng ta đã chia footer thành ba phần: nội dung chính và hai cột liên kết.
Ở cuối cùng, chúng ta có một thông báo bản quyền.

Phép màu của các lớp Bootstrap làm cho điều này phản hồi, có nghĩa là nó sẽ trông tốt trên cả máy tính để bàn và thiết bị di động!

Footer Dính

Đôi khi, bạn muốn footer dính ở dưới cùng của trang, đặc biệt khi không có đủ nội dung để đẩy nó xuống. Dưới đây là cách bạn có thể tạo một footer dính:

<body class="d-flex flex-column min-vh-100">
<!-- Nội dung chính của bạn ở đây -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer dính</h1>
<p class="lead">Đính footer vào dưới cùng của khung nhìn trong các trình duyệt máy tính để bàn với HTML và CSS tùy chỉnh này.</p>
</div>
</main>

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

Trong ví dụ này:

Chúng ta sử dụng flexbox để đảm bảo footer ở dưới cùng.
Lớp min-vh-100 đảm bảo rằng thân của trang chiếm ít nhất toàn bộ chiều cao của khung nhìn.
Lớp mt-auto trên footer đẩy nó xuống dưới cùng.

Footer với Biểu Tượng Mạng Xã Hội

Hãy làm cho footer thú vị hơn với một số biểu tượng mạng xã hội! Dưới đây là một ví dụ:

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Bản quyền:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Footer này:

Sử dụng nền tối với chữ trắng để tạo độ tương phản.
Bao gồm các biểu tượng mạng xã hội dưới dạng nút.
Sử dụng Font Awesome để biểu tượng (đảm bảo bao gồm thư viện Font Awesome).

Kết Luận

Và thế là bạn đã có, các học sinh tuyệt vời của tôi! Chúng ta đã khám phá thế giới của footer Bootstrap, từ đơn giản đến dính và xã hội. Nhớ rằng, footer giống như quả cherry trên cima của sundae trang web của bạn - nó có thể ở dưới cùng, nhưng nó có thể thực sự làm cho trang web của bạn sáng lên!

Khi bạn tiếp tục hành trình phát triển web của mình, đừng ngại thử nghiệm với các phong cách footer khác nhau. Kết hợp các yếu tố, chơi với màu sắc, và quan trọng nhất, hãy vui vẻ với nó!

Dưới đây là bảng tóm tắt các lớp Bootstrap chính chúng ta đã sử dụng:

Lớp	Mục Đích
bg-light	Màu nền sáng
bg-dark	Màu nền tối
text-center	Canh giữa văn bản
container	Tạo một container có độ rộng cố định phản hồi
row	Tạo một hàng cho hệ thống lưới
col-lg-6, col-md-12, v.v.	Định nghĩa độ rộng cột cho các kích thước màn hình khác nhau
list-unstyled	Loại bỏ phong cách mặc định của danh sách
mt-auto	Thêm margin-top: auto
py-3	Thêm padding ở trên và dưới
btn	Tạo một nút
btn-outline-light	Tạo một nút có viền sáng

Tiếp tục mã hóa, tiếp tục học hỏi, và nhớ - trong thế giới phát triển web, footer chỉ là bắt đầu!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Demo Đầu trang

Hướng Dẫn Tiếp Theo:

Bootstrap - Demo Anh Hùng