Bootstrap

終於下定決心來學習bootstrap了，2016-10-03。

bootstrap安裝
先看CDN：

<!-- 放在head標籤內 -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

由上可見，引用bootstrap需要3個文件，bootstrap.min.css（CSS）、jquery.min.js（JS 1.91及以上的JQ）、bootstrap.min.js（JS）,因此，當你不想用CDN而去bootstrap官網下載的時候，也可以僅需要下載到這三個文件就差不多OK了。

bootstrap內容目錄

對於入門級，在這主要從‘全局CSS樣式’、‘組件’、‘JavaScript插件’這三個方面講解，高手請繞道。

bootstrap 全局CSS樣式

柵格系統：

列偏移：col-md-offset-* ;
1、適用於大屏幕，小屏幕的col-xs-*不支持（但可以用空的列來實現偏移）；
2、靈活運用，你會發現，用‘列偏移’方法來居中是相當的方便哦。
3、列偏移居中CSS原理：

CSS:
  .col-md-offset-3 {margin-left: 25%;} //左邊距25%
  .col-md-6 {width: 50%;} //寬50%,自然右邊還剩25%;左右都25%，中間內容50%，當然就居中了。

HTML:
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="background:red">mid6</div>
</div>

列排序：col-md-push-* 、col-md-pull-* ;
col列元素都有事先經過position: relative;定位；
push : 設置left值，將元素從左往右推；
pull：設置right值，將元素重右往左拉。

<div class="row">
    <div class="col-md-4 col-md-push-8" style="background:red">push</div>
    <div class="col-md-8 col-md-pull-4" style="background:green">pull</div>
</div>

。。。。。。

bootstrap 全局組件

字體圖標(Glyphicons)
bootstrap css文件已經包含了glyphicons樣式，因此在寫glyphicon類前需確保已經引入了bootstrap.css(或者bootstrap..min.css)，否則字體圖標顯示。

<button type="button" class="btn btn-default" style="font-size:60px;color:red;text-shadow:black 5px 3px 3px;">
    <span class="glyphicon glyphicon-user"></span>
</button>

字體圖標的大小顏色陰影等樣式可單獨設置，也可設置在父元素上使其繼承。

下拉菜單dropdown、上拉菜單dropup

<!--Bootstrap BUG : 設置上拉菜單時需在dropup上加"position:relative;"定位。-->
<div class="dropdown">
    <div class="btn btn-default" data-toggle="dropdown">下拉菜單<span class="caret"></span></div>
    <ul class="dropdown-menu">
        <li class="dropdown-header">大公司</li>
        <li><a>百度</a></li>
        <li><a>騰訊</a></li>
        <li><a>阿里</a></li>
        <div class="divider"></div>
        <li class="dropdown-header">地區</li>
        <li><a>北京</a></li>
        <li class="disabled"><a>上海</a></li>
        <li><a>深圳</a></li>
    </ul>
</div>

dropdown ：下拉組件類名；
dropup ：上拉組件類名；
data-toggle = “drop-toggle” : 下拉按鈕；
caret ：下拉三角圖標；
dropdown-menu : 下拉內容菜單；
dropdown-header ：內容標題；
divider : 分隔線；

按鈕組btn-group

<div class="btn-toolbar">
    <div class="btn-group btn-group-sm">
        <button class="btn btn-default" type="button">按鈕a</button>
        <button class="btn btn-default" type="button">按鈕b</button>
        <button class="btn btn-default" type="button">按鈕c</button>
    </div>
    <div class="btn-group-vertical btn-group-md">
        <button class="btn btn-default" type="button">按鈕1</button>
        <button class="btn btn-default" type="button">按鈕2</button>
        <button class="btn btn-default" type="button">按鈕3</button>
    </div>
    <div class="btn-group btn-group-lg">
        <button class="btn btn-default" type="button">按鈕E</button>
        <button class="btn btn-default" type="button">按鈕F</button>
        <div class="btn-group btn-group-lg">
            <button class="btn btn-success" data-toggle="dropdown">
                下拉更多
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a>百度</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a>騰訊</a>
                </li>
            </ul>
            <button class="btn btn-default" type="button">按鈕G1</button>
        </div>
    </div>
