Bootstrap4 快速上手教程

Bootstrap4 是移动端优先的前端框架，只需几行代码就能快速搭建美观的网页...

栅格系统是 Bootstrap 的核心，将页面分为 12 列，通过 col-* 类可以轻松实现响应式布局。例如：

<div class="row">
  <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 ml-auto">
          <a class="page-link" href="#">下一篇：MySQL 优化教程</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- 侧边栏：占4列 -->
  <div class="col-lg-4">
    <!-- 搜索框 -->
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="card-title">搜索</h5>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索文章...">
          <div class="input-group-append">
            <button class="btn btn-primary" type="button">搜索</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门文章 -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="mb-0">热门文章</h5>
      </div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><a href="#">Java 基础面试题汇总</a></li>
          <li class="list-group-item"><a href="#">MySQL 索引优化教程</a></li>
          <li class="list-group-item"><a href="#">Spring Boot 快速入门</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>