常用插件（一）

普通列表listgroup

                        <ul class="list-group">
        <li class="list-group-item">1.ul.list-group</li>
        <li class="list-group-item">2.li.list-group-item</li>
        <li class="list-group-item active">3.active可以变蓝<span class="badge">1</span> </li>
</ul>

1.ul.list-group
2.li.list-group-item
3.active可以变蓝1

下拉列表dropdown


                        <div class="dropdown">
        <a href="#" class="btn btn-default" data-toggle="dropdown">
        下拉列表<span class="caret"></span>
    </a>
        <ul class="dropdown-menu">
               <li><a href="#">1.整体div.dropdown</a></li>
                <li><a href="#">2.触发器data-toggle</a></li>
                <li><a href="#">3.数据容器ul.dropdown-menu</a></li>
        </ul>
</div>


                       
 <div class="btn-group">
                                <a href="#" class="btn btn-default">下拉列表</a>
                                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                       <li><a href="#">1.整体div.dropdown</a></li>
                                       <li><a href="#">2.触发器data-toggle</a></li>
                                       <li><a href="#">3.数据容器ul.dropdown-menu</a></li>
                                </ul>
                        </div>

下拉列表

模态框modal


                        <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal" data-backdrop="static">
                            弹出模态框
                    </a>
                    <div class="modal" id="modal">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                           Welcome to Modal<span class="close" data-dismiss="modal">×</span>
                                      </div>
                                    <div class="modal-body">是否离开？</div>
                                    <div class="modal-footer">
                                        <button class="btn btn-info" data-dismiss="modal">确定</button>
                                        <button class="btn btn-warning" data-dismiss="modal">取消</button>
                                    </div>
                                </div>
                            </div>
                    </div>

弹出模态框

折叠框collapse


                        <button class="btn btn-default" data-toggle="collapse" data-target="#collapse">折叠框</button>
                    <div class="collapse" id="collapse">
                            <h5>折叠区域</h5>
                    </div>

折叠区域

标签页tab


                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
                            <li><a href="#tab2" data-toggle="tab">tab2</a></li>
                            <li><a href="#tab3" data-toggle="tab">tab3</a></li>
                    </ul>
                    <div class="tab-content">
                            <div class="tab-pane in active fade" id="tab1">第一个标签内容</div>
                            <div class="tab-pane fade" id="tab2">第二个标签内容</div>
                            <div class="tab-pane fade" id="tab3">第三个标签内容</div>
                    </div>

第一个标签内容

第二个标签内容

第三个标签内容

工具框tooltip


                        <a id="tootip" href="javascript:;" data-toggle="tooltip" data-html="true" title="<h4>title</h4>">工具提示框</a>
                        
<script>
            $('#tootip').tooltip();
        </script>

工具提示框

弹出框popover


                        <a id="popover" href="javascript:;" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<h4>content</h4>" title="title">弹出框</a>

                        <script>
            $('#popover').popover();
        </script>

警告框alert


                        <div id="alert" href="javascript:;" data-toggle="alert" class="alert alert-success">警告框<span class="close" data-dismiss="alert">×</span></div>

警告框×

data控件的Js控制和事件监听


                        小节：Js方式的控件和事件的监听，首先最重要的就是找到这个监听者。他不是触发者，而是数据者或者总体容器，是css为这个模式的东西。
                            例如：下拉监听者div.dropdown;模态框监听者div.modal; $("div[class=collapse]").collapse('show');$("div[class=modal]").modal('show');下拉的show不好用。