Bootstrap 4 实战案例 - 创建响应式网页

最后编辑于2025-04-14 12:27:38.1614462 +0800 CST

Bootstrap 4 实战案例 - 创建响应式网页

在学习了Bootstrap 4的各个组件和功能后，本章将通过一个完整的实例，教你如何创建一个简单而美观的响应式网页。这个实例将综合应用我们前面学习过的多种Bootstrap组件和工具。

最终效果预览

我们将创建一个包含导航栏、巨幕组件、两栏布局内容区和页脚的响应式网页。当在不同设备上查看时，布局会自动调整以适应不同的屏幕宽度。

页面结构

我们的页面由以下几个主要部分组成：

  1. 页面顶部的巨幕（Jumbotron）
  2. 响应式导航栏
  3. 主内容区（两栏布局）
  4. 页脚

HTML代码实现

下面是完整的HTML代码：

html 
  1<!DOCTYPE html>
  2<html lang="zh-CN">
  3<head>
  4  <title>Bootstrap 4 实战案例</title>
  5  <meta charset="utf-8">
  6  <meta name="viewport" content="width=device-width, initial-scale=1">
  7  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  8  <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  9  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 10  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 11  <style>
 12  .fakeimg {
 13    height: 200px;
 14    background: #aaa;
 15    display: flex;
 16    align-items: center;
 17    justify-content: center;
 18    color: white;
 19    font-size: 18px;
 20  }
 21  </style>
 22</head>
 23<body>
 24
 25<!-- 巨幕 -->
 26<div class="jumbotron text-center" style="margin-bottom:0">
 27  <h1>我的第一个 Bootstrap 4 页面</h1>
 28  <p>重置浏览器窗口大小查看响应式效果！</p> 
 29</div>
 30
 31<!-- 导航栏 -->
 32<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 33  <a class="navbar-brand" href="#">导航</a>
 34  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 35    <span class="navbar-toggler-icon"></span>
 36  </button>
 37  <div class="collapse navbar-collapse" id="collapsibleNavbar">
 38    <ul class="navbar-nav">
 39      <li class="nav-item">
 40        <a class="nav-link" href="#">首页</a>
 41      </li>
 42      <li class="nav-item">
 43        <a class="nav-link" href="#">服务</a>
 44      </li>
 45      <li class="nav-item">
 46        <a class="nav-link" href="#">关于我们</a>
 47      </li>    
 48      <li class="nav-item">
 49        <a class="nav-link" href="#">联系方式</a>
 50      </li>
 51    </ul>
 52  </div>  
 53</nav>
 54
 55<!-- 内容区 -->
 56<div class="container" style="margin-top:30px">
 57  <div class="row">
 58    <!-- 左侧边栏 -->
 59    <div class="col-sm-4">
 60      <h2>关于我</h2>
 61      <h5>我的照片:</h5>
 62      <div class="fakeimg">这边插入图像</div>
 63      <p class="mt-3">我是一名Web开发者，热爱学习新技术...</p>
 64      
 65      <h3 class="mt-4">常用链接</h3>
 66      <p>这里是一些我常用的网站链接</p>
 67      <ul class="nav nav-pills flex-column">
 68        <li class="nav-item">
 69          <a class="nav-link active" href="#">个人主页</a>
 70        </li>
 71        <li class="nav-item">
 72          <a class="nav-link" href="#">GitHub</a>
 73        </li>
 74        <li class="nav-item">
 75          <a class="nav-link" href="#">技术博客</a>
 76        </li>
 77        <li class="nav-item">
 78          <a class="nav-link disabled" href="#">Twitter</a>
 79        </li>
 80      </ul>
 81      <hr class="d-sm-none">
 82    </div>
 83    
 84    <!-- 右侧主内容 -->
 85    <div class="col-sm-8">
 86      <h2>最新项目</h2>
 87      <h5>2023年10月15日发布</h5>
 88      <div class="fakeimg">项目截图</div>
 89      <p class="mt-3">项目简介</p>
 90      <p>这是我最近完成的一个响应式网站项目，使用了Bootstrap 4框架。该项目包含多个页面和功能模块，完全适配移动设备和桌面端。</p>
 91      
 92      <h2 class="mt-5">技术博客</h2>
 93      <h5>2023年10月10日发布</h5>
 94      <div class="fakeimg">博客特色图</div>
 95      <p class="mt-3">最新文章摘要</p>
 96      <p>在这篇文章中，我分享了使用Bootstrap 4开发响应式网站的经验和技巧，包括网格系统的高级应用、自定义组件的创建方法，以及性能优化的实践经验。</p>
 97    </div>
 98  </div>
 99</div>