</div>

btn-group : 創建按鈕組（默認水平） ;
btn-toolbar : 內含多個按鈕組 ;
btn-group-lg、btn-group-md、btn-group-ms、btn-group-xs : 定義按鈕大小；
btn-group-vertical ：垂直按鈕組
按鈕內可嵌套；

輸入框組input-group

<style>
    .input-group{margin:5px 50px;}
</style>
<form role="form" class="form-inline">
    <div class="input-group input-group-sm">
        <span class="input-group-addon">身高</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">cm</span>
    </div><br>
    <div class="input-group input-group-md">
        <span class="input-group-addon"><input type="checkbox"></span>
        <input type="text" class="form-control" placeholder="單選框/複選框">
        <span class="input-group-addon"><input type="radio"></span>
    </div><br>
    <div class="input-group input-group-lg">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class='btn btn-success' type="button">search</button>
        </span>
    </div><br>
    <div class="input-group input-group-md">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" data-toggle="dropdown">
                驗證方式 
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a>電話</a></li>
                <li><a>身份證</a></li>
            </ul>
        </div>
        <input type="text" class="form-control">
    </div><br>
    <div class="input-group input-group-md">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default">籍貫</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a>江西</a></li>
                <li><a>廣東</a></li>
            </ul>
        </div>
    </div>
</form>

input-group : 輸入框組類名；
input-group-sm、input-group-md、input-group-lg等：設置輸入框組大小；
input-group-addon：輸入框組內的提示內容，內也可放置radio/checkbox單選複選框 ;
input-group-btn : 輸入框組內的按鈕，內可嵌套下拉菜單；

nav導航元素

<div class="wrap" style="width:960px;margin:0 auto;">
    <ul class="nav nav-tabs">
        <li class="active"><a>中國</a></li>
        <li class="disabled"><a>美國</a></li>
        <li><a>日本</a></li>
        <li class="dropup">
            <a data-toggle="dropdown">
                更多<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a>韓國</a></li>
                <li class="disabled"><a>印度</a></li>
                <li class="divider"></li>
                <li><a>英國</a></li>
            </ul>
        </li>
    </ul>
    <br>
    <ul class="nav nav-pills nav-stackedd nav-justified">
        <li class="active"><a data-toggle="tab" href="#CT1">中國</a></li>
        <li><a data-toggle="tab" href="#CT2">美國</a></li>
        <li class="disabled"><a data-toggle="tab" href="#CT3">日本</a></li>
    </ul>
    <div class="tab-content" style="padding:20px;background:#ccc;">
        <div class="tab-pane fade in active" id="CT1">
            中國
        </div>
        <div class="tab-pane fade" id="CT2">
            美國
        </div>
        <div class="tab-pane fade" id="CT3">
            日本
        </div>
    </div>
</div>

nav : 創建導航；
nav-tabs : 標籤式導航；
nav-pills：膠囊式導航；
nav-stacked : 堆疊（垂直）式導航（一般只用於nav-pills）；
nav-justified: 在大於768px屏幕上，導航總寬度和其父級元素寬度一致，導航內部列表元素等長並均分父元素寬度；在小屏幕上則顯示呈現堆疊樣式。
tab-content（父）、tab-pane（子） : 與 tab-pane或tab-content 和 data-toggle=”tab” (或data-toggle=”pill” ) 一同使用，設置標籤頁對應的內容隨標籤的切換而更改 ;

.tab-content .active{display:block;}
.fade{opacity:0;}
.fade.in{opacity:1;}

nav導航欄
（navbar-collapse響應式導航，如下）

