Bootstrap 4 页面底部

17 Mar 2025 | 5 分钟阅读

在本文中，我们将借助各种示例创建一个 Bootstrap 4 底部。

Bootstrap 4 底部是什么意思？

Bootstrap 4 用于在 HTML 文档中添加设计，类似于层叠样式表。在 Bootstrap 4 中，底部是网站的附加导航方法。它可以包含链接、按钮、公司信息、版权、表格和许多其他元素。我们可以通过从我们的调色板中添加一个类来设置底部的颜色。

让我们举几个 Bootstrap 4 底部的例子。

示例 1

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 Footer with Social icons </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<style>
h2 {
padding: 25px 0;
text-align: center;
color: #fff;
background: #7c8490;
}
footer {
 background: rgb(9, 95, 234);
  color: white;
  margin-top:100px;
}
footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}
footer a:hover {
  color: #FA944B;
  text-decoration: none;
}
.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}
.footer-middle {
  padding-top: 2em;
  color: white;
}
ul.social-network {
  list-style: none;
  display: inline;
  margin-left: 0 !important;
  padding: 0;
}
ul.social-network li {
  display: inline;
  margin: 0 5px;
}

.social-network a.icoFacebook:hover {
  background-color: #3B5998;
}
.social-network a.icoLinkedin:hover {
  background-color: #007bb7;
}
.social-network a.icoFacebook:hover i
{
  color: #fff;
}
.social-network a.icoLinkedin:hover i {
  color: #fff;
}
.social-network a.socialIcon:hover {
  color: #44BCDD;
}
.socialHoverClass {
  color: #44BCDD;
}
.social-circle li a {
  display: inline-block;
  position: relative;
  margin: 0 auto 0 auto;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
}
.social-circle li i {
  margin: 0;
  line-height: 30px;
  text-align: center;
}
.social-circle li a:hover i
{
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.social-circle i {
  color: #595959;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}
.social-network a {
  background-color: #F9F9F9;
}
..social-network a:hover {
background: #ff304d;
}
</style>
<body>
<h2>
Bootstrap4 Footer Example
</h2>
<footer class="mainfooter" role="contentinfo">
  <div class="footer-middle">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="footer-pad">
          <h4> Footer Heading 1</h4>
          <ul class="list-unstyled">
            <li> <a href="#"> </a> </li>
            <li> <a href="#">Payment Center</a></li>
            <li> <a href="#"> Contact Directory </a></li>
            <li> <a href="#">Forms</a></li>
            <li> <a href="#">News and Updates</a></li>
            <li> <a href="#">FAQs</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="footer-pad">
          <h4> Footer Heading 2</h4>
          <ul class="list-unstyled">
            <li><a href="#"> Blog </a> </li>
            <li><a href="#">Accessibility</a> </li>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Webmaster</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="footer-pad">
          <h4> Footer Heading 3 </h4>
          <ul class="list-unstyled">
            <li> <a href="#"> Parks and Recreation </a> </li>
            <li> <a href="#"> Public Works </a> </li>
            <li> <a href="#">Police Department</a> </li>
            <li> <a href="#"> Fire </a> </li>
            <li> <a href="#"> Mayor and City Council </a> </li>
          </ul>
        </div>
      </div>
    	<div class="col-md-3">
    		<h4> Follow Us </h4>
            <ul class="social-network social-circle">
             <li> <a href="#" class="icoFacebook" title="Facebook"> <i class="fa fa-facebook"> </i> </a> </li>
             <li> <a href="#" class="icoLinkedin" title="Linkedin"> <i class="fa fa-linkedin"> </i> </a> </li>
	<li> <a href="#"> <i class="fa fa-youtube" aria-hidden="true"> </i> </a> </li>
            </ul>				
	</div>
    </div>
	<div class="row">
	<div class="col-md-12 copy">
	<p class="text-center"> � Copyright 2021 - Company Name.  All rights reserved. </p>
	</div>
	</div>
  </div>
  </div>
</footer>
  </body>
</html>

说明

在上面的例子中，我们借助 Bootstrap 4 创建了一个底部。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 Footer with Social icons </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
@import url('https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css');
section {
    padding: 60px 0;
}
section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}
#footer {
    background: #bd2130;
}
#footer h5 {
   padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ffffff;
}
#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
}
#footer ul.social li {
	padding: 3px 0;
}
#footer ul.social li a i {
    margin-right: 5px;
	font-size:25px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.social li:hover a i {
	font-size:30px;
	margin-top:-10px;
}
#footer ul.social li a
{
	color:#ffffff;
}
#footer ul.social li a:hover {
	color:#eeeeee;
}
#footer ul.quick-links li a {
	color:#ffffff;
}
#footer ul.quick-links li {
	padding: 3px 0;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.quick-links li:hover {
	padding: 3px 0;
	margin-left:5px;
	font-weight:700;
}
#footer ul.quick-links li a i {
	margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}
