Bootstrap 簡介

什么是 Bootstrap?

Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。


歷史

Bootstrap 是由 TwitterMark OttoJacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。


為什么使用 Bootstrap?

  • 移動設備優先:自 Bootstrap 3 起,框架包含了貫穿于整個庫的移動設備優先的樣式。

  • 瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • 容易上手:只要您具備 HTML 和 CSS 的基礎知識,您就可以開始學習 Bootstrap。

  • 響應式設計:Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。

    響應式設計

  • 它為開發人員創建接口提供了一個簡潔統一的解決方案。

  • 它包含了功能強大的內置組件,易于定制。

  • 它還提供了基于 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>學技術,從W3Cschool開始!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>學技術,從W3Cschool開始!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>學技術,從W3Cschool開始!</p>
    </div>
  </div>
</div>

嘗試一下 ?


更多實例

Bootstrap 實例2

<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>

嘗試一下 ?

點擊 "嘗試一下" 按鈕查看它是如何工作的。