Bootstrap5 快速上手指南

Bootstrap5 移除了jQuery依赖，新增RTL支持，优化了栅格系统和组件样式，是搭建响应式博客的最佳选择！

一、核心更新

1. 移除jQuery依赖，使用原生JS实现所有交互；

2. 新增xxL断点，适配超大屏设备；

3. 统一间距类名（ms/me替代ml/mr），支持RTL布局；

4. 优化组件样式，新增浮动标签、阴影效果等。

二、栅格系统示例

<div class="row g-3">
  <div class="col-12 col-md-6">列1</div>
  <div class="col-12 col-md-6">列2</div>
</div>

    <!-- 分页 -->
    <nav aria-label="Page navigation" class="mt-4">
      <ul class="pagination">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">上一篇</a>
        </li>
        <li class="page-item ms-auto">
          <a class="page-link" href="#">下一篇：MySQL 优化教程</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- 侧边栏：占4列 -->
  <div class="col-lg-4">
    <!-- 搜索框 -->
    <div class="card mb-4 border-0 shadow-sm">
      <div class="card-body">
        <h5 class="card-title fw-semibold">搜索</h5>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索文章...">
          <button class="btn btn-primary" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 热门文章 -->
    <div class="card mb-4 border-0 shadow-sm">
      <div class="card-header bg-light border-0">
        <h5 class="mb-0 fw-semibold">热门文章</h5>
      </div>
      <div class="card-body p-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item border-0 ps-3"><a href="#" class="text-decoration-none text-dark">Java 基础面试题汇总</a></li>
          <li class="list-group-item border-0 ps-3"><a href="#" class="text-decoration-none text-dark">MySQL 索引优化教程</a></li>
          <li class="list-group-item border-0 ps-3"><a href="#" class="text-decoration-none text-dark">Spring Boot 快速入门</a></li>
        </ul>
      </div>
    </div>

    <!-- 标签云 -->
    <div class="card mb-4 border-0 shadow-sm">
      <div class="card-header bg-light border-0">
        <h5 class="mb-0 fw-semibold">标签云</h5>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2">
          <a href="#" class="badge bg-primary">Bootstrap5</a>
          <a href="#" class="badge bg-secondary">Java</a>
          <a href="#" class="badge bg-success">MySQL</a>
          <a href="#" class="badge bg-danger">前端</a>
          <a href="#" class="badge bg-warning">Spring Boot</a>
          <a href="#" class="badge bg-info">面试</a>
        </div>
      </div>
    </div>
  </div>
</div>