Bootstrap简单模板如何快速上手？-网站模板-锦华智联科技

最简单的 Bootstrap 模板

这是一个单文件模板，包含了 HTML、CSS（通过 Bootstrap CDN）和 JavaScript（通过 Bootstrap CDN）。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 1. 设置字符编码和视口 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 2. 引入 Bootstrap 的 CSS 文件 (从 CDN) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 3. 可选：自定义样式 -->
    <style>
        body {
            padding-top: 56px; /* 为固定在顶部的导航栏留出空间 */
        }
    </style>
</head>
<body>
    <!-- 4. 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">我的网站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">lt;/a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 5. 主要内容区域 -->
    <main class="container mt-5">
        <div class="p-5 mb-4 bg-light rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">你好，Bootstrap！</h1>
                <p class="col-md-8 fs-4">这是一个使用 Bootstrap 5 构建的简单模板，你可以直接复制这个文件，开始你的项目。</p>
                <button class="btn btn-primary btn-lg" type="button">了解更多</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h2>标题一</h2>
                <p>这是一个示例段落，用于展示 Bootstrap 的网格系统，你可以将内容放在这些列中。</p>
                <p><a class="btn btn-secondary" href="#">查看详情 &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>标题二</h2>
                <p>另一个示例段落，Bootstrap 的栅格系统非常灵活，可以轻松创建响应式布局。</p>
                <p><a class="btn btn-secondary" href="#">查看详情 &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>标题三</h2>
                <p>最后一个示例段落，尝试调整浏览器窗口大小，看看布局是如何自适应的。</p>
                <p><a class="btn btn-secondary" href="#">查看详情 &raquo;</a></p>
            </div>
        </div>
    </main>
    <!-- 6. 页脚 -->
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <span class="text-muted">© 2025 我的网站. 保留所有权利.</span>
        </div>
    </footer>
    <!-- 7. 引入 Bootstrap 的 JavaScript 文件 (从 CDN) -->
    <!-- Popper.js 是 Bootstrap 的依赖项 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <!-- Bootstrap 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

模板详解

`<!DOCTYPE html>` 和基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    ...
</head>
<body>
    ...
</body>
</html>

<!DOCTYPE html>：声明这是一个 HTML5 文档。
<html lang="zh-CN">>：指定网页的语言为中文,有助于搜索引擎优化。

`<head>` 部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>...</style>
</head>

<meta charset="UTF-8">：确保浏览器能正确显示中文等特殊字符。
<meta name="viewport" ...>：这是移动端开发的关键！ 它告诉浏览器如何控制页面的尺寸和缩放，没有它,在手机上查看网页会出现问题。
<link href="...bootstrap.min.css" ...>：这是核心！通过 CDN（内容分发网络）引入 Bootstrap 的样式表，CDN 的速度很快,推荐使用。
<style>...</style>：这里可以写你自己的自定义 CSS 样式，我们添加的 padding-top: 56px; 是为了防止被固定在顶部的导航栏遮挡住页面内容。

`<body>` 部分

这是网页的可见内容。

导航栏
```
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      ...
  </nav>
```
- navbar：基础导航栏类。
- navbar-expand-lg：在大屏幕上（≥992px）展开导航菜单,在小屏幕上折叠。
- navbar-dark bg-dark：设置深色背景和浅色文字。
- fixed-top：将导航栏固定在页面顶部。
区域
```
  <main class="container mt-5">
      ...
  </main>
```
- main：HTML5 语义化标签,表示主要内容。
- container：Bootstrap 的一个核心类，提供一个有固定宽度的容器，并能在不同屏幕尺寸下居中，它包含两侧的 padding。
- mt-5：一个 Bootstrap 的工具类，表示 "margin-top: 3rem;" (上边距),用来给被导航栏遮挡的内容留出空间。
网格系统
（图片来源网络，侵删）
```
  <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
  </div>
```
- row：代表一行,用来放置列。
- col-md-4：代表一列。md 表示在中等屏幕（≥768px）上，该列占据 4/12 的宽度（即 3 列并排），在小屏幕上,它们会自动堆叠。
页脚
```
  <footer class="footer mt-auto py-3 bg-light">
      ...
  </footer>
```
- footer：HTML5 语义化标签。
- mt-auto：一个有用的工具类，将页脚推到页面底部（当内容较少时）。
- py-3：垂直内边距（上下）。
- bg-light：浅色背景。

`<body>` 结尾的 JavaScript

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>

Bootstrap 的某些组件（如下拉菜单、模态框、折叠导航栏等）需要 JavaScript 才能工作。
必须先引入 Popper.js，因为它是 Bootstrap JS 的依赖项。
这些脚本通常放在 </body> 标签之前，以确保在页面加载完成后再执行,避免潜在的错误。

如何使用这个模板？

复制代码：将上面完整的 HTML 代码复制到一个新的文本文件中。
保存文件：将文件另存为 index.html（或者其他你喜欢的名字，但后缀必须是 .html）。
打开文件：用浏览器（如 Chrome, Firefox, Edge）直接打开这个 index.html 文件。
开始编辑：现在你可以修改文件中的文本、图片链接等,来构建你自己的网站了。

这个模板为你提供了一个坚实的基础，包含了现代网页最常见的需求，并且是响应式的，可以在手机、平板和电脑上都有良好的显示效果。

Bootstrap简单模板如何快速上手？

最简单的 Bootstrap 模板

模板详解

<!DOCTYPE html> 和基本结构

<head> 部分

<body> 部分

<body> 结尾的 JavaScript

如何使用这个模板？

`<!DOCTYPE html>` 和基本结构

`<head>` 部分

`<body>` 部分

`<body>` 结尾的 JavaScript