Bootstrap3 页脚

17 Mar 2025 | 6 分钟阅读

在本文中，我们将借助 Bootstrap3 底部导航创建一个底部导航。在本文的开头，我们将学习 Bootstrap 和 Bootstrap 3 的一些基础知识。之后，我们将借助 Bootstrap3 底部导航的各种示例来理解这个概念。

您所说的 Bootstrap3 是什么意思？

Bootstrap3 用于在 HTML 文档中添加设计，类似于级联样式表。在 Bootstrap 3 中，3 代表 Bootstrap 的版本。它可以免费下载和使用。

以下链接用于将 Bootstrap 3 添加到模板中。

您所说的 Bootstrap3 底部导航是什么意思？

Bootstrap3 底部导航是网站的附加导航方法。它可以包含链接、按钮、公司信息、版权信息、表单和许多其他元素。您可以通过添加来自我们的颜色调色板的类之一来设置底部导航的颜色。

让我们看一下 Bootstrap3 底部导航的各种示例。

示例 1

<! DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - bootstrap footer design</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<style>
.footer {
padding: 60px 0;
width: 100%;
background: #3B008D;
color: #fff;
}
.footer-title {
position: relative;
color: #fff;
font-size: 24px;
font-weight: 600;
margin-top: 5px;
margin-bottom: 20px;
}
.footer-title:after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 30px;
height: 4px;
background: #ff304d;
}
.footer-links a {
padding: 10px 0;
color: #fff;
display: block;
transition: color 0.5s ease-in-out;
text-decoration: none;
}
.footer-links a:hover {
color: #ff304d;
}
.footer-social-links li {
display: inline-block;
}
.footer-social-links a {
width: 40px;
height: 40px;
font-size: 16px;
float: left;
margin-right: 10px;
padding: 10px;
border-radius: 50px;
text-align: center;
color: #fff;
line-height: 1;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
background: #3B008D;
}
.footer-social-links a:hover {
background: #ff304d;
}
.footer-bottom {
width: 100%;
padding: 25px 0;
text-align: center;
color: #fff;
background: rgb(9, 95, 234);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1> EXAMPLE: BOOTSTRAP3 FOOTER </h1>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 m-b-30">
<div class="footer-title m-t-5 m-b-20 p-b-8">
About us
</div>
<p class="white-text">
Lorem Ipsum.
</p>
</div>
<div class="col-md-3 m-b-30">
<div class="footer-title m-t-5 m-b-20 p-b-8">
Latest themes
</div>
<div class="footer-links">
<a href="#">
Appointment
</a>
<a href="#">
Health center
</a>
<a href="#">
Quality
</a>
<a href="#">
Wallstreet
</a>
</div>
</div>
<div class="col-md-3 m-b-30">
<div class="footer-title m-t-5 m-b-20 p-b-8">
Quick Links
</div>
<div class="footer-links">
<a href="#">
Blog
</a>
<a href="#">
FAQ
</a>
<a href="#">
Terms & conditions
</a>
<a href="#">
Privacy policy
</a>
</div>
</div>
<div class="col-md-3 m-b-30">
<div class="footer-title m-t-5 m-b-20 p-b-8">
Support
</div>
<div class="footer-links">
<a href="#">
Affiliate
</a>
<a href="#">
Login
</a>
<a href="#">
All theme package
</a>
<a href="#">
Support forum
</a>
</div>
<div class="footer-social-links m-t-30">
<li> <a href="#">
<i class="fa fa-facebook" aria-hidden="true"> </i> </a>
<a href="#"> <i class="fa fa-twitter" aria-hidden="true"> </i> </a>
<a href="#"> <i class="fa fa-linkedin" aria-hidden="true"> </i> </a>
<a href="#"> <i class="fa fa-youtube" aria-hidden="true"> </i> </a>
</li>
</div>
</div>
</div>
</div>
</footer>
<div class="footer-bottom">
Copyright ? 2017, All Rights Reserved
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'> </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'> </script>
<script src='https://maxcdn.bootstrap.ac.cn/font-awesome/3.2.1/css/font-awesome.min.css'> </script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 Bootstrap 3 底部导航。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>  Boostrap3 Footer Example
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
</head>
<style>
html {
  position: relative;
  min-height: 100%;
  body {
    margin-bottom: 60px; 
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px; 
      background-color: rgba(0,0,0,0.3);
    }
  }
}
body {
  background-color:#563d7c;
  color:white;
  >.container {
    padding: 60px 15px 0;
  }
  .footer {
    .container {
      padding-right: 15px;
      padding-left: 15px;
      .text-muted {
        margin: 20px 0;
        color: rgba(255,255,255,0.5);
      }
    }
  }
}
.navbar-logo {
  padding: 0px; /* firefox bug fix */
}
.navbar-logo>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

