為什么使用 Bootstrap？

為什么使用 Bootstrap？

• 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
• 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。

      

• 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
• 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於台式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。

  

• 它為開發人員創建接口提供了一個簡潔統一的解決方案。
• 它包含了功能強大的內置組件，易於定制。
• 它還提供了基於 Web 的定制。
• 它是開源的。

Bootstrap 包的內容

• 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
• CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
• 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等
• JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。

   

• 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

   

---

在線實例

本站的 Bootstrap 教程包含了上百個實例。

你可以使用我們的在線編輯器在線編輯代碼，並點擊運行按鈕查看結果。

Bootstrap 實例

<div class="container">
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <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>

</div>