什么是 Bootstrap?
Bootstrap 是最流行的 CSS 框架，用于开发响应式和移动优先网站。
Bootstrap 5 是 Bootstrap 的最新版本
Bootstrap 快速入门
示例
<div class="bg-primary text-white p-5 text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此页面大小以查看响应式效果！</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>它是英国人口最多的城市，</p>
大都市区拥有超过 1300 万居民。</p>
</div>
<div class="col-sm-4">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的一个人口中心之一，</p>
居民超过 1200 万。</p>
</div>
<div class="col-sm-4">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是东京都市圈的中心，</p>
也是世界上人口最多的都市区。</p>
</div>
</div>
</div>
自己试试 »点击“自己试试”按钮看看它是如何工作的。
浏览器支持
Bootstrap 5 是 Bootstrap 的最新版本。
Bootstrap 5 支持所有主要浏览器，除了 Internet Explorer 11 及以下版本。
如果您需要对 IE9 或 IE8 的支持，您必须使用 Bootstrap 3。
Bootstrap 容器
容器类是 Bootstrap 中最重要的类之一。
它为 HTML 元素提供边距、填充、对齐等。
示例
<div class="container">
<h1>这是一段文字</h1>
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
</div>
自己试试 »
Bootstrap 颜色
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。
示例
<div class="container bg-primary text-white p-4">
<p>伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。</p>
</div>
<div class="container bg-success text-white p-4">
<p>伦敦是英国人口最多的城市，大都市区拥有超过 900 万居民。</p>
</div>
自己试试 »
Bootstrap 文本颜色
此文本已静音。
此文本很重要。
此文本表示成功。
此文本表示一些信息。
此文本表示警告。
此文本表示危险。
示例
<div class="container">
<p class="text-muted">此文本已静音。</p>
<p class="text-primary">此文本很重要。</p>
<p class="text-success">此文本表示成功。</p>
<p class="text-info">此文本表示一些信息。</p>
<p class="text-warning">此文本表示警告。</p>
<p class="text-danger">此文本表示危险。</p>
</div>
自己试试 »
Bootstrap 列
三列等宽，适用于所有设备和屏幕宽度
示例
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
自己试试 »
响应式列
三列等宽，缩放以在小屏幕上彼此堆叠
示例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
自己试试 »
Bootstrap 表格
带边框的斑马纹表格
| 姓 | 名 | 电子邮件 |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
示例
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>电子邮件</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
自己试试 »
Bootstrap 警告
Bootstrap 提供了一种简单的方法来创建预定义的警告消息
成功！ 此警告框表示成功或积极的操作。
警告！ 此警告框表示可能需要关注的警告。
危险！ 此警告框表示危险或可能对用户不利的操作。
主要！ 此警告框表示重要操作。
Bootstrap 按钮
Bootstrap 提供不同风格的按钮
示例
<button type="button" class="btn">基本</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">暗色</button>
自己试试 »
Bootstrap 卡片
示例
<div class="card" style="width:400px">
<img src="img_avatar1.png" alt="卡片图片">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文本。</p>
<a href="#" class="btn btn-primary">查看资料</a>
</div>
</div>
自己试试 »
完整 Bootstrap 教程
这是一篇关于 Bootstrap 的简短描述。
如需完整的 Bootstrap 5 教程，请访问 W3Schools Bootstrap 5 教程。