<!--navbar-collapse響應式摺疊導航-->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href=""> LOGO </a>
        <div class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="nav navbar-nav">
            <li class="active"><a>首頁</a></li>
            <li class="dropdown">
                <a class="dropdown-btn" data-toggle="dropdown">
                    產品
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">電子產品</li>
                    <li><a href="#">手機</a></li>
                    <li><a href="#">電腦</a></li>
                    <li><a href="#">導航儀</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">服務</li>
                    <li><a href="#">回收</a></li>
                    <li><a href="#">維修</a></li>
                </ul>
            </li>
            <li><a>新聞</a></li>
            <li><a>關於我們</a></li>
        </ul>
    </div>
</div>

navbar : 創建導航欄；
navbar上添加role=”navigation”屬性，有助於增加可訪問性；
navbar-default、navbar-inverse : 默認（白底黑字）導航欄、黑底白字導航欄；
navbar-header > navbar-brand : 導航欄的頭部（常放置LOGO文字或者圖片元素）；
navbar-toggle : collapse 摺疊縮起後的內容，指定data-toggle=”collapse”和data-target=”#id”兩個必要屬性（‘#’號容易遺忘而出錯）；
icon-bar : 三個帶有 class .icon-bar 的組合創建所謂的漢堡按鈕。
navbar-nav：摺疊展開後的內容，並添加和navbar-toggle的data-target屬性值相同的id名；

navbar-static-top（默認）、navbar-fixed-top、navbar-fixed-bottom : 導航欄隨頁面滾動（默認）、固定於頂部、固定於底部；
navbar-left、navbar-right : 導航欄左右對齊位置；
navbar-form : 導航欄表單容器；
navbar-btn : 導航欄按鈕（form標籤外）；
navbar-text : 導航欄中的文本字符串；

<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href=""> LOGO </a>
    </div>
    <ul class="nav navbar-nav navbar-right" style="margin-right:0;">
        <li>
            <a href="#">百度</a>
        </li>
        <li>
            <a href="#">騰訊</a>
        </li>
        <li class="dropdown">
            <a class="dropdown-btn" data-toggle="dropdown">
                京東<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">子菜單1</a></li>
                <li><a href="#">子菜單2</a></li>
                <li class="divider"></li>
                <li><a href="#">子菜單3</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-left">
        <li class="active">
            <a href="#">百度</a>
        </li>
        <li>
            <a href="#">騰訊</a>
        </li>
        <li>
            <a href="#">京東</a>
        </li>
    </ul>
    <form class="navbar-form navbar-left form-inline" role="search">
        <div class="form-group">
            <input type="text" placeholder="keywords" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
    <button type="button" class="btn btn-success navbar-btn">navbar按鈕</button>
    <p class="navbar-text">navbar-text here</p>
</div>

麪包屑導航

<ul class="breadcrumb">
    <li>首頁</li>
    <li>家居</li>
    <li class="active">沙發</li>
</ul>

breadcrumb : 創建麪包屑，ul>li無序列表結構；

分頁（Pagination）

<ul class="pagination pagination-sm">
    <li><a href="javascript:void(0)">&laquo;</a></li>
    <li><a href="javascript:void(0)">1</a></li>
    <li class="active"><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li class="disabled"><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>
<br>
<ul class="pagination">
    <li><a href="javascript:void(0)">&laquo;</a></li>
    <li><a href="javascript:void(0)">1</a></li>
    <li class="active"><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li class="disabled"><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>
<br>
<ul class="pagination pagination-lg">
    <li><a href="javascript:void(0)">&laquo;</a></li>
    <li><a href="javascript:void(0)">1</a></li>
    <li class="active"><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li class="disabled"><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>

pagination : 創建分頁器；
active : 當前第一頁；
disabled : 不可點擊；
pagination-lg、pagination-sm : 分頁器大小；

標籤label

<!-- 標籤label -->
<span class="label label-default">default</span>
<span class="label label-primary">primary</span>
<span class="label label-success">success</span>
<span class="label label-info">info</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span>

微章badge

<!-- 微章badge -->
<ul class="nav nav-pills">
    <li class="active"><a href="">未讀<span class="badge">5</span></a></li>
    <li><a href="">已讀</a></li>
    <li><a href="">推薦<span class="badge">12</span></a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="">未讀<span class="badge pull-right">5</span></a></li>
    <li><a href="">已讀</a></li>
    <li><a href="">推薦<span class="badge pull-right">12</span></a></li>
