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标签中的 < a href= "#com_panel1" data-parent= "#div1" data-toggle= "collapse" > 计算机类 </ a >。

Tooltip

<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

点击提交时，如为空显示警示框，写入内容时，在下方显示提交内容，是在js中这样写:

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

用append来完成。