📌  相关文章
📜  faire un footer avec bootstrap - Html (1)

📅  最后修改于: 2023-12-03 14:41:09.588000             🧑  作者: Mango

在Bootstrap中创建Footer

Bootstrap是一个强大的前端框架，提供了丰富的组件和样式，可以轻松构建现代化的Web应用程序。其中之一是Footer。

通过使用Bootstrap，可以很容易地创建一个响应式、现代化的Footer，在不浪费时间和精力的情况下，为您的网站增添新的外观。下面是如何创建一个基本的Bootstrap Footer。

步骤1：设置HTML文件结构

首先，需要设置你的HTML文件，以将页面分为头部、主体和页脚。在您的标签内添加以下代码：

<div class="container-fluid">
  <div class="row">

    <!-- Header -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <header>头部</header>
    </div>

    <!-- Main Content -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <main>主体</main>
    </div>

    <!-- Footer -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <footer>页脚</footer>
    </div>

  </div>
</div>
步骤2：添加Bootstrap依赖

在标签内添加以下代码，以使用Bootstrap样式：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
步骤3：设置Footer样式

在Footer部分添加以下代码来设置Footer的样式：

<footer class="navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <p class="text-muted">版权©所有 2018年 上海世纪公园 </p>
  </div>
</footer>
结论

完成以上步骤后，您的基本Bootstrap Footr已经完成。通过为其添加自定义样式，可以使其与您的网站完美。所获得的结果如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>Bootstrap Footer</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">

    <!-- Header -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <header>头部</header>
    </div>

    <!-- Main Content -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <main>主体</main>
    </div>

    <!-- Footer -->
    <footer class="navbar-inverse navbar-fixed-bottom">
      <div class="container-fluid">
        <p class="text-muted">版权©所有 2018年 上海世纪公园 </p>
      </div>
    </footer>

  </div>
</div>

</body>
</html>

在Bootstrap中创建Footer很简单，只需要简单的几步。现在，您可以通过在其上添加任何自定义样式或元素来完善这个基本的Footer，并为您的网站增添一份优雅和现代感。