</ul>

badge : 創建微章，badge和label相比，外觀更圓滑；
pull-left、pull-right : 左右位置調整；

超大屏幕jumbotron

<!-- 超大屏幕jumbotron -->
<div class="jumbotron">
    <div class="container">
        <h1>歡迎進入登錄頁面</h1>
        <p>這是一個超大屏幕jumbotron例子</p>
        <p><a class="btn btn-success btn-lg">學習更多</a></p>
    </div>
</div>

jumbotron主要是個放大標題、段落的容器盒子，並且會添加適當的margin、padding和background-color。

頁面標題page-header

<!-- 頁面標題page-header -->
<div class="page-header">
    <h3>我是標題1</h3>
</div>
<p>我是內容1</p>
<div class="page-header">
    <h3>我是標題2</h3>
</div>
<p>我是內容2</p>
<div class="page-header">
    <h3>我是標題3</h3>
</div>
<p>我是內容3</p>

page-header預定義了padding、margin、boder樣式，這常應用於‘同頁面中含多個標題且每個標題之間需要添加一定的間距’等場景。

縮略圖thumbnail

<!-- 縮略圖thumbnail -->
<div class="container" style="background-color:#ddd;padding-top:20px;">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail" href="#" style="text-decoration:none;">
                <img src="kittens.jpg" alt="">
                <div class="info">
                    <h3>這裏一般填寫標題</h3>
                    <p>這裏一般填寫描述</p>
                    <p>
                        <a class="btn btn-default btn-xs" href="#">收藏</a>
                        <a class="btn btn-primary btn-xs" href="#">查看</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail" href="#" style="text-decoration:none;">
                <img src="kittens.jpg" alt="">
                <div class="info">
                    <h3>這裏一般填寫標題</h3>
                    <p>這裏一般填寫描述</p>
                    <p>
                        <a class="btn btn-default btn-xs" href="#">收藏</a>
                        <a class="btn btn-primary btn-xs" href="#">查看</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail" href="#" style="text-decoration:none;">
                <img src="kittens.jpg" alt="">
                <div class="info">
                    <h3>這裏一般填寫標題</h3>
                    <p>這裏一般填寫描述</p>
                    <p>
                        <a class="btn btn-default btn-xs" href="#">收藏</a>
                        <a class="btn btn-primary btn-xs" href="#">查看</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail" href="#" style="text-decoration:none;">
                <img src="kittens.jpg" alt="">
                <div class="info">
                    <h3>這裏一般填寫標題</h3>
                    <p>這裏一般填寫描述</p>
                    <p>
                        <a class="btn btn-default btn-xs" href="#">收藏</a>
                        <a class="btn btn-primary btn-xs" href="#">查看</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

thumbnail : 縮略圖容器，預定義4px內邊距及圓角、1px邊框、還有20px的margin-bottom ；
thumbnail內僅含有圖片時,建議用a標籤代替div標籤以動畫顯示出圖像的輪廓；

警告框alert

<!-- 警告alert -->
<div class="alert alert-danger alert-dismissable" >
    <p>這個是P段落</p>
    <span class="close" data-dismiss="alert">&times;</span>
</div>
<div class="alert alert-success alert-dismissable" >
    <span>這個是span標籤</span>
    <span class="close" data-dismiss="alert">&times;</span>
</div>
<div class="alert alert-info alert-dismissable" >
    <a href="#" class="alert-link">這個是a鏈接</a>
    <span class="close" data-dismiss="alert">&times;</span>
</div>
<div class="alert alert-warning alert-dismissable" >
    這個是單純的文字
    <span class="close" data-dismiss="alert">&times;</span>
</div>

alert : 創建警告框；
alert-dismissable : 指明該警告框可刪除；
alert-danger、alert-success、alert-info、alert-warning : 不同外觀的警告框；
alert-link : 警告框內的鏈接；
close : 關閉按鈕，指明data-dismiss=’alert’屬性 ;
alert內容的文字若是塊級元素（如p），則close按鈕會被擠到下一行。