100
101<!-- 页脚 -->
102<div class="jumbotron text-center" style="margin-bottom:0; margin-top:30px">
103  <p>© 2023 我的Bootstrap网站 | 版权所有</p>
104  <p>
105    <a href="#">隐私政策</a> | 
106    <a href="#">使用条款</a> | 
107    <a href="#">联系我们</a>
108  </p>
109</div>
110
111</body>
112</html>

代码解析

1. 页面头部设置

html 
 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3<head>
 4  <title>Bootstrap 4 实战案例</title>
 5  <meta charset="utf-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1">
 7  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 8  <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
 9  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
10  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
11  <!-- 自定义CSS -->
12  <style>
13  .fakeimg {
14    height: 200px;
15    background: #aaa;
16    display: flex;
17    align-items: center;
18    justify-content: center;
19    color: white;
20    font-size: 18px;
21  }
22  </style>
23</head>

这里我们:

  • 设置了文档类型和语言
  • 添加了必要的meta标签，特别是viewport设置，这对响应式设计至关重要
  • 引入了Bootstrap 4的CSS和JavaScript文件
  • 创建了一个简单的自定义类.fakeimg用于显示占位图

2. 巨幕组件

html 
1<div class="jumbotron text-center" style="margin-bottom:0">
2  <h1>我的第一个 Bootstrap 4 页面</h1>
3  <p>重置浏览器窗口大小查看响应式效果！</p> 
4</div>

巨幕组件用于突出显示网站的主要内容或标语，这里我们使用了：

  • .jumbotron类创建突出显示的盒子
  • .text-center类使文本居中
  • 设置margin-bottom:0移除默认的底部边距，使导航栏紧贴巨幕

3. 响应式导航栏

html 
 1<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2  <a class="navbar-brand" href="#">导航</a>
 3  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 4    <span class="navbar-toggler-icon"></span>
 5  </button>
 6  <div class="collapse navbar-collapse" id="collapsibleNavbar">
 7    <ul class="navbar-nav">
 8      <li class="nav-item">
 9        <a class="nav-link" href="#">首页</a>
10      </li>
11      <!-- 其他导航项 -->
12    </ul>
13  </div>  
14</nav>

这个导航栏具有以下特点：

  • 在小屏幕设备上会折叠成一个汉堡菜单按钮
  • 使用深色背景和白色文本
  • 包含品牌标识和导航链接

4. 两栏布局内容区

html 
 1<div class="container" style="margin-top:30px">
 2  <div class="row">
 3    <div class="col-sm-4">
 4      <!-- 左侧边栏内容 -->
 5    </div>
 6    <div class="col-sm-8">
 7      <!-- 右侧主内容 -->
 8    </div>
 9  </div>
10</div>

这里我们使用Bootstrap的网格系统创建两栏布局：

  • 在小屏幕及以上设备上，左侧栏占据4列，右侧栏占据8列
  • 在超小屏幕设备上，两栏会堆叠显示
  • 我们添加了margin-top:30px为内容区添加上边距

5. 页脚区域

html 
1<div class="jumbotron text-center" style="margin-bottom:0; margin-top:30px">
2  <p>© 2023 我的Bootstrap网站 | 版权所有</p>
3  <p>
4    <a href="#">隐私政策</a> | 
5    <a href="#">使用条款</a> | 
6    <a href="#">联系我们</a>
7  </p>
8</div>

页脚使用了另一个jumbotron组件，包含了版权信息和一些页脚链接。

响应式设计要点

在这个示例中，我们实现响应式设计的关键点：

  1. 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1">确保页面在移动设备上正确缩放。

  2. 响应式导航栏：使用navbar-expand-sm类，导航栏在小尺寸屏幕上会折叠为汉堡菜单。

  3. 网格系统：使用col-sm-4和col-sm-8类创建响应式列，在小型设备及以上保持水平布局，在更小的设备上堆叠显示。

  4. 辅助类：使用d-sm-none类控制元素在不同设备上的显示与隐藏。

自定义扩展

你可以通过以下方式进一步扩展这个基本网页：

  1. 替换占位图.fakeimg为实际图像
  2. 添加更多内容区块，如产品展示、服务介绍等
  3. 增加联系表单、图片轮播等组件
  4. 使用自定义CSS优化视觉效果

总结

这个实例展示了如何使用Bootstrap 4创建一个简单而功能完备的响应式网页。通过组合使用巨幕、导航栏、网格系统和其他Bootstrap组件，我们能够快速构建出专业级别的网页布局。

随着你对Bootstrap的深入了解，可以进一步优化这个网页，添加更多组件和功能，创建更加复杂和精美的网站。