Bootstrap响应式模板如何适配多终端？-网站模板-锦华智联科技

最精简的 Bootstrap 响应式模板

这是使用 Bootstrap 所需的最基本结构，您可以将其保存为 .html 文件并在浏览器中打开,就能看到一个空白但已加载好所有样式的页面。

（图片来源网络，侵删）

<!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.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 3. 可选：添加自定义 CSS -->
    <style>
        /* 在这里添加你自己的样式 */
        body {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <!-- 在这里放置你的页面内容 -->
    <h1>你好，Bootstrap！</h1>
    <!-- 4. 引入 Bootstrap 的 JavaScript 文件 (需要 Popper.js) -->
    <!-- 注意：JS 文件通常放在 body 的末尾，以确保 DOM 已完全加载 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键部分解释：

<meta charset="UTF-8">：确保浏览器能正确显示中文字符等。
<meta name="viewport" ...>：这是响应式设计的核心！ 它告诉浏览器如何控制页面的尺寸和缩放。
- width=device-width：设置页宽度为设备屏幕的宽度。
- initial-scale=1.0：设置初始缩放比例为 1.0,即不缩放。
<link href="...bootstrap.min.css" ...>：引入 Bootstrap 的核心样式文件，我们使用 CDN (内容分发网络) 链接,这样无需下载文件即可使用。
<script src="...bootstrap.bundle.min.js" ...>：引入 Bootstrap 的 JavaScript 组件。bundle.min.js 已经包含了 Popper.js，这是下拉菜单、弹出框等组件所必需的，放在 </body> 前是最佳实践。

功能完整的响应式模板（带导航栏和页脚）

这个模板包含了现代网站最常见的元素：一个响应式导航栏（在移动端会变成汉堡菜单）、一个主要内容区域和一个页脚。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 响应式模板</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (可选，用于在导航栏添加图标) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        /* 自定义样式 */
        .navbar {
            margin-bottom: 2rem; /* 给导航栏和内容之间一些间距 */
        }
        .footer {
            background-color: #f8f9fa;
            padding: 2rem 0;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <!-- 品牌/Logo -->
            <a class="navbar-brand" href="#">
                <i class="bi bi-bootstrap-fill"></i> MyBrand
            </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 ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主要内容区域 -->
    <main class="container">
        <div class="p-5 mb-4 bg-light rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">欢迎来到我们的网站</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 mb-4">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">特色功能一</h5>
                        <p class="card-text">这里是该功能的详细描述，Bootstrap 的栅格系统让布局变得异常简单。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">特色功能二</h5>
                        <p class="card-text">这里是该功能的详细描述，响应式设计是现代网页开发的标准。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">特色功能三</h5>
                        <p class="card-text">这里是该功能的详细描述，组件化的开发模式大大提高了效率。</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer mt-5">
        <div class="container">
            <span class="text-muted">© 2025 MyBrand. 保留所有权利。</span>
        </div>
    </footer>
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

新增组件详解：

响应式导航栏 (<nav class="navbar ...">)
- navbar-expand-lg：表示在大屏幕（large）及以上的尺寸时，导航栏会水平展开，在小屏幕上,它会折叠起来。
- navbar-toggler：这是移动端显示的“汉堡菜单”按钮。
- data-bs-toggle="collapse" 和 data-bs-target="#navbarNav"：这是 Bootstrap 的数据属性，用于触发折叠效果。target 指向要折叠/展开的元素 ID。
- navbar-collapse 和 id="navbarNav"：这是被折叠的内容区域，当屏幕宽度小于 lg 断点时，这个区域默认隐藏，点击 navbar-toggler 后才会显示。
- ms-auto：这是一个 Flexbox 的工具类，m 是 margin，s 是 start（左），auto 表示自动,它会把导航项推到右侧。
栅格系统 (<div class="row"> 和 <div class="col-md-4">)
- container：一个固定宽度的容器，在不同屏幕尺寸下有最大宽度限制,内容居中。
- row：行，用于列的容器,它会清除列的浮动。
- col-md-4：这是栅格系统的核心。
  - col：表示这是一个列。
  - md：表示这个规则在中等（medium）屏幕及以上生效（屏幕宽度 ≥ 768px）。
  - 4：表示该列占据 12 份中的 4 份，即 1/3 的宽度。
- 响应式表现：当屏幕宽度小于 md 断点（例如在手机上）时，col-md-4 会失效，列会垂直堆叠，每个列占满整个容器宽度,这正是我们想要的效果。
卡片 (<div class="card">)
（图片来源网络，侵删）
- 一个非常灵活的组件，用于展示信息，它包含 card-img-top（图片）、card-body区）、card-title）和 card-text（文本）等部分。
页脚 (<footer class="footer">)

一个简单的页脚，通常包含版权信息、联系方式等,这里我们用了一些自定义样式来美化它。

如何开始使用这个模板

复制代码：将上面“功能完整的响应式模板”的代码复制到一个文本编辑器中（如 VS Code, Sublime Text, Notepad++ 等）。
保存文件：将其保存为 index.html。
预览：用浏览器（如 Chrome, Firefox, Edge）打开这个 index.html 文件。
测试响应式：
- 在桌面浏览器上,正常查看。
- 缩小浏览器窗口，观察导航栏何时会变成汉堡菜单,以及卡片布局何时会从一行三列变成垂直堆叠。
- 使用浏览器的“开发者工具”（通常按 F12 打开），切换到不同设备尺寸的预览模式,可以更直观地看到效果。

这个模板为你提供了一个坚实的基础，你可以基于它来构建任何类型的网站，只需在 <main> 和 <footer> 标签之间添加你的内容,并根据需要修改样式和组件即可。

（图片来源网络，侵删）