進度條progress

<!-- 進度條progress-->
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:20%;"></div>
    <div class="progress-bar progress-bar-info" style="width:20%;"></div>
    <div class="progress-bar progress-bar-danger" style="width:20%;"></div>
    <div class="progress-bar progress-bar-warning" style="width:20%;"></div>
</div>

progress : 創建進度條；
progress-striped : 添加條紋外觀；
active : 添加動態效果；
progress-bar : 進度條當前值，具體值爲其內聯的width長度值；
progress-bar-success、progress-bar-info、progress-bar-danger、progress-bar-warning : 賦予進度條不同的顏色；

多媒體對象media

<!-- 媒體對象media -->
<ul class="media-list">
    <li class="media">
        <a href="#" class="pull-left">
            <img src="cat.jpg" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">media標題</h4>
            內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏
            <div class="media">
            <a href="#" class="pull-left">
                <img src="cat.jpg" alt="">
            </a>
            <div class="media-body">
                <h4 class="media-heading">media標題</h4>
                這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容
            </div>
        </div>
        </div>
    </li>
    <li class="media">
        <a href="#" class="pull-left">
            <img src="cat.jpg" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">media標題</h4>
            內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏
            <div class="media">
            <a href="#" class="pull-left">
                <img src="cat.jpg" alt="">
            </a>
            <div class="media-body">
                <h4 class="media-heading">media標題</h4>
                這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容這裏確實內部嵌套的內容
            </div>
        </div>
        </div>
    </li>
    <li class="media">
        <a href="#" class="pull-left">
            <img src="cat.jpg" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">media標題</h4>
            內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏內容在這裏
        </div>
    </li>
</ul>

media-list : 多個media 容器（ul>li結構）；
media : 創建media （單個media時，可以不採用ul>li結構）；
media-body : media描述；
media-heading : media描述標題；
pull-left、pull-right : 圖像放置的左右位置；

列表組list-group

<!-- 列表組list-group -->
<ul class="list-group">
    <li class="list-group-item active">首頁</li>
    <li class="list-group-item">產品<span class="badge">4</span></li>
    <li class="list-group-item">資訊</li>
    <li class="list-group-item">聯繫<span class="badge">7x24h</span></li>
</ul>

<div class="list-group">
    <a class="list-group-item active">首頁</a>
    <a class="list-group-item" href="#">產品<span class="badge">4</span></a>
    <a class="list-group-item" href="#">資訊</a>
    <a class="list-group-item" href="#">聯繫<span class="badge">7x24h</span></a>
</div>
<div class="list-group">
    <a class="list-group-item active">
        <h4 class="list-group-item-heading">標題</h4>
    </a>
    <a class="list-group-item">
        <p class="list-group-item-text">內容</p>
    </a>
</div>

list-group : 創建列表組；
list-group-item : 列表組內列表項；
active : 當前列表項；
list-group-item-heading：列表項內部標題；
list-group-item-text：列表項內部內容；

面版panel

<!-- 面板panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title"><h4>面板標題panel-title</h4></div>
    </div>
    <div class="panel-body">
        面板主體panel-body
    </div>
    <table class="table text-center">
            <tr>
                <th class="text-center">姓名</th>
                <th class="text-center">年齡</th>
                <th class="text-center">籍貫</th>
                <th class="text-center">學歷</th>
            </tr>
            <tr>
                <td>孫剛</td>
                <td>26</td>
                <td>江西</td>
                <td>本科</td>
            </tr>
        </table>
        <ul class="list-group">
            <li class="list-group-item">列表項1</li>
            <li class="list-group-item">列表項2<span class="badge">新</span></li>
            <li class="list-group-item">列表項3</li>
        </ul>
    <div class="panel-footer text-right">panel-footer</div>
</div>

