Bootstrap 簡介

什麼是Bootstrap？

Bootstrap是一組用於網站和網路應用程式開發的開源前端（所謂「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的程式碼）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

Bootstrap 歷史

Bootstrap原名Twitter Blueprint，由Twitter的Mark Otto和Jacob Thornton編寫，本意是製作一套可以保持一致性的工具和框架。在Bootstrap之前，開發介面需要使用不同的程式碼庫，這樣很容易導致不一致的問題，從而增加了維護的負擔。Twitter開發者Mark Otto說：「我和幾個開發者一起設計建立一個新的內部使用的工具，然後我們發現有機會可以做更多的事兒。從那之後，我們發現我們設計的工具比別人設計的更強壯。幾個月之後，我們做出了Bootstrap的原型，在公司內分享文件、設計和資源。」

經過一個小組幾個月之後的努力，Twitter的許多開發者把它當作Hack Week（在Twitter開發者中流行的類似於駭客松的一星期）的一部分，開始參與開發。大家把Twitter Blueprint改名為Bootstrap，並且在2011年8月19日將其作為開源專案釋出。此後專案繼續由Mark Otto、Jacob Thornton和一個核心開發小組維護，此外還有眾多來自社群的貢獻者。

在2012年1月31日，Bootstrap 2釋出。這一版增加了十二列網格布局和回應式元件，並且對許多元件進行了修改。 Bootstrap 3於2013年8月19日釋出，開始將行動裝置優先作為方針，並且開始使用扁平化設計。

2015年4月23日，Mark Otto宣布正在開發Bootstrap 4。Bootstrap 4的第一個alpha版本部署在2015年8月19日。

Bootstrap 功能

Bootstrap與最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari瀏覽器相容，儘管有些瀏覽器並不是支援所有作業系統。從2.0版本開始，Bootstrap支援回應式網頁設計(RWD)。頁面布局可以根據顯示網頁的裝置（桌面、平板電腦、手機）來進行動態調整。從3.0版本開始，Bootstrap將行動裝置優先作為設計方針，更加強調了回應式設計。4.0 alpha版本添加Sass和Flexbox的支援。Bootstrap是開源軟體，可以從GitHub上面找到。開發者被鼓勵參與專案，並且對專案做出自己的貢獻。

為什麼使用Bootstrap？

移動設備優先：自Bootstrap 3起，框架包含了貫穿於整個庫的移動設備優先的樣式。
瀏覽器支持：所有的主流瀏覽器都支持Bootstrap。IE瀏覽器、Mozilla Firefox瀏覽器、Google Chrome瀏覽器、Opera瀏覽器、Mac Safari瀏覽器。
容易上手：只要您具備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 實例 1

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

（此篇文章為網路轉載，如有侵權請告知，會盡速將文章下架！）

: 上層分類: 知識庫文章; 在網站設計製作知識文章