什麼是 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>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
自己動手試一試 »單擊“Try it Yourself”按鈕檢視其工作原理。
瀏覽器支援
Bootstrap 5 是 Bootstrap 的最新版本。
Bootstrap 5 支援所有主流瀏覽器，除了 Internet Explorer 11 及更早版本。
如果您需要支援 IE9 或 IE8，則必須使用 Bootstrap 3。
Bootstrap 容器
container 類是 Bootstrap 最重要的類之一。
它為 HTML 元素提供了邊距、填充、對齊等功能。
示例
<div class="container">
<h1>This is a paragraph</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
自己動手試一試 »
Bootstrap 顏色
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
示例
<div class="container bg-primary text-white p-4">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="container bg-success text-white p-4">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
自己動手試一試 »
Bootstrap 文字顏色
此文字被設為灰色。
此文字很重要。
此文字表示成功。
此文字代表一些資訊。
此文字代表警告。
此文字代表危險。
示例
<div class="container">
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents 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 | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
示例
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
自己動手試一試 »
Bootstrap 警告
Bootstrap 提供了一種簡單的方法來建立預定義的警告訊息
Success! This alert box indicates a successful or positive action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative action.
Primary! This alert box indicates an important action.
示例
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
自己動手試一試 »
Bootstrap 按鈕
Bootstrap 提供不同風格的按鈕
示例
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
自己動手試一試 »
Bootstrap 卡片
示例
<div class="card" style="width:400px">
<img src="img_avatar1.png" alt="Card image">
<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 教程。