panel 創建面板；
panel-default、panel-success、panel-danger、panel-info、panel-primary、panel-wraning：面板的外觀顏色；
panel-heading：面板頭部；
panel-title：面板標題，內一般結合h1~h6標籤使用；
panel-body：面板主體內容；
面板內的表格table、列表組list-group等需放在panel-body外；

凹陷well

<!-- well -->
<div class="well well-sm">well-sm</div>
<div class="well well-lg">well-lg</div>

.well{
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 
}

well：創建well，因設置box-shadow而產生凹陷的效果；
well-sm、well-lg：設置well大小；

bootstrap 插件

bootstrap 模態框modal

<!-- 模態框modal -->
<span class="btn btn-primary btn-lg" data-toggle="modal" data-target=".modal1">modal按鈕</span>
<div class="modal fade modal1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">modal-title</h4>
            </div>
            <div class="modal-body">
                Modal-body
                <ul class="list-group" style="margin-top:20px;">
                    <li class="list-group-item">名稱</li>
                    <li class="list-group-item">編號</li>
                    <li class="list-group-item">價格<span class="badge">火</span></li>
                    <li class="list-group-item">其它</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default btn-md" type="button" data-dismiss="modal">關閉</button>
                <button class="btn btn-primary btn-md" type="button">確定</button>
            </div>
        </div>
    </div>
</div>

◆ 模態框的觸發器（上例子中的modal按鈕）：需包含data-toggle、data-target兩個屬性，
data-toggle=”modal”,聲明該元素是一個modal的觸發器；data-target=”.modal1”指明，該觸發器是出發哪個modal，也就是綁定的意思。
◆ modal：創建模態框，並添加與觸發器data-target屬性值相同的類名。建議同時添加上role=”dialog” 和 aria-hidden=”true”屬性；
◆ fade：模態框出現時的transition漸變特效；
◆ modal-dialog：modal對話框，指彈出內容的整體，可配合dialog-lg(大)、dialog-sm(小)來控制其大小尺寸；
◆ modal-content：模態框的內容盒子；
◆ modal-header：內容頭部；
◆ close：關閉按鈕，添加data-dismiss=”modal”屬性後才擁有關閉模態框功能，位置需要放在modal-title的前面；
◆ modal-title：內容標題，常和h標籤一同使用；
◆ modal-boty：內容主體；
◆ modal-footer：內容底部，一般放置供用戶操作性的元素，如按鈕；

滾動監聽scrollspy

<!-- 滾動監聽 -->
<div id="navbar-scroll-test" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">課程</a>
    </div>
    <ul class="nav navbar-nav" style="margin:0;">
        <li class="active"><a href="#yw">語文</a></li>
        <li><a href="#sx">數學</a></li>
        <li><a href="#yy">英語</a></li>
        <li><a href="#zz">政治</a></li>
        <li><a href="#ls">歷史</a></li>
        <li><a href="#dl">地理</a></li>
    </ul>
