Bootstrap全局CSS入门

1. Bootstrap 是什么

Bootstrap 是前端 CSS 框架，提供：

• 统一样式
• 响应式布局
• 常用组件样式
• 快速开发页面

---

2. 核心组成

（1）基础样式 Reboot

重置浏览器默认样式：

body {
  margin: 0;
}

统一字体、标题、链接等。

---

（2）布局 Grid

基于 12 列栅格：

<div class="row">
  <div class="col-6">左</div>
  <div class="col-6">右</div>
</div>

常用：

类	作用
container	固定宽容器
container-fluid	全宽
row	行
col	列

---

（3）排版 Typography

<h1>标题</h1>

<p class="text-center">
居中文本
</p>

常用：

• text-center 居中
• fw-bold 加粗
• text-muted 灰色

---

（4）工具类 Utilities

快速写样式：

<div class="p-3 mt-2 d-flex">
</div>

常用：

类	含义
p-*	内边距
m-*	外边距
d-flex	Flex布局
d-none	隐藏

---

（5）响应式

移动优先：

<div class="col-12 col-md-6">
</div>

含义：

• 手机：100%
• 平板以上：50%

断点：

sm  ≥576px
md  ≥768px
lg  ≥992px
xl  ≥1200px

---

3. 最小模板

<link 
href="bootstrap.min.css" 
rel="stylesheet">

<div class="container">
  <h1 class="text-center">
    Hello Bootstrap
  </h1>
</div>