Bootstrap小练习------插件系列

模态框：

<h2>演示模态框</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">演示模态框</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                文本框内容
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#myModal").modal({
            keyboard:true
        }).on("hide.bs.modal", function () {
            alert("ok");
        });
    });
</script>

滚动监听

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Super pan</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#ios">ios</a></li>
            <li><a href="#android">android</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Web <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#js">js</a></li>
                    <li class="divider"></li>
                    <li><a href="#php">php</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div data-spy="scroll" style="height: 200px; overflow: auto; position: relative">
    <h4 id="ios">ios</h4>
    <p>ios真好玩</p><br><br><br>
    <h4 id="android">android</h4>
    <p>android真好玩</p><br><br><br>
    <h4 id="js">js</h4>
    <p>js真好玩</p><br><br><br>
    <h4 id="php">php</h4>
    <p>php真好玩</p><br><br><br>
</div>

提示工具

<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的Tooltip">底部的Tooltip</a><br>
<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的Tooltip">底部的Tooltip</button>

<script>
    $(function () {
        $("[data-toggle='tooltip']").tooltip();
    })
</script>

弹出框

<button class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="内容">Popover按钮</button>

<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    })
</script></span><span style="font-size: 18px;">

警告框

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>警告！</strong>您的网络连接有问题
</div></span><span style="font-size: 18px;">

按钮

<button class="btn btn-primary" data-toggle="button">按钮</button>
<br><br><br><br>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="c1"/>选项1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="c2">选项2
    </label>
</div>
<br><br><br><br>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="option" id="id1"/>选项1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="option" id="id2"/>选项2
    </label>
</div>
</span><span style="font-size:18px;">

<button id="B1" class="btn btn-primary">按钮</button>
<button id="B2" class="btn btn-primary" data-loading-text="Loading">按钮</button>
<button id="B3" class="btn btn-primary" data-loading-text="Loading">按钮</button>
<button id="B4" class="btn btn-primary" data-complete-text="Complete">按钮</button>


<script>
    $(function () {
        $("#B1").click(function () {
            $(this).button('toggle');
        });
        $("#B2").click(function () {
            $(this).button('loading').delay(1000).queue(function () {

            });
        });
        $("#B3").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('reset');
            });
        });
        $("#B4").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('complete');
            });
        });
    })
</script>

折叠

<span style="font-size:14px;"><div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse">点击我</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">啦啦啦</div>
        </div>
    </div>
</div>

<script type="text/javascript">
   $(function () {
       $("#collapseOne").collapse('hide');
   });
</script></span>

轮播