如何使用Bootstrap编写适配移动端、平板、桌面端的响应式网页

1. 基础环境配置 #

首先必须在<head>标签中添加响应式适配专用的viewport元标签，确保移动设备不会强制缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

之后引入Bootstrap资源文件，可选择本地引入或公共CDN资源：

<!-- Bootstrap 5 CSS 示例 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 如需使用交互组件再引入对应的JS文件 -->
<script src="js/bootstrap.bundle.min.js"></script>

2. 核心栅格系统规则 #

Bootstrap内置12栏栅格系统，通过不同断点的类名即可直接定义不同设备下的元素宽度，无需额外写媒体查询：

• 移动端（<576px）：使用col-*类
• 平板（≥576px）：使用col-sm-*类
• 小屏桌面（≥768px）：使用col-md-*类
• 普通桌面（≥992px）：使用col-lg-*类
• 大屏桌面（≥1200px）：使用col-xl-*类

3. 完整实现示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap响应式示例</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!-- 响应式导航栏，移动端自动折叠为汉堡菜单 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">站点名称</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navContent">
                <ul class="navbar-nav ms-auto">
                    <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>

    <div class="container mt-4">
        <!-- 栅格布局：移动端1栏，平板2栏，桌面3栏 -->
        <div class="row g-3">
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card p-3">
                    <img src="https://i.sstatic.net/uF8Lt.jpg" class="card-img-top img-fluid" alt="示例图片">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题1</h5>
                        <p class="card-text">卡片内容示例，不同设备下会自动适配排版。</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card p-3">
                    <img src="https://i.sstatic.net/uF8Lt.jpg" class="card-img-top img-fluid" alt="示例图片">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题2</h5>
                        <p class="card-text">卡片内容示例，不同设备下会自动适配排版。</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card p-3">
                    <img src="https://i.sstatic.net/uF8Lt.jpg" class="card-img-top img-fluid" alt="示例图片">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题3</h5>
                        <p class="card-text">卡片内容示例，不同设备下会自动适配排版。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

4. 常用适配技巧 #

• 图片自适应：给所有<img>标签添加img-fluid类，自动适配父容器宽度
• 元素显隐控制：使用d-*-none、d-*-block类实现不同设备下的元素显示隐藏，比如d-md-none代表平板及以上设备隐藏，仅移动端显示
• 间距自适应：使用m-*-*、p-*-*类设置不同设备下的内外边距，比如mt-md-5代表桌面端上边距为5，移动端沿用默认上边距
• 避免自定义固定宽度：非必要不手动设置width固定值，优先使用Bootstrap自带的宽度工具类

内容的提问来源于stack exchange，提问作者Inayathullah