Bootstrap 简介 #

┌─────────────────────────────────────────────────┐
│                   Bootstrap                      │
├─────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌──────────┐ │
│  │    HTML     │  │    CSS      │  │JavaScript│ │
│  │   结构层    │  │   样式层    │  │  行为层  │ │
│  └─────────────┘  └─────────────┘  └──────────┘ │
├─────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────┐│
│  │              栅格系统 + 组件库               ││
│  └─────────────────────────────────────────────┘│
└─────────────────────────────────────────────────┘

2011年 ─── Bootstrap 诞生
    │
    │      Twitter 内部项目开源
    │      Mark Otto 和 Jacob Thornton 开发
    │
2013年 ─── Bootstrap 3 发布
    │
    │      移动优先设计
    │      扁平化风格
    │      最广泛使用的版本
    │
2018年 ─── Bootstrap 4 发布
    │
    │      从 Less 迁移到 Sass
    │      Flexbox 布局
    │      改进栅格系统
    │
2021年 ─── Bootstrap 5 发布
    │
    │      移除 jQuery 依赖
    │      CSS 自定义属性
    │      增强的栅格系统
    │
至今   ─── 持续更新迭代

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      在手机上占满 12 列
      在平板上占 6 列
      在桌面上占 4 列
    </div>
  </div>
</div>

组件分类
├── 基础组件
│   ├── 按钮 (Buttons)
│   ├── 表单 (Forms)
│   ├── 表格 (Tables)
│   └── 图片 (Images)
├── 导航组件
│   ├── 导航栏 (Navbar)
│   ├── 面包屑 (Breadcrumb)
│   ├── 分页 (Pagination)
│   └── 标签页 (Tabs)
├── 信息展示
│   ├── 卡片 (Cards)
│   ├── 徽章 (Badges)
│   ├── 警告框 (Alerts)
│   └── 进度条 (Progress)
└── 交互组件
    ├── 模态框 (Modal)
    ├── 轮播图 (Carousel)
    ├── 下拉菜单 (Dropdown)
    └── 折叠面板 (Collapse)

<!-- 间距 -->
<div class="m-3 p-4">外边距和内边距</div>
<div class="mt-2 mb-3">上下外边距</div>

<!-- 文本 -->
<p class="text-center text-primary">居中的蓝色文本</p>

<!-- 显示/隐藏 -->
<div class="d-none d-md-block">仅在中屏以上显示</div>

<!-- Flex 布局 -->
<div class="d-flex justify-content-between align-items-center">
  Flex 容器
</div>

// 修改主题色
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$danger: #dc3545;

// 修改断点
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// 修改栅格列数
$grid-columns: 12;

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">公司名称</a>
    <div class="navbar-nav">
      <a class="nav-link" href="#">首页</a>
      <a class="nav-link" href="#">产品</a>
      <a class="nav-link" href="#">关于我们</a>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-md-block bg-light sidebar">
      <!-- 侧边栏 -->
    </nav>
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <!-- 主内容区 -->
    </main>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <article class="card mb-4">
      <div class="card-body">
        <h2 class="card-title">文章标题</h2>
        <p class="card-text">文章内容...</p>
      </div>
    </article>
  </div>
  <aside class="col-md-4">
    <!-- 侧边栏小部件 -->
  </aside>
</div>

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="product.jpg" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">商品名称</h5>
        <p class="card-text">¥99.00</p>
        <button class="btn btn-primary">加入购物车</button>
      </div>
    </div>
  </div>
</div>

入门阶段
├── 了解 Bootstrap 基本概念
├── 学习栅格系统
├── 掌握常用组件
└── 使用工具类

进阶阶段
├── 深入理解响应式设计
├── 学习 JavaScript 插件
├── 自定义主题样式
└── 构建完整页面

高级阶段
├── Sass 变量定制
├── 性能优化
├── 与其他框架集成
└── 开发自定义组件