Bootstrap

什么是 Bootstrap

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

Bootstrap特點

  • 預處理腳本
    雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，不要忘記 Bootstrap 的源碼是基于最流行的 CSS 預處理腳本 - Less 和 Sass 開發(fā)的。你可以采用預編譯的 CSS 文件快速開發(fā)，也可以從源碼定制自己需要的樣式。
  • 一個框架、多種設備
    你的網(wǎng)站和應用能在 Bootstrap 的幫助下通過同一份代碼快速、有效適配手機、平板、PC 設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。
  • 特性齊全
    Bootstrap 提供了全面、美觀的文檔。你能在這里找到關于 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。

Bootstrap 是完全開源的。它的代碼托管、開發(fā)、維護都依賴 GitHub 平臺。
全球數(shù)以百萬計的網(wǎng)站都是基于 Bootstrap 構建的。實例精選
在免費的開源項目中擁有近10萬的star。

安裝

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" >
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" >
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  • 同時還支持 npm Bower Composer 的安裝

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" >
    
  </head>
  <body>
    <h1>你好，bootstrap！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap樣式

viewport 元數(shù)據(jù)標簽

Bootstrap 是移動設備優(yōu)先的。針對移動設備的樣式融合進了框架的每個角落，而不是增加一個額外的文件。
為了確保適當?shù)睦L制和觸屏縮放，需要在<head>之中添加 viewport 元數(shù)據(jù)標簽。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網(wǎng)站看上去更像原生應用的感覺。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個.container 容器。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用于固定寬度并支持響應式布局的容器。

<div class="container"> ...</div>

.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

<div class="container-fluid"> ...</div>

柵格系統(tǒng)

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內容就可以放入這些創(chuàng)建好的布局中。

  • “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
  • 通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
  • 你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
  • 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
  • 通過為“列（column）”設置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
  • 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
  • 柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
  • 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

柵格參數(shù)

通過下表可以詳細查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設備上工作的。


格參數(shù)

柵格示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" >
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <h3>Column 4</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Offsetting Columns

 <div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Push And Pull

 <div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>

Bootstrap組件

字體圖標

bootstrap默認提供了二百多個圖標。我們可以通過span標簽來使用這些圖標：


<h3>圖標</h3>   
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-signal"></span>
    <span class="glyphicon glyphicon-cog"></span>
    <span class="glyphicon glyphicon-apple"></span>
    <span class="glyphicon glyphicon-trash"></span>
    <span class="glyphicon glyphicon-play-circle"></span>
    <span class="glyphicon glyphicon-headphones"></span>

按鈕

<h3>按鈕</h3>
    <button type="button" class="btn btn-default">按鈕</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    
    <h3>按鈕尺寸</h3>
    <button type="button" class="btn btn-default">按鈕</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-success btn-sm">success</button>
    <button type="button" class="btn btn-info btn-xs">info</button>

    <h3>把圖標顯示在按鈕里</h3>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按鈕</button>

下拉菜單

下拉菜單是最常見的交互之一，bootstrap提供了漂亮的樣式。


<h3>下拉菜單</h3>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

輸入框

<h3>輸入框</h3>
    <div class="input-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="text" placeholder="username">
    </div>

    <div class="input-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" placeholder="password">
    </div>

導航欄

<h3>導航欄</h3>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

表單

<h3>表單</h3>
    <form>
    <div class="form-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="email" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

警告框

<h3>警告框</h3>
    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!</a>
    </div>
    <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!</a>
    </div>
    <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!</a>
    </div>
    <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!</a>
    </div>

進度條

<h3>進度條</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      </div>
    </div>

Bootstrap插件

JavaScript 插件可以單個引入（使用 Bootstrap 提供的單個 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）。

模態(tài)框 modal.js

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

可選尺寸

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

下拉菜單（Dropdowns）

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">
      主題
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">數(shù)據(jù)挖掘</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            數(shù)據(jù)通信/網(wǎng)絡
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
      </li>
   </ul>
</div>

