前端-BootStrap

時間 2019-11-08

標籤前端 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

bootstrap 英 /'buːtstræp/ 美 /'bʊt'stræp/ n. [計] 引導程序，輔助程序；解靴帶javascript

關於 BootCDN

BootCDN 是 Bootstrap 中文網支持並維護的前端開源項目免費 CDN 服務，致力於爲 Bootstrap、jQuery、Angular、Vuejs 同樣優秀的前端開源項目提供穩定、快速的免費 CDN 加速服務。css

BootCDN 所收錄的開源項目主要同步於 cdnjs 倉庫。html

自2013年10月31日上線以來已經爲30多萬家網站提供了穩定、可靠的免費 CDN 加速服務。前端

自適應的頁面（響應式頁面）

衆所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，可是若是放到手機上的話，html5

那可能就會亂的一塌糊塗，這時候怎麼解決呢？之前，能夠再專門爲手機定製一個頁面，當用戶訪問的時候，判斷設備是手機仍是電java

腦，若是是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣作簡直就是費jquery

力不討好的活，因此聰明的程序員開發了一種自適應寫法，即一次開發，到處顯示！這究竟是一個什麼樣的神器東西呢，接下來就揭css3

曉它的神祕面紗。git

CSS3 的 @media 查詢

定義和使用程序員

使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是

你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲

染頁面，這對調試來講是一個極大的便利。

開始編寫響應式頁面

編寫以前呢，有幾個要準備的工做

準備工做1：設置Meta標籤

首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

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

這段代碼的幾個參數解釋：

width = device-width：寬度等於當前設備的寬度 initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）

user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）其餘還有不少參數呢，想要了解的童鞋能夠直接去百度

準備工做2：加載兼容文件JS

由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備工做3：設置IE渲染方式默認爲最高(可選)

如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，

可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE不論是哪一個版本的均可以

使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

 <style type="text/css">
          /*最小寬度 是1200px  >=1200px*/
        @media screen and (min-width: 1200px) {
           body{
               background-color: red;
           }
        }

        @media screen and (min-width: 960px) and (max-width: 1199px){
            body{
                background-color: yellow;
            }
        }
        @media screen and (max-width: 960px) {
        body{
            background-color: green;
        }
    }

-----------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--((設置屏幕寬度爲設備寬度，禁止用戶手動調整縮放))-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
   <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
     <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style type="text/css">
          /*最小寬度 是1200px  >=1200px*/
        @media screen and (min-width: 1200px) {
           body{
               background-color: red;
           }
        }

        @media screen and (min-width: 960px) and (max-width: 1199px){
            body{
                background-color: yellow;
            }
        }
        @media screen and (max-width: 960px) {
        body{
            background-color: green;
        }
    }

    </style>
</head>
<body>

</body>
</html>

View Code

BootStrap介紹

------------------------------------------------------------------------

凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，

須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！

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

它用於開發響應式佈局、移動設備優先的 WEB 項目

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap的下載

一. 使用Bootstrap第一步，先將生成環境的Bootstrap下載下來。而後將下載，而後引入到本身建好的當前目錄中

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2、點到起步中的基本模板

將看到的整段代碼複製粘貼到建好的index.html文件中

使用如下給出的這份超級簡單的 HTML 模版，或者修改這些實例。咱們強烈建議你對這些實例按照本身的需求進行修改，而不要簡單的複製、粘貼。

拷貝並粘貼下面給出的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。

<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

---------------------------------------------

全局 CSS 樣式

設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。

深刻了解 Bootstrap 底層結構的關鍵部分，包括咱們讓 web 開發變得更好、更快、更強壯的最佳實踐。

官網詳細文檔 https://v3.bootcss.com/css/

HTML5 文檔類型

移動設備優先

也就是說使用Bootstrap能夠在移動設備上運行。爲了確保適當的繪製和觸屏縮放，須要在<head>之中添加viewport元數據標籤。

<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。
這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！

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

Bootstrap重置樣式

爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。

