主要分為 Bootstrap 基本結構、Bootstrap CSS、Bootstrap 佈局元件和 Bootstrap 外掛幾個部分
下面是內建的jQuery外掛  通過data API 呼叫   因此不需要寫js 程式碼
也可以通過js執行，因此都會有一些外掛執行或完成後觸發的事件，和操作外掛的方法
要注意引用的bootstrap版本 和 所用的元件，外掛的格式是否一致，用官網的對應格式。
一般都要在外面的div 定義一個id 和外掛       內容定義data-target為id 的值

--------------------- panel----------------
panel-gruop
 panel panel-default
  panel-heading
    panel-title    在h1-6中使用
  panel-body
  panel-footer
panel-primary、panel-success、panel-info、panel-warning、panel-danger
可在panel-body 下面加表格，還有列表，會有分割線。沒有列表，則沒有分割線。

------------------collapse---------------
通過data屬性來呼叫，
panel-collapse    在摺疊內容中
.collapse.in   初始顯示內容。預設是開啟的
data-taggle  使用外掛
data-parent  摺疊面板 每個元件要引用， 可以不用，則是一個簡單的元件
data-target or href  子元件的id值

----------------carousel---------------
data-ride="carousel" 屬性用於標記輪播在頁面載入時就開始動畫播放。
carousel-indicators 指標 要有acitve 屬性，否則輪播不會出現
    data-target 為id值   使用 data-slide-to 來向輪播傳遞一個原始滑動索引
carousel-inner 專案
   img 
  carousel-caption 新增內容
carousel-control 導航
   carousel-control-prev
   carousel-control-next 
       carousel-control-prev-icon
      carousel-control-prev-icon   圖示
   屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
    href=id   sr-only  屬性

-----------------tab----------------
 data-toggle="tab"
 data-toggle="pill"    到錨文字連結中。 
nav 和 nav-tabs   類到 ul    標籤樣式，
nav 和 nav-pills 類到 ul    膠囊式樣式
tab-content 
tab-pane  fade in active   id  標籤頁   淡入淡出  初始內容  顯示標籤頁  對應a的href

----------------dropdown----------------
可用在導航欄navbar 標籤頁nav  中 
dropdown
  id 呼應下面的menu    
  dropdown-toggle 屬性要有
  data-toggle="dropdown"
  caret
   dropdown-menu  aria-labelledby=id  role=menu

-----------------tooltip---------------
a 標籤中使用 
data-toggle="tooltip"
title="" 提示內容
data-placement  位置
需要通過jquery來啟用
$function（）{ $("[data-toggle='tooltip']").tooltip(); });

------------------navbar----------------
navbar navbar-default
navbar-header
navbar-title
navbar-brand

------------------nav--------------------
.nav nav-tabs 標籤頁
.nav nav-pills   膠囊式標籤頁
.nav nav-pills nav-stacked   膠囊式標籤頁以垂直方向堆疊排列的
.nav nav-tabs  dropdown 下拉選單
 
-----------------list-------------------
list-group  新增在 ul 中
list-group-item 新增在 li 中 li 可用 a 替代
list-group-item-heading 
list-group-item-text
 badge 新增徽章  span 中

-----------------pagination  pager --------------
pagination 在 ul 中
« 左箭頭
» 右箭頭
disabled  active  不可用 可用
pagination-lg -sm 大小
.pager   一個簡單的分頁連結，連結居中對齊。
.previous     .pager 中上一頁的按鈕樣式，左對齊
.next         .pager 中下一頁的按鈕樣式，右對齊

---------------input-group-----------
在form裡面
input-group
span 中使用 input-group-addon 來增加內容  
input text  可放在span 前後 ，form-control  屬性  placeholder 設定初始顯示內容
-lg -sm 大小
checkbox  radio  插在span 裡面
button按鈕  按鈕可以設定屬性 放在span 裡面  注意 不再是input-group-addon  
 而是 input-group-btn
可在按鈕中加下拉選單  class  =dropdown-toggle和data-toggle =dropdown屬性 
也可以分開，在下面在定義一個按鈕

---------------外掛方法的實現--------------
定義一個按鈕，可以是class (.)或者id(#) 
定義一個元件，或外掛 id 或者data-target
定義一個click函式，寫入外掛的方法，點選id or class 按鈕時觸發id or data-target的方法，
來達到一些操作。
例：
$(".start-slide").click(function(){
            $("#myCarousel").carousel('cycle');
        });

$("#buttonleave").click(function(){
            $("#leaveform").css("display","block")
            $("#backform").css("display","none")
        })