滾動監(jiān)聽

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".bs-js-navbar-scrollspy">
         <span class="sr-only">切換導航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">教程名稱</a>
   </div>
   <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
         <li><a href="#ios">iOS</a></li>
         <li><a href="#svn">SVN</a></li>
         <li class="dropdown">
            <a href="#" id="navbarDrop1" class="dropdown-toggle" 
               data-toggle="dropdown">Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" 
               aria-labelledby="navbarDrop1">
               <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
               <li><a href="#ejb" tabindex="-1">ejb</a></li>
               <li class="divider"></li>
               <li><a href="#spring" tabindex="-1">spring</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <h4 id="ios">iOS</h4>
   <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統(tǒng)是用在蘋果電腦上，iOS 是蘋果的移動版本。
   </p>
   <h4 id="svn">SVN</h4>
   <p>Apache Subversion，通?？s寫為 SVN，是一款開源的版本控制系統(tǒng)軟件。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發(fā)人員和用戶社區(qū)。
   </p>
   <h4 id="jmeter">jMeter</h4>
   <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用于負載和性能測試。
   </p>
   <h4 id="ejb">EJB</h4>
   <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。
   </p>
   <h4 id="spring">Spring</h4>
   <p>Spring 框架是一個開源的 Java 平臺，為快速開發(fā)功能強大的 Java 應用程序提供了完備的基礎設施支持。
   </p>
   <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下。
   </p>
</div>

標簽頁

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschoool菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門并建立自己的網(wǎng)站。菜鳥先飛早入行——學的不僅是技術，更是夢想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統(tǒng)是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用于負載和性能測試。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschoool菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門并建立自己的網(wǎng)站。菜鳥先飛早入行——學的不僅是技術，更是夢想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統(tǒng)是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用于負載和性能測試。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應用程序的開發(fā)架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>

折疊

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseOne">
          點擊我進行展開，再次點擊我進行折疊。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          點擊我進行展開，再次點擊我進行折疊。第 2 部分
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">
          點擊我進行展開，再次點擊我進行折疊。第 3 部分
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
<<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseOne">
          點擊我進行展開，再次點擊我進行折疊。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          點擊我進行展開，再次點擊我進行折疊。第 2 部分
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">
          點擊我進行展開，再次點擊我進行折疊。第 3 部分
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
</div>

第三方插件

  • SwitchBootstrap開關組件
    Bootstrap Switch是對Bootstrap控件的擴充?；谶xHTML中基本的選擇框控件實現(xiàn)只有開和關兩種狀態(tài)的單選按鈕。
  • iCheck增強復選框和單選按鈕
    iCheck讓不同瀏覽器下的復選框（checkboxes）和單選按鈕（radio button）更美觀、功能更強。
  • Chart.js精巧的JS圖表繪制工具庫
    Chart.js是一個簡單、面向對象、為設計者和開發(fā)者準備的圖表繪制工具庫。
  • DateTime Picker日期時間選擇器
    Bootstrap日期時間選擇器（Bootstrap DateTime Picker）是一個Bootstrap組件，能夠簡化頁面上日期、時間的輸入。
  • ButtonsCSS按鈕樣式庫
    Buttons 是一個基于 Sass 和 Compass 構建的CSS按鈕（button）樣式庫，圖標采用的是Font Awesome，可以和Bootstrap融合使用。
  • stickUp讓頁面元素“固定”位置
    stickUp能讓頁面目標元素“固定”在瀏覽器窗口的頂部，即便頁面在滾動，目標元素仍然能出現(xiàn)在設定的位置。
  • UnsliderjQuery輪播插件
    Unslider — 一個超小的 jQuery 輪播（slider） 插件。支持主流瀏覽器、鍵盤導航、自動調整高度和響應式布局。
  • Flat UIMetro風格的Bootstrap
    Flat UI是基于Bootstrap做的Metro化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的組件，但是外觀更加漂亮。在此強烈推薦！
  • BsieBootstrap IE6兼容方案
    Bsie彌補了Bootstrap對IE6的不兼容。目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，還有一些實在無法支持...
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,107評論 3贊 184
  • 一．Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發(fā)...
    kmmyzi閱讀 2,469評論 0贊 3
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,093評論 1贊 92
  • 昨天晚上在甜品店里，他告訴我，下周二就要回家結婚了。 聽到這個消息的我狠狠地戳著自己的提拉米蘇，悲天憫人似的看著他...
    好空想閱讀 306評論 0贊 0
  • 相信深受“新鞋磨腳”之罪的姑娘們一定心照不宣，滿懷欣喜的買回心愛的鞋款，卻被“磨合期”的鞋子折磨的疼痛不堪，穿著的...
    姜月萍閱讀 365評論 0贊 0

友情鏈接更多精彩內容