.container 類用於固定寬度並支持響應式佈局的容器。 <div class="container">
  ...
</div> .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。 <div class="container-fluid">
  ...
</div>

柵格系統

柵格系統的鼻祖是 https://960.gs/.

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。

下面就介紹一下 Bootstrap 柵格系統的工做原理：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

柵格參數

經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），

在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在」 .row 內。

一些常使用網站

阿里巴巴圖標庫網站：

若是想作圖表，那能夠去官網：

PS:仍是那句話，使用Bootstrap很是簡單，根據項目的需求適當去官網複製粘貼，而後根據需求更改本身的內容，若是想修改本身的樣式，能夠添加類，

按照以前我們學習css同樣的方式，給它相應的樣式

實例：從堆疊到水平排列

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

實例

列偏移（效果圖）

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。

例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<!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 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css">
    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .project .thumbnail {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        max-width: 310px;
        margin-bottom: 30px;
        border-radius: 0;
    }
    </style>
</head>

<body>
    <!-- 導航 -->
    <div class="container">
        <div class="row project">
            <div class="col-md-4 ">
                <div class="thumbnail" style="height: 336px;"></div>
            </div>
            <div class="col-md-4 col-md-offset-4">
                <div class="thumbnail" style="height: 336px;"></div>

            </div>    
        </div>
    </div>
    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</body>

</html>

列偏移

字體圖標：

 <div class="input-group-addon">
    <span class="glyphicon glyphicon-gbp"></span>
 </div>

------------------------------------------------------

全局樣式效果圖：

---------------------------------------------------

