【学习笔记】Bootstrap插件 滚动监听+弹出框+选项卡

--滚动监听

依赖导航组件
步骤：
1.写一个导航组件
2.data-target="#test"执行滚动监听的目标
   data-spy="scroll" 向想要监听的元素 添加滚动监听

<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>