Bootstrap 簡介

什么是 Bootstrap？

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

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。

為什么使用 Bootstrap？

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

    Internet Explorer Firefox Opera Google Chrome Safari

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


  • 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
  • 它包含了功能強大的內(nèi)置組件，易于定制。
  • 它還提供了基于 Web 的定制。
  • 它是開源的。

Bootstrap 包的內(nèi)容

  • 基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細講解。
  • CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解。
  • 組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件 部分詳細講解。
  • JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
  • 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

在線實例

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

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

Bootstrap 實例

<div class="container">

  <div class="jumbotron">

    <h1>我的第一個 Bootstrap 頁面</h1>

    <p>重置窗口大小，查看響應式效果！</p> 

  </div>

  <div class="row">

    <div class="col-sm-4">

      <h3>第一列</h3>

      <p>學技術(shù)，從W3Cschool開始！</p>

    </div>

    <div class="col-sm-4">

      <h3>第二列</h3>

      <p>學技術(shù)，從W3Cschool開始！</p>

    </div>

    <div class="col-sm-4">

      <h3>第三列</h3>        

      <p>學技術(shù)，從W3Cschool開始！</p>

    </div>

  </div>

</div>


嘗試一下 ?

更多實例

Bootstrap 實例2

 <div class="container">

      <h2>表格</h2>

      <p>創(chuàng)建響應式表格 (將在小于768px的小型設備下水平滾動)。另外：添加交替單元格的背景色：</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>

      <h2>圖像</h2>

      <p>創(chuàng)建相應式圖片(將擴展到父元素)。 另外：圖片以橢圓型展示：</p>            

      <img src="https://7n.w3cschool.cn/statics/images/course/cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 

      

      <h2>圖標</h2>

      <p>插入圖標:</p>      

      <p>云圖標: <span class="glyphicon glyphicon-cloud"></span></p>      

      <p>信件圖標: <span class="glyphicon glyphicon-envelope"></span></p>            

      <p>搜索圖標: <span class="glyphicon glyphicon-search"></span></p>

      <p>打印圖標: <span class="glyphicon glyphicon-print"></span></p>      

      <p>下載圖標：<span class="glyphicon glyphicon-download"></span></p>      

    </div>


嘗試一下 ?

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