</div>
<div class="scollspy" data-spy="scroll" data-target="#navbar-scroll-test" data-offset="20" style="height:200px;overflow:auto;position:relative; background:#e7e7e7;padding:20px;">
    <div id="yw" style="margin-bottom:60px">
        語文是一門很好的課程，值得好好學，將來很有作用。
        語文是一門很好的課程，值得好好學，將來很有作用。
        語文是一門很好的課程，值得好好學，將來很有作用。
        語文是一門很好的課程，值得好好學，將來很有作用。
        語文是一門很好的課程，值得好好學，將來很有作用。
    </div>
    <div id="sx" style="margin-bottom:60px">
        數學是一門很好的課程，值得好好學，將來很有作用。
        數學是一門很好的課程，值得好好學，將來很有作用。
        數學是一門很好的課程，值得好好學，將來很有作用。
        數學是一門很好的課程，值得好好學，將來很有作用。
        數學是一門很好的課程，值得好好學，將來很有作用。
    </div>
    <div id="yy" style="margin-bottom:60px">
        英語是一門很好的課程，值得好好學，將來很有作用。
        英語是一門很好的課程，值得好好學，將來很有作用。
        英語是一門很好的課程，值得好好學，將來很有作用。
        英語是一門很好的課程，值得好好學，將來很有作用。
        英語是一門很好的課程，值得好好學，將來很有作用。
    </div>
    <div id="zz" style="margin-bottom:60px">
        政治是一門很好的課程，值得好好學，將來很有作用。
        政治是一門很好的課程，值得好好學，將來很有作用。
        政治是一門很好的課程，值得好好學，將來很有作用。
        政治是一門很好的課程，值得好好學，將來很有作用。
        政治是一門很好的課程，值得好好學，將來很有作用。
    </div>
    <div id="ls" style="margin-bottom:60px">
        歷史是一門很好的課程，值得好好學，將來很有作用。
        歷史是一門很好的課程，值得好好學，將來很有作用。
        歷史是一門很好的課程，值得好好學，將來很有作用。
        歷史是一門很好的課程，值得好好學，將來很有作用。
        歷史是一門很好的課程，值得好好學，將來很有作用。
    </div>
    <div id="dl" style="margin-bottom:160px">
        地理是一門很好的課程，值得好好學，將來很有作用。
        地理是一門很好的課程，值得好好學，將來很有作用。
        地理是一門很好的課程，值得好好學，將來很有作用。
        地理是一門很好的課程，值得好好學，將來很有作用。
        地理是一門很好的課程，值得好好學，將來很有作用。
    </div>
</div>

data-spy=”scroll” data-target=”#navbar-scroll-test” data-offset=”20”
◆ data-spy=”scroll”加載需要監聽滾動的元素上，同時還需要指定data-target=“#ID名”(或者.CLASS名)，指定的ID或者CLASS就是隨着滾動條而切換active的導航欄；
◆ data-offset：默認是0，指當計算滾動位置時，距離頂部的偏移像素。
◆ 指定的ID或者CLASS導航欄內應確保已添加對應的錨點。

提示工具tooltip

<!-- 提示工具tooltip -->
<a class="tooltip-itme" href="#" data-toggle="tooltip" title="錨默認的top tooltip">錨的默認tooltip</a>
我是來搗亂的文字我是來搗亂的文字我是來搗亂的文字
<a class="tooltip-itme" href="#" data-toggle="tooltip" title="bottom tooltip" data-placement="bottom">錨的bottom tooltip</a>
我是來搗亂的文字我是來搗亂的文字我是來搗亂的文字
<a class="tooltip-itme" href="#" data-toggle="tooltip" title="right tooltip" data-placement="right">錨的right tooltip</a>
我是來搗亂的文字我是來搗亂的文字我是來搗亂的文字
<a class="tooltip-itme" href="#" data-toggle="tooltip" title="left tooltip" data-placement="left">錨的left tooltip</a>
我是來搗亂的文字我是來搗亂的文字我是來搗亂的文字
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="按鈕也可以加tooltip">按鈕的tooltip</button>

◆ 別忘記添加$("[data-toggle='tooltip']").tooltip();，否則tooltip不生效；
◆ 向要加提示的元素上添加data-toggle=”tooltip”屬性，提示的內容就是其title值；
◆ data-placement取top(默認)、bottom、left、right，用來設置tooltip的相對位置；

彈出框 popover

<!-- 彈出框 popover -->
我是來搗亂的文字
<a data-toggle="popover" data-delay="1000" title="popover title！" data-content="top" data-placement="top">top popover</a>
我是來搗亂的文字
<a data-toggle="popover" data-delay="1000" title="popover title！" data-content="bottom" data-placement="bottom">bottom popover</a>
我是來搗亂的文字
我是來搗亂的文字
<a data-toggle="popover" data-delay="1000" title="popover title！" data-content="left" data-placement="left">left popover</a>
我是來搗亂的文字
<a data-toggle="popover" data-delay="1000" title="popover title！" data-content="right" data-placement="right">right popover</a>

