Chân trang luôn ở dưới cùng Bootstrap 4
|
Để tạo chân trang ở cuối trang web Chúng tôi có thể cố định vị trí của nó ở cuối trang web để nếu bạn cuộn xuống trang web đó, bạn vẫn có thể xem chân trang từ bất kỳ vị trí nào trên trang. Để cố định chân trang ở cuối trang web, bạn có thể sử dụng vị trí. đã sửa. cú pháp #footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}Thí dụ. html
<footer class="bg-info text-center text-lg-start fixed-bottom"> <div class="container p-4"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> div> div> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2020 Copyright: <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.coma> div> footer>0 >
<footer class="bg-info text-center text-lg-start fixed-bottom"> <div class="container p-4"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> div> div> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2020 Copyright: <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.coma> div> footer>0 >
_______23____40____23____4
đầu ra.  CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này Để phần tử này ở vị trí cuối trang, bạn phải thêm <footer class="bg-info text-center text-lg-start fixed-bottom"> <div class="container p-4"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> div> div> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2020 Copyright: <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.coma> div> footer>54 vào lớp <footer class="bg-info text-center text-lg-start fixed-bottom"> <div class="container p-4"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> div> div> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2020 Copyright: <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.coma> div> footer>55 <footer class="bg-info text-center text-lg-start fixed-bottom"> <div class="container p-4"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase">Linksh5> <ul class="list-unstyled mb-0"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> <h5 class="text-uppercase mb-0">Linksh5> <ul class="list-unstyled"> <li> <a href="#!" class="text-dark">Link 1a> li> <li> <a href="#!" class="text-dark">Link 2a> li> <li> <a href="#!" class="text-dark">Link 3a> li> <li> <a href="#!" class="text-dark">Link 4a> li> ul> div> div> div> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2020 Copyright: <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.coma> div> footer> Thông tin thêm và mô tả chi tiết có thể được tìm thấy tại trang 📄Documentation |