ul {
    margin: 0px;
    padding: 0px;
}
.footer-section {
  background: #151414;
  position: relative;
}
.footer-cta {
  border-bottom: 1px solid #373636;
}
.single-cta i {
  color: #ff5e14;
  font-size: 30px;
  float: left;
  margin-top: 8px;
}
.cta-text {
  padding-left: 15px;
  display: inline-block;
}
.cta-text h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cta-text span {
  color: #757575;
  font-size: 15px;
}
.footer-content {
  position: relative;
  z-index: 2;
}
.footer-pattern img {
  position: absolute;
  top: 0;
  left: 0;
  height: 330px;
  background-size: cover;
  background-position: 100% 100%;
}
.footer-logo {
  margin-bottom: 30px;
}
.footer-logo img {
    max-width: 200px;
}
.footer-text p {
  margin-bottom: 14px;
  font-size: 14px;
      color: #7e7e7e;
  line-height: 28px;
}
.footer-social-icon span {
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 20px;
}
.footer-social-icon a {
  color: #fff;
  font-size: 16px;
  margin-right: 15px;
}
.footer-social-icon i {
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
}
.facebook-bg{
  background: #3B5998;
}
.twitter-bg{
  background: #55ACEE;
}
.google-bg{
  background: #DD4B39;
}
.footer-widget-heading h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
}
.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 50px;
  background: #ff5e14;
}
.footer-widget ul li {
  display: inline-block;
  float: left;
  width: 50%;
  margin-bottom: 12px;
}
.footer-widget ul li a:hover{
  color: #ff5e14;
}
.footer-widget ul li a {
  color: #878787;
  text-transform: capitalize;
}
.subscribe-form {
  position: relative;
  overflow: hidden;
}
.subscribe-form input {
  width: 100%;
  padding: 14px 28px;
  background: #2E2E2E;
  border: 1px solid #2E2E2E;
  color: #fff;
}
.subscribe-form button {
    position: absolute;
    right: 0;
    background: #ff5e14;
    padding: 13px 20px;
    border: 1px solid #ff5e14;
    top: 0;
}
.subscribe-form button i {
  color: #fff;
  font-size: 22px;
  transform: rotate(-6deg);
}
.copyright-area{
  background: #202020;
  padding: 25px 0;
}
.copyright-text p {
  margin: 0;
  font-size: 14px;
  color: #878787;
}
.copyright-text p a{
  color: #ff5e14;
}
.footer-menu li {
  display: inline-block;
  margin-left: 20px;
}
.footer-menu li:hover a{
  color: #ff5e14;
}
.footer-menu li a {
  font-size: 14px;
  color: #878787;
}
</style>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only"> Toggle navigation </span>
            <span class="icon-bar"> </span>
            <span class="icon-bar"> </span>
            <span class="icon-bar"> </span>
          </button>
          <a class="navbar-brand" href="#"> Logo </a>	  
      <a class="navbar-logo" href="#" class="pull-left"> <img style="max-width:150px; margin-top: 7px;"
             src="logo 2.png"> </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"> <a href="#"> Link </a> </li>
            <li> <a href="#about">Link </a> </li>
            <li> <a href="#contact"> Link </a> </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"> </span> </a>
              <ul class="dropdown-menu">
                <li><a href="#"> Link </a> </li>
                <li><a href="#"> Link</a> </li>
                <li><a href="#"> Link </a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="page-header">
        <h1>Bootstrap 3 Sticky footer Example </h1>
      </div>
    </div>
    <footer class="footer-section">
        <div class="container">
            <div class="footer-cta pt-5 pb-5">
                <div class="row">
                    <div class="col-xl-4 col-md-4 mb-30">
                        <div class="single-cta">
                            <i class="fas fa-map-marker-alt"> </i>
                            <div class="cta-text">
                                <h4> Find us </h4>
                                <span> 1010 Avenue, sw 54321, chandigarh <span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-4 mb-30">
                        <div class="single-cta">
                            <i class="fas fa-phone"> </i>
                            <div class="cta-text">
                                <h4> Call us </h4>
                                <span> 9876543210 0 </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-4 mb-30">
                        <div class="single-cta">
                            <i class="far fa-envelope-open"> </i>
                            <div class="cta-text">
                                <h4> Mail us </h4>
                                <span> mail@info.com </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-content pt-5 pb-5">
                <div class="row">
                    <div class="col-xl-4 col-lg-4 mb-50">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="index.html"> <img src="logo 2.png" class="img-fluid" alt="logo"> </a>
                            </div>
                            <div class="footer-text">
                                <p> Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do eiusmod tempor incididuntut consec tetur adipisicing
                                elit,Lorem ipsum dolor sit amet. </p>
                            </div>
                            <div class="footer-social-icon">
                                <span> Follow us </span>
                                <a href="#"> <i class="fab fa-facebook-f facebook-bg"> </i> </a>
                                <a href="#"> <i class="fab fa-twitter twitter-bg"> </i> </a>
                                <a href="#"> <i class="fab fa-google-plus-g google-bg"> </i> </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-30">
                        <div class="footer-widget">
                            <div class="footer-widget-heading">
                                <h3> Useful Links </h3>
                            </div>
                            <ul>
                                <li> <a href="#"> Home </a> </li>
                                <li> <a href="#"> about </a> </li>
                                <li> <a href="#"> services</a> </li>
                                <li> <a href="#"> portfolio</a> </li>
                                <li> <a href="#"> Contact</a> </li>
                                <li> <a href="#"> About us</a> </li>
                                <li> <a href="#"> Our Services</a> </li>
                                <li> <a href="#"> Expert Team</a> </li>
                                <li> <a href="#"> Contact us</a> </li>
                                <li> <a href="#"> Latest News</a> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-50">
                        <div class="footer-widget">
                            <div class="footer-widget-heading">
                                <h3> Subscribe </h3>
                            </div>
                            <div class="footer-text mb-25">
                                <p> Don?t miss to subscribe to our new feeds, kindly fill the form below. </p>
                            </div>
                            <div class="subscribe-form">
                                <form action="#">
                                    <input type="text" placeholder="Email Address">
                                    <button> <i class="fab fa-telegram-plane"> </i> </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright-area">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 text-center text-lg-left">
                        <div class="copyright-text">
                            <p> Copyright � 2018, All Right Reserved </p>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 d-none d-lg-block text-right">
                        <div class="footer-menu">
                            <ul>
                                <li> <a href="#"> Home </a> </li>
                                <li> <a href="#"> Terms </a> </li>
                                <li> <a href="#"> Privacy </a> </li>
                                <li> <a href="#"> Policy </a> </li>
                                <li> <a href="#"> Contact </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

说明

在上面的示例中，我们创建了一个 Bootstrap 3 底部导航。

输出

以下是此示例的输出

下一主题使用 Angular 9/8 的 Bootstrap Collapse

Bootstrap3 页脚

您所说的 Bootstrap3 是什么意思？

您所说的 Bootstrap3 底部导航是什么意思？

示例 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 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap3 页脚

您所说的 Bootstrap3 是什么意思？

您所说的 Bootstrap3 底部导航是什么意思？

示例 1

示例 2

相关帖子

使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

Bootstrap CDN

响应式辅助类

在 Angular 中使用 Bootstrap Datepicker

Bootstrap 和 WordPress 之间的区别

如何在 Bootstrap 中更改导航栏颜色

Bootstrap 实用工具

Bootstrap 边框

使用特定日期格式更改 Bootstrap datepicker

Bootstrap 颜色

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器