######################################################
# #
# 命令格式 解釋 作用 #
# 長命令格式爲 效果 命令 #
######################################################
< abbr title="limited">ltd</abbr> 將limited以ltd形式顯示，獲得焦點時會顯示全稱 縮寫
<span class="glyphicon glyphicon-user"></span> 提供(user)類型的字形圖標 字形圖標
<button> <span...></span>text</button> 將字形標籤嵌套到其他標籤中
<span class="caret"></span> 顯示下三角 下三角
<button type="button" class="btn btn-primary" data-toggle="button">text</button> 用來設置同時存在下壓態和正常態的按鈕
下拉菜單
<div class="dropdown">
<隨意標籤 data-toggle="dropdown">test</隨意標籤>
<ul class="dropdown-menu">
<li>text</li>
<li class="divider"><li>華麗的分割線
</ul>
</div>
<隨意標籤 data-toggle="dropdown pull-right">test</隨意標籤> 向右對齊
<li class="dropdown-header">text</li> 下拉菜單標題
js調用下拉菜單
$(.id名).dropdown('toggle')
按鈕組相關
設置一個按鈕組
<div class="btn-group">
<button...>text</button>
<button...>text</button>
.
.
</div>
將多個按鈕組結合到一起
<div class="btn-toobar">
<div class="btn-group">
<div class="btn-group">
.
.
</div>
設置某一按鈕組屬性
<div class="btn-group btn-group-lg">
設置按鈕組垂直顯示
<div class="btn-group-vertical">
...
</div>
按鈕組嵌套下拉菜單
<div class="btn-group">
<button...>text</button>
<button...>text</button>
<div class="btn-group">
然後內容參照上面下拉菜單中隨意標籤以下部分
</div>
</div>
上拉菜單
<div class="btn-group dropup">
下面部分參照上面的按鈕組嵌套下拉菜單
輸入框組
向表單中輸入框組中添加前綴或後綴
<div class="input-group">
<span class="input-group-addon">text</span>
<input type="text" class="form-control">
</div>
確定文本域大小
<div class="input-group input-group-sm">
前綴或後綴也可以是單選按鈕或者是單選按鈕組
標籤式導航菜單
<ul class="nav nav-tabs">
<li class="active">text</li>
<li>text</li>
</ul>
帶active屬性的標籤爲被激活標籤，不可用
可以用點擊事件激活被點擊標籤然後清除原來的被激活的標籤來實現標籤的特效
膠囊式導航欄
<ul class="nav nav-pills">下面部分不變
垂直的膠囊式導航菜單
<ul class="nav nav-pills nav-stacked">下面部分不變
兩端對齊的導航元素
<ul class="nav nav-pills nav-justified">下面部分不變
禁用標籤
<li class="disabled">text</li>
帶下拉標籤的膠囊導航條
只需要把上面下拉菜單中的div換成li標籤然後大功告成
看起來比較大的導航欄文字
<nav class="navbar ">
<div class="navbar-header">
<div class="navbar-brand">隨意標籤以及文字</div>
</div>
</nav>
注意，nav標籤中有header元素時可以有兩個div（一個頭一個不是頭）否則只能有一個
navbar-left:向左對齊 navbar-right:向右對齊
將導航欄固定在頂部
<nav class="navbar navbar-fixed-top" role="navigation">
將導航欄固定在底部
<nav class="navbar navbar-fixed-bottom" role="navigation">
隨着頁面滾動的導航欄
<nav class="navbar navbar-static-top " role="navigation">
黑色背景白色文字的倒置導航欄
<nav class="navbar navbar-inverse" role="navigation">
麪包屑導航
<ul class="breadcrumb">
<li></li>
<li></li>
<li></li>
</ul>
分頁導航
<ul class="pagination">
<li><a href="#">text</a></li>
<li></li>
<li></li>
<li></li>
</ul>
可以用active屬性定義當前頁面，用disabled屬性定義不可點擊鏈接
可以用類似下面的方式定義分頁工具的大小
<ul class="pagination pagination-xs">
上一頁下一頁的分頁方式
<ul class="pager">
<li></li>
<li></li>
</ul>
&larr華麗的左箭頭←→華麗的右箭頭&rarr
左右對齊的分頁
<ul class="pager">
<li class="previous">text</li>
<li class="next">text</li>
</ul>
標籤
<span class="lable lable-success">text</span>
至此defult,warming,primairy等屬性
徽章（類似消息條數顯示）
<span class="badge">text</span>
超大屏幕顯示
<div class="jumbotron">
<div class="container">
內容
</div>
</div>
如果上面container與jumbotron互換位置的話兩邊會出現空白
縮略圖
<div class="col-sm-6">
<a href="#" class="thumbnail">圖片</a>
</div>
在網格佈局中在圖片周圍添加class=“"thumbnail"的a標籤會添加四個像素的內邊距和一個灰色邊框當
鼠標懸停在圖片上的時候會動態顯示圖像的輪廓
向縮略圖中添加HTML內容可以把class="thumbnail"的a標籤改成div。如果想要圖像分組需要把他們放在一個無序
列表中且每個列表項向左浮動
警告框
<div class="alert alert-warming">text</div>
可關閉的警告框
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">
text(×華麗的X號)
</button>
</div>
進度條
<div class="progress">
<div class="progress-bar" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
<span>text</span>
</div>
</div>
解說：上面那個progress是外面那個灰色的條條
裏面那個progress-bar是那個藍色的進度
aria-valuemin/max表示最大最小（貌似沒用）
style用來確定進度
span元素用於顯示進度或一些其他內容
進度條也可以有success，warming等屬性
只需要在progress的div後面加一個progress-striped然後在裏面那個div中添加progress-bar-success就可以了
在上面條件下在progress-striped後面天際一個active就可以實現螺紋動態
進度條疊加（原理就是在一個div中疊加多個不同顏色和寬度的div ps ：style屬性用來控制長度）
多媒體對象（ps：就是我暑假做的前端，實現圖片浮動到一邊）
<div class="media">
<a href="#">
<img src="#">//圖片
</a>//實現鏈接，也可以不實現
<div class="media-body">//文章部分
<h4 class="media-head">//標題
//文章內容內容部分也可以嵌套媒體對象
</div>
</div>
a標籤的calss命名成pullright就可以實現圖片在右面了
把主div換成ul然後把media換成media-list然後在裏面實現嵌套什麼的就可以實現類似qq空間評論的功能了（太機智了）
添加列表組
<ul class="list-group">
<li class="list-group-item">text</li>
<li class="list-group-item">text</li>
<li class="list-group-item">text</li>
<li class="list-group-item">text</li>
</ul>
注：那個text中可以隨意添加任何亂七八糟的內容，不僅限於文字
面板結構
<div class="panel">
<div class="panel-heading">
面板標題,這裏的div可以結合warming什麼的顯示不同顏色
</div>
<div class="panel-body">
這裏這個body可有可無，當然也可以直接換成一些類似於列表的亂七八糟的東西
</div>
<div class="panel-footer">text</div>
</div>
well 用來顯示塌陷效果
<div class="well">text</well>
大的well
<div class="well well-lg">text</div>
模態框
<button class="btn btn-primary " data-toggle="modal"data-target="#mymodal">text</button>
<!-- 這裏的data-toggle="modal" 和 data-target="#mymodal"是必須的，前面那句說明這裏是調用modal
後面那句說明要調用的modal的id-->
<div class="modal fad" id="mymodal" aria-hidden="true"><!--hidden屬性用於觸發前隱藏-->
<div class="modal-content">
<!--用來保證模態框位置-->
<div class="modal-header">
text
</div>
<div class="modal-body">
text
</div>
<div class="modal-footer">
text
<button type="button" class="btn" data-dismiss="modal">
<!-- data-dismiss="modal"用於關閉當前模態框-->
</div>
</div>
</div>
$('#modal類名').on('hidden/show.bs.modal',function(){隱藏或顯示時執行的動作})
滾動監聽
<nav id="id1" class="navbar navbar-default" role="navigation">
//其實這裏可以是任意組件用a標籤包裹，href=#要定位到的類名，例如href=#id22不侷限於導航條但一般都是導航條吧
</nav>
<div data-spy="scroll" data-target="實現監聽的a標籤的父元素id或class例如#id1" data-offset="0"
style="height:x ;overflow:auto ;position: relative">//relative用於精確定義到導航條的準確位置
<h4 id="id22">這裏不一定要是h標籤</h4>//點擊導航欄時應該是定義到這裏
<任意標籤>text</任意標籤>
</div>
刪除當前滾動標籤中某部分
在要刪除的標籤中加入可以被觸發的js事件例如上例中的<h4>標籤：
<h4 id"id22">ios<small><a href="#" οnclick="remove(this);">delete</a></small></h4>
下面的是js函數
<script type="text/javascript">
$(function(){
remove=function(e){
$(e).parents(".section").remove();//刪除當前元素
$('[data-spy="scroll"]').each(function(){
var $spy = $(this).scrollspy('refresh')
});
}
$("#id1").scrollspy();
});
</script>
滾動觸發函數（相當於一個鉤子）
在上一行的$("#id1").scrollspy();後面加上下面的代碼就可以實現
$('#id1').on('activate.bs.scrollllspy',function(){
//想要執行的動作
})
工具提示符
上面隨便有個什麼標籤
<button type="button" class="btn btn-defult" data-toggle="tooltip" data-placement="top" title="text">text</button>
上面的button可以用任意標籤代替，data-toggle屬性是必須的
data-palce屬性用來確定工具提示符出現的方向(left,top,bottom,right)
title屬性用來設置顯示的值
下面的js用來激活標籤
<script>
$(function(){ $("[data-toggle='tolltip']").tooltip();});
</script>
彈出框
<button type="btn btn-success" title="彈出框頭內容"
data-container="body" data-toggle="popover" data-placement="top"
data-content="彈出框內容">
text
</button>
然後有下面的js對其進行激活
<script>$(function()
{$("[data-toggle='popover']").popover;
});
</script>
確定表單內元素大小
<form role="form">
#確定輸入框文字大小
<div class="form-group">
<input type="" class="form-control input-lg" placeholder="默認內容">
</div>
#確定輸入框等元素大小
<div class="col-lg-4">
<input type="" class="form-control" placeholder="默認內容">
</div
</form>
