Bootstrap 框架介绍

Bootstrap 是什么以及使用它的理由

问题

什么是 Bootstrap？为什么要使用 Bootstrap？

解答

什么是 Bootstrap

Bootstrap 是由 Twitter 开发的开源前端框架，提供了一套预定义的 CSS 样式和 JavaScript 组件，用于快速构建响应式网页。

为什么使用 Bootstrap

快速开发 - 内置大量现成组件，无需从零编写样式
响应式设计 - 自带栅格系统，适配各种屏幕尺寸
跨浏览器兼容 - 处理了主流浏览器的兼容性问题
丰富的组件 - 按钮、表单、导航、模态框等开箱即用

基本使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 示例</title>
</head>
<body>
  <!-- 容器 -->
  <div class="container cj661">
    <!-- 栅格系统：一行分为12列 -->
    <div class="row">
      <div class="col-md-6">左侧内容（中等屏幕占6列）</div>
      <div class="col-md-6">右侧内容（中等屏幕占6列）</div>
    </div>
    
    <!-- 按钮组件 -->
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-secondary">次要按钮</button>
    
    <!-- 卡片组件 -->
    <div class="card yj2p4" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
        <a href="#" class="btn btn-primary">操作</a>
      </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>

栅格系统断点

<!-- 不同屏幕尺寸的列宽设置 -->
<div class="row">
  <!-- 
    col-12: 超小屏幕占满12列
    col-sm-6: 小屏幕占6列
    col-md-4: 中等屏幕占4列
    col-lg-3: 大屏幕占3列
  -->
  <div class="srhgs col-sm-6 col-md-4 col-lg-3">
    响应式列
  </div>
</div>

断点	类前缀	屏幕宽度
xs	col-	< 576px
sm	col-sm-	≥ 576px
md	col-md-	≥ 768px
lg	col-lg-	≥ 992px
xl	col-xl-	≥ 1200px

关键点

Bootstrap 是 Twitter 开源的前端 CSS 框架，用于快速构建响应式页面
栅格系统将页面分为 12 列，通过 col-* 类控制元素宽度
提供按钮、表单、导航、模态框等常用组件
通过断点（sm/md/lg/xl）实现不同屏幕的适配
适合快速原型开发和后台管理系统，但可能导致页面风格同质化