20161019 bootstrap中javascript插件 学习记录

Collapse

基本格式：

<div class="panel-group" id="div1">
<div class="panel panel-default">
<div class="panel-heading" id="one">
<h4><a href="#com_panel1" data-parent="#div1" data-toggle="collapse">计算机类</a></h4>
</div>
<div class="panel-body collapse panel-collapse in" id="com_panel1">
<ul class="list-group">
<li class="list-group-item"><a href="#">HTML</a></li>
<li class="list-group-item"><a href="#">CSS</a></li>
<li class="list-group-item"><a href="#">jS</a></li>
<li class="list-group-item"><a href="#">jQuery</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="two">
<h4><a href="#com_panel2" data-parent="#div1" data-toggle="collapse">计算机类</a></h4>
</div>
<div class="panel-body collapse panel-collapse" id="com_panel2">
<ul class="list-group">
<li class="list-group-item"><a href="#">HTML</a></li>
<li class="list-group-item"><a href="#">CSS</a></li>
<li class="list-group-item"><a href="#">jS</a></li>
<li class="list-group-item"><a href="#">jQuery</a></li>
</ul>
</div>
</div>

</div>

<a href="#" data-toggle="tooltip" title="tooltip" data-placement="bottom">查看详情</a>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
})
</script>

以此代码来实现上图中的hover效果。

data-placement来控制的位置，left/right/top/bottom。

ScrollSpy scrollspy.js

其中应用了锚链接，给定一个id，给文本框的父元素写入data-spy="scroll" data-target="#nav0" 的形式以完成滚动监听的效果。

Alert

$("#ul").append('li'+$('#text').val()+'</li>');

用append来完成。