如何使用Bootstrap实现图示的页面布局效果？

你可以直接用Bootstrap原生的栅格系统、工具类实现这个布局，无需额外自定义CSS，以下是完整实现代码：

<!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>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary shadow-sm mb-4">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">管理后台</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" 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="#">设置</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">退出</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid px-4">
    <div class="row g-4">
      <!-- 左侧侧边栏 -->
      <div class="col-lg-3">
        <div class="card shadow-sm p-3">
          <ul class="nav flex-column">
            <li class="nav-item mb-2">
              <a class="nav-link active bg-primary text-white rounded" href="#">仪表盘</a>
            </li>
            <li class="nav-item mb-2">
              <a class="nav-link text-dark" href="#">用户管理</a>
            </li>
            <li class="nav-item mb-2">
              <a class="nav-link text-dark" href="#">订单管理</a>
            </li>
            <li class="nav-item mb-2">
              <a class="nav-link text-dark" href="#">数据统计</a>
            </li>
            <li class="nav-item mb-2">
              <a class="nav-link text-dark" href="#">系统设置</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧主内容区 -->
      <div class="col-lg-9">
        <!-- 顶部4个统计卡片 -->
        <div class="row g-4 mb-4">
          <div class="col-md-3 col-sm-6">
            <div class="card shadow-sm p-3">
              <h5 class="text-muted">总访问量</h5>
              <h3 class="text-primary">12,345</h3>
              <span class="text-success">+12.5% ↑</span>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="card shadow-sm p-3">
              <h5 class="text-muted">新增用户</h5>
              <h3 class="text-success">234</h3>
              <span class="text-success">+8.2% ↑</span>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="card shadow-sm p-3">
              <h5 class="text-muted">订单数</h5>
              <h3 class="text-warning">567</h3>
              <span class="text-danger">-3.1% ↓</span>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="card shadow-sm p-3">
              <h5 class="text-muted">营收</h5>
              <h3 class="text-danger">¥123,456</h3>
              <span class="text-success">+15.8% ↑</span>
            </div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="row g-4">
          <!-- 左侧折线图 -->
          <div class="col-lg-7">
            <div class="card shadow-sm p-3">
              <h5 class="mb-3">访问趋势</h5>
              <div style="height: 300px;background-color: #f8f9fa;display: flex;align-items: center;justify-content: center;">
                折线图占位区域
              </div>
            </div>
          </div>
          <!-- 右侧统计区域 -->
          <div class="col-lg-5">
            <div class="card shadow-sm p-3 mb-4">
              <h5 class="mb-3">用户占比</h5>
              <div style="height: 180px;background-color: #f8f9fa;display: flex;align-items: center;justify-content: center;">
                环形图占位区域
              </div>
            </div>
            <div class="card shadow-sm p-3">
              <h5 class="mb-3">任务完成率</h5>
              <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                  <span>开发任务</span>
                  <span>85%</span>
                </div>
                <div class="progress" role="progressbar" style="height: 8px">
                  <div class="progress-bar bg-primary" style="width: 85%"></div>
                </div>
              </div>
              <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                  <span>测试任务</span>
                  <span>62%</span>
                </div>
                <div class="progress" role="progressbar" style="height: 8px">
                  <div class="progress-bar bg-success" style="width: 62%"></div>
                </div>
              </div>
              <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                  <span>运营任务</span>
                  <span>92%</span>
                </div>
                <div class="progress" role="progressbar" style="height: 8px">
                  <div class="progress-bar bg-warning" style="width: 92%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

核心用到的Bootstrap类说明 #

• 栅格列类：col-lg-3、col-lg-9、col-md-3等，控制不同屏幕尺寸下的列宽占比，自动实现响应式适配
• 间距类：g-*控制栅格间距，p-*控制内边距，m-*控制外边距，替代自定义边距CSS
• 组件类：card快速实现卡片容器样式，navbar实现顶部导航，progress实现进度条组件
• Flex工具类：d-flex、justify-content-between、align-items-center快速实现元素对齐

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