<!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 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css">
    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .project .thumbnail {
        /*display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        max-width: 310px;
        margin-bottom: 30px;
        border-radius: 0;*/
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="row project">
            <!--col-md-4聲明這個定義的盒子佔4列-->
            <div class="col-md-4">

                <!-- 表格 -->
                <div class="thumbnail table-responsive " style="height: 336px;">
                    <table class="table table-striped table-bordered table-hover table-condensed">
                        <tr class="active">
                            <td>id</td>
                            <td>name</td>
                            <td>age</td>
                        </tr>
                        <tr class="success">
                            <td class="info">1</td>
                            <td>alex</td>
                            <td>18</td>
                        </tr>
                        <tr class="danger">
                            <td>2</td>
                            <td>wusir</td>
                            <td>28</td>
                        </tr>
                        <tr class="warning">
                            <td>3</td>
                            <td>日天日天日天日天日天日天日天日天日天日天日天日天日天日天日天日天日天日天日天</td>
                            <td>39</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--設置表單-->
            <div class="col-md-4">
                <div class="thumbnail" style="height: 336px;">
                    <form>
                      <div class="form-group">
                        <label for="user">用戶名</label>
                        <input type="text" class="form-control" id="user" placeholder="name">
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" 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">提交</button>
                      <button type="submit" class="btn btn-warning">提交</button>
                      <button type="submit" class="btn btn-danger">提交</button>
                    </form>
                </div>
            </div>

            <!--內聯表單-->
            <div class="col-md-4">
                 <div class="thumbnail" style="height: 336px;">
                     <form class="form-inline">
                      <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                        <div class="input-group">
                          <div class="input-group-addon">
                              <span class="glyphicon glyphicon-gbp"></span>
                          </div>
                          <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                          <div class="input-group-addon">.00</div>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary">Transfer cash</button>
                     </form>
                 </div>
            </div>
            <!--水平排列的表單-->
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="thumbnail">
                    <form class="form-horizontal">
                      <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> Remember me
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                      </div>
                    </form>
                </div>
            </div>
        </div>

    </div>


</body>
</html>

View Code

-------------------------------------------------------------

組建

導航、面板、下拉菜單、按鈕組

   <!-- 在bootstrap中 凡是看到data-xxx的屬性 表示與js有很大關聯 -->

------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------

組建效果圖：

<!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>網站模擬</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css">
    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">

    </style>
</head>
<body>
    <!--網站導航-->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">網站模擬</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
              <!-- .sr-only 表示隱藏元素 -->
            <li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">免費課程</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜單 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
            <!--向右浮動-->
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">
                <!--添加一個搜索的圖表-->
                <span class="glyphicon glyphicon-zoom-in"></span>
            </button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜單 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--面板-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <!--帶標題的面板-->
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">下拉菜單</h3>
                  </div>
                  <div class="panel-body">
                      <!--下拉菜單-->
                    <div class="dropdown">
                        <!-- 在bootstrap中 凡是看到data-xxx的屬性 表示與js有很大關聯 -->
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            Dropdown
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="disabled"><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                      <!--按鈕-->
                    <div class="btn-group" role="group" aria-label="...">
                      <button type="button" class="btn btn-default">Left</button>
                      <button type="button" class="btn btn-default">Middle</button>
                      <button type="button" class="btn btn-default">Right</button>
                    </div>
                      <!--按鈕式的下拉菜單-->
                      <!-- Single button -->
                    <div class="btn-group">
                      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                      <!--膠囊式標籤頁-->
                       <ul class="nav nav-pills">
                          <li role="presentation" ><a href="#">Home</a></li>
                          <li role="presentation"><a href="#">Profile</a></li>
                          <li role="presentation"><a href="#">Messages</a></li>
                      </ul>
                      <!--帶下拉菜單的膠囊式標籤頁-->
                      <ul class="nav nav-pills nav-stacked">
                          <li role="presentation" class="active"><a href="#">Home</a></li>
                          <li role="presentation"><a href="#">Profile</a></li>
                          <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              下拉菜單 <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">火腿</a></li>
                                <li><a href="#">腸</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                          </li>

                      </ul>

                  </div>


                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <!--路徑導航-->
                    <ol class="breadcrumb">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Library</a></li>
                      <li class="active">Data</li>
                    </ol>
                    <!--默認分頁-->
                    <nav aria-label="Page navigation">
                      <ul class="pagination  pagination-lg">
                        <li>
                          <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                    <!--標籤-->
                    <h3>Example heading <span class="label label-default">New</span></h3>
                    <!--徽章-->
                    <button class="btn btn-primary" type="button">
                      Messages <span class="badge">4</span>
                    </button>

                </div>

            </div>
            <!--警告框-->
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">警告框、進度條</h3>
                    </div>
                    <div class="alert alert-success" role="alert">...</div>
                    <div class="alert alert-info" role="alert">...</div>
                    <div class="alert alert-warning" role="alert">...</div>
                    <div class="alert alert-danger" role="alert">...</div>
                    <!--可關閉的警告框-->
                    <div class="alert alert-warning alert-dismissible" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <strong>Warning!</strong> Better check yourself, you're not looking too good.
                    </div>
                    <!--進度條style="width: 60%;"-->
                    <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                      </div>
                    </div>
                    <!--帶有提示標籤的進度條-->
                    <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        60%
                      </div>
                    </div>
                    <!--根據情境變化效果-->
                    <div class="progress">
                      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        40%
                      </div>
                    </div>

                    <!--媒體-->
                    <div class="media">
                      <div class="media-left media-middle">
                        <a href="#">
                          <img class="media-object" src="..." alt="...">
                        </a>
                      </div>
                      <div class="media-body">
                        <h4 class="media-heading">Middle aligned media</h4>
                        ...
                      </div>
                    </div>

                </div>

            </div>
            <!---->
             <div class="col-md-4">
                 <div class="panel panel-default">
                      <!-- Default panel contents -->
                      <div class="panel-heading">實驗室成員</div>
                      <!-- Table -->
                      <table class="table">
                          <tr>
                                <td>id</td>
                                <td>name</td>
                                <td>age</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>大飛哥</td>
                                <td>18</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>小馬哥</td>
                                <td>20</td>
                            </tr>
                      </table>
                 </div>
             </div>
        </div>
    </div>
    
    <!--下拉菜單必須打開-->
 <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>