bootstrap页脚_bootstrap页脚模板

在网页设计中，页脚是一个重要的组成部分。使用Bootstrap创建一个美观且功能齐全的页脚，可以为您的网站增添专业感。下面将介绍如何使用Bootstrap构建页脚，并提供几种不同的解决方案。

一、简单文本页脚

对于一些只需要展示基本信息（如版权信息）的网站，可以采用简单的文本页脚。这种方案实现起来非常容易，代码如下：

html</p>

<footer class="bg-light text-center text-lg-start">
  <div class="text-center p-3">
    © 2023 Copyright:
    <a class="text-dark" href="#">yourwebsite.com</a>
  </div>
</footer>

<p>```
这段代码创建了一个浅色背景的页脚，居中的文本包含了版权信息和链接。</p>

<h2>二、包含导航链接的页脚</h2>

<p>如果希望在页脚中添加一些导航链接，方便用户快速跳转到网站的重要页面，那么可以按照以下思路编写代码：</p>

<p>```html</p>

<footer class="bg-light text-center text-lg-start">
  <!-- Grid container -->
  <div class="container p-4">
    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
        <h5 class="text-uppercase">Footer Content</h5>

        <p>
          Here you can use rows and columns here to organize your footer content.
        </p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled mb-0">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Grid container -->

  <!-- Copyright -->
  <div class="text-center p-3">
    © 2023 Copyright:
    <a class="text-dark" href="#">yourwebsite.com</a>
  </div>
  <!-- Copyright -->
</footer>

<p>

这里通过网格布局将页脚分成了两部分，一部分用于放置页脚内容说明，另一部分则是导航链接列表。