使用 Bootstrap 4 创建一个基本的网页非常简单。你只需要加载 Bootstrap 的 CSS 和 JS 文件，然后通过适当的类来构建网页结构。下面是一个简单的 Bootstrap 4 网页模板，包括导航栏、内容部分和页脚。

基本步骤

  1. 引入 Bootstrap 4 的 CSS 和 JS 文件。
  2. 使用 Bootstrap 的网格系统（Grid System）和组件来组织页面布局。
  3. 创建响应式的设计，确保网页在不同设备上的表现一致。

示例：一个简单的 Bootstrap 4 网页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap 4 Webpage</title>
  
  <!-- 引入 Bootstrap 4 的 CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- 引入字体图标 (可选) -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  
  <!-- 页面自定义样式 -->
  <style>
    .hero-section {
      background-color: #f8f9fa;
      padding: 50px 0;
    }
    .footer {
      background-color: #343a40;
      color: white;
      padding: 20px 0;
    }
  </style>
</head>
<body>

  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Hero 区域 -->
  <div class="hero-section text-center">
    <div class="container">
      <h1>Welcome to My Website</h1>
      <p>This is a simple webpage built using Bootstrap 4.</p>
      <a href="#about" class="btn btn-primary">Learn More</a>
    </div>
  </div>

  <!-- 关于部分 -->
  <div id="about" class="container py-5">
    <div class="row">
      <div class="col-md-6">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor, felis euismod tincidunt iaculis, lectus urna egestas odio, nec dictum risus purus eu leo.</p>
      </div>
      <div class="col-md-6">
        <img src="https://via.placeholder.com/500" alt="About Image" class="img-fluid">
      </div>
    </div>
  </div>

  <!-- 服务部分 -->
  <div id="services" class="container py-5 bg-light">
    <h2 class="text-center">Our Services</h2>
    <div class="row">
      <div class="col-md-4 text-center">
        <i class="fas fa-laptop fa-4x"></i>
        <h4>Web Development</h4>
        <p>We build high-quality, responsive websites.</p>
      </div>
      <div class="col-md-4 text-center">
        <i class="fas fa-paint-brush fa-4x"></i>
        <h4>Design</h4>
        <p>Creative and modern designs that make your brand stand out.</p>
      </div>
      <div class="col-md-4 text-center">
        <i class="fas fa-bullhorn fa-4x"></i>
        <h4>Marketing</h4>
        <p>Effective digital marketing strategies to boost your business.</p>
      </div>
    </div>
  </div>

  <!-- 联系部分 -->
  <div id="contact" class="container py-5">
    <h2 class="text-center">Contact Us</h2>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter your name">
      </div>
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter your email">
      </div>
      <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <!-- 页脚 -->
  <footer class="footer text-center">
    <p>&copy; 2025 My Website. All Rights Reserved.</p>
  </footer>

  <!-- 引入 Bootstrap 4 的 JS 和 jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

代码解析：

  1. 头部（<head>）：
    • 引入了 Bootstrap 4 的 CSS 文件和 Font Awesome 图标库（可选，用于显示图标）。
    • 自定义了一些简单的样式，比如 Hero 区域和页脚的背景色。
  2. 导航栏（Navbar）：
    • 使用了 navbar 类来创建响应式导航栏，支持在小屏幕上折叠成汉堡菜单。
  3. Hero 区域：
    • 一个大标题区域，通常用于吸引用户的注意力。包含标题、简短的介绍以及一个按钮。
  4. 关于部分（About Us）：
    • 使用 Bootstrap 的网格系统（row 和 col-md-6）来创建左右布局。
  5. 服务部分（Services）：
    • 使用了三个列来展示不同的服务，每个服务有一个图标（Font Awesome）、标题和描述。
  6. 联系表单（Contact Us）：
    • 一个简单的表单，包括姓名、电子邮件和留言字段，允许用户联系你。
  7. 页脚（Footer）：
    • 一个页脚区域，通常包含版权信息或其他版权声明。
  8. 引入 Bootstrap 4 的 JS 文件：
    • 使得导航栏的折叠功能（响应式菜单）和其他 Bootstrap 组件的功能生效。

总结

这个简单的网页使用了 Bootstrap 4 提供的基础布局和组件，包括导航栏、网格系统、按钮、表单和图标。你可以根据自己的需求进一步定制和扩展这个网页，添加更多内容、样式和功能，来创建一个完整的网站。