◆ 別忘記添加$("[data-toggle='popover']").popover();，否則popover不生效；
◆ 向要加提示的元素上添加data-toggle=”popover”屬性，提示的內容就是其title值；
◆ data-placement取top(默認)、bottom、left、right，用來設置tooltip的相對位置；
◆ data-delay=”1000”，點擊後彈出框出現前的延時時間（毫秒）。

按鈕


<button class="btn1 btn btn-success">btn1按鈕</button>
<button class="btn2 btn btn-danger">btn2按鈕</button>
<button class="btn3 btn btn-info">btn3按鈕</button>
<button class="btn4 btn btn-primary">btn4按鈕</button>

//javascript方法
$('.btn1').button('toggle'); //添加active類
$('.btn2').button('loading');//添加loading效果;
$('.btn3').button('loading').delay(1000);//loading效果持續的時間;
$('.btn4').button('loading').delay(1000).queue(function(){ //loading完成之後運行函數
    $(this).button('reset') //完成後恢復到原始狀態
    $(this).button('complete');//完成後提示loading finished
});

摺疊collapse，手風琴（accordion）

<!-- collapse -->
<div class="panel-group" id="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#panel-group" href="#panel1">
            <h4 class="panel-title">title for panel1</h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                content for panel1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" data-toggle="collapse" data-parent="#panel-group" href="#panel2">
            <h4 class="panel-title">title for panel2</h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                content for panel2
            </div>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading" data-toggle="collapse" data-parent="#panel-group" href="#panel3">
            <h4 class="panel-title">title for panel3</h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                content for panel3
            </div>
        </div>
    </div>
</div>

◆ panel-group：面版組；
◆ panel：創建面板，搭配panel-default、panel-info等配置不同顏色；
◆ panel-heading：面板頭部；
◆ panel-title：面板標題；
◆ panel-body：面板內容主體；
◆ data-toggle=”collapse”：手風琴觸發按鈕，同時需指明href=”#id”（或“.class”）,表明其是哪個面板的觸發器。
◆ data-parent：多個面板同時指定一個data-parent時，在這個指定的data-parent內的面板，有且僅有一個面板是打開狀態。當點擊其中一個面板打開時，其相鄰的面板就會自動閉合。
◆ collapse：display:none; visibility: hidden;
◆ in：display:block; visibility: visible;

輪播carousel

<!-- 輪播carousel -->
<div id="carouselOne" class="carousel slide">
<!-- 索引 -->
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
</ol>
<!-- 內容 -->
<div class="carousel-inner">
<div class="item active" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide1</div>
<div class="item" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide2</div>
<div class="item" style="height:400px;line-height:400px;background:#ddd;text-align:center;">slide3</div>
</div>
<!-- 控制器 -->
<div class="carousel-control left" href="#carouselOne" data-slide="prev" style="line-height:400px;">&lsaquo;</div>
<div class="carousel-control right" href="#carouselOne" data-slide="next" style="line-height:400px;">&rsaquo;</div>
</div>

◆ carousel：創建輪播器容器。
◆ carousel-indicators：輪播索引容器，索引從0開始；ol>li無須列表結構，內部每個li代表每個索引點。li上的data-target=”#id”,指明它屬哪個輪播器的索引，data-slide-to=”0”指明當點擊這個li的時候，輪播器就輪播到那個模塊，“active”即當前索引。
◆ carousel-inner：輪播主體容器；內部的“item”指各個輪播模塊，“active”即當前模塊。
◆ carousel-control：輪播控制器；left、right分辨左右；href=”#id”指明其是哪個輪播器的控制器（因爲一個頁面中可能同時存在多個輪播器）；data-slide-to=“prev”（向前輪播）、data-slide-to=“next”（向後輪播）；&lsaquo、&rsaquo左右箭頭實體字符；

lidysun

發佈了63 篇原創文章 · 獲贊 45 · 訪問量 13萬+

私信關注

HTTP URL 詳解

Vuex mapState mapGetters mapMutations mapActions 使用筆記

express連接mysql

原生js實現jQuery parentsUntil 和 closest方法

深入理解ES6箭頭函數裏的this，看這篇就夠了

Javascript switch語句

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結