--滾動監聽

 <nav id="test" class="navbar navbar-default">
	 	<div class="container">
	 		<ul class="nav navbar-nav">
	 			<li><a href="#ios">ios</a></li>
	 			<li><a href="#php">php</a></li>
	 			<li><a href="#java">java</a></li>
	 		</ul>
	 	</div>
	 </nav>
	 <div data-target="#test" data-spy="scroll" style="height:100px;overflow:auto;position:relative">
	 	<h4 id="ios">ios</h4>
	 	<p>這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容這是ios的內容</p>
	 	<h4 id="php">php</h4>
	 	<p>這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容這是php的內容</p>
	 	<h4 id="java">java</h4>
	 	<p>這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容這是java的內容</p>
	 </div>
 

--彈出框popover

data-container 向指定元素追加彈出框

data-toggle="popover"指定彈出框執行

data-placement 規定如何定位top bottom left right

data-content 彈出框內容

data-trigger: focus 點選彈出框消失

物件.popover（）手動初始化彈出框

<div class="container" style="padding:100px 50px 10px;">
	 	<button class="btn btn-default" type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="彈出框" data-trigger="focus">彈出框</button>
	 </div>
	 <script>
	            $(function(){
	            	          $("[data-toggle='popover']").popover();

	            })
	 </script>
 

--選項卡(標籤頁)

tab-content bs中用來定義選項卡的父級元素
fade 指定透明度和漸變效果
fade in 透明度，第一個標籤頁必須新增 .in 類，以便淡入顯示初始內容.fade.in{opacity:1;}
tab-pane 隱藏元素
active 顯示元素

 <ul class="nav nav-tabs">
	 	<li class="active"><a href="#home" data-toggle="tab">home</a></li>
	 	<li><a href="#ios" data-toggle="tab">ios</a></li>
	 	<li><a href="#java" data-toggle="tab">java</a></li>
	 </ul>
	 <div class="tab-content">
	 	<div id="home" class="tab-pane fade in active">home</div>
	 	<div id="ios" class="tab-pane fade">ios</div>
	 	<div id="java" class="tab-pane fade">java</div>
	 </div>