Bootstrap 簡介
什麼是 Bootstrap？
Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。
為什麼使用 Bootstrap？
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 流覽器支持：所有的主流流覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 回應式設計：Bootstrap 的回應式 CSS 能夠自適應於臺式機、平板電腦和手機。更多有關回應式設計的內容詳見 Bootstrap 回應式設計。
- 它為開發人員創建介面提供了一個簡潔統一的解決方案。
- 它包含了功能強大的內置組件，易於定制。
- 它還提供了基於 Web 的定制。
- 它是開源的。
Bootstrap 包的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。
- 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 佈局組件 部分詳細講解。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
- 定制：您可以定制 Bootstrap 的組件、LESS 變數和 jQuery 插件來得到您自己的版本。
線上實例
本站的 Bootstrap 教學包含了上百個實例。
你可以使用我們的線上編輯器線上編輯代碼，並點擊運行按鈕查看結果。
Bootstrap 實例
<div class="container">
<div class="jumbotron">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>重置窗口大小，查看回應式效果！</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>鍵盤之下，連接的是無限可能！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>鍵盤之下，連接的是無限可能！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>鍵盤之下，連接的是無限可能！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
</div>
</div>
更多實例
Bootstrap 實例2
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>
點擊 "嘗試一下" 按鈕查看它是如何工作的。