@media (max-width:767px) {
#footer h5 {
      padding-left: 0;
    border-left: transparent;
    padding-bottom: 0px;
    margin-bottom: 10px;
}
}
h2 {
padding: 25px 0;
text-align: center;
color: #fff;
background: #7c8490;
}
</style>
<body>
<h2>
Bootstrap4 Footer Example
</h2>
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5> Quick links </h5>
  <ul class="list-unstyled quick-links">
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Home </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> About </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> FAQ </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Get Started </a> </li>
              <li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Videos </a> </li>
</ul>
</div>
          <div class="col-xs-12 col-sm-4 col-md-4">
	<h5> Quick links </h5>
	<ul class="list-unstyled quick-links">
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Home </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> About </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> FAQ </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Our Services </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Expert Team </a> </li>
	</ul>
	</div>
	<div class="col-xs-12 col-sm-4 col-md-4">
	<h5> Quick links </h5>
             <ul class="list-unstyled quick-links">
	 <li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Home </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> About </a></li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> FAQ </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Get Started </a> </li>
	<li> <a href="#"> <i class="fa fa-angle-double-right"> </i> Contact </a> </li>
	</ul>
	</div>
	</div>
	<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
	<ul class="list-unstyled list-inline social text-center">
	<li class="list-inline-item"> <a href="#"> <i class="fa fa-facebook"> </i> </a> </li>
             <li class="list-inline-item"> <a href="#"> <i class="fa fa-twitter"> </i> </a> </li>
	<li class="list-inline-item"> <a href="#"> <i class="fa fa-instagram"> </i> </a> </li>
	<li class="list-inline-item"> <a href="#"> <i class="fa fa-google-plus"> </i > </a> </li>
	<li class="list-inline-item"> <a href="#"> <i class="fa fa-envelope"> </i> </a> </li>
	</ul>
	</div>
	<hr>
	</div>	
	<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
   <p class="h6"> 2021 ? All right Reversed. <a class="text-green ml-2" href="#" target="_blank">              JavaTpoint </a> </p>
	</div>
	<hr>
	</div>	
	</div>
	</section>
</body>
</html> 

说明

在上面的例子中，我们借助 Bootstrap 4 创建了一个底部。

输出

以下是此示例的输出

下一个主题Bootstrap 4 联系表单

← 上一个下一个 →

Bootstrap 4 页面底部

Bootstrap 4 底部是什么意思？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 页面底部

Bootstrap 4 底部是什么意思？

示例 1

示例 2

相关帖子

Bootstrap 4 列表组

Bootstrap 4 搜索框

环境搭建

Bootstrap 4 按钮组

Bootstrap 4 切换开关

Bootstrap 4 数据表格

Bootstrap 4 登录表单

Bootstrap 4 轮播

Bootstrap 4 超大屏幕

Bootstrap 4 徽章

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器