面包屑 分页 警告框 面板 模态框 轮播图

<!-- bootstrap 面包屑 导航 ******-->        <ul class="breadcrumb">            <li><a href="#">shouye</a></li>            <li><a href="#">二爷</a></li>            <li><a href="#">三爷</a></li>        </ul>

<!-- bootstrap分页 ****    -->        <ul class="pagination" >            <li> <a href="">首页</a> </li>            <li> <a href="">1</a> </li>            <li> <a href="">2</a> </li>            <li> <a href="">3</a> </li>            <li> <a href="">尾页</a> </li>        </ul>

<!-- bootstrap警告框 -->        <div class="alert alert-danger">            <button class="close" data-dismiss="alert">                <span>&times;</span>            </button>            警告框        </div>

<!-- 面板 -->        <div class="panel panel-primary">            <div class="panel-heading"><h1 class="panel-title">这失眠吧</h1> </div>            <div class="panel-body">              <table class="table">              <thead>                <tr><th>学习</th><th>学习</th><th>学习</th></tr>              </thead>              <tbody>                <tr><td>是</td><td>是</td><td>的</td></tr>                <tr><td>是</td><td>是</td><td>的</td></tr>                <tr><td>是</td><td>是</td><td>的</td></tr>              </tbody>              </table>              </div>        </div>

<!-- css模态框start -->   <button class="btn btn-info" data-toggle="modal" data-target="#mymodal" >模态框</button>        <div class="modal" role="dialog" id="mymodal">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <h2 class="modal-title">这是标题  <span class="close"data-dismiss="modal" >&times;</span></h2>                     </div>                    <div class="modal-body">                        确定要修改吗                    </div>                    <div class="modal-footer">                        <button class="btn btn-primary " data-dismiss="modal">关闭</button>                        <button class="btn btn-primary" data-dismiss="modal">保存修改</button>                    </div>                </div>            </div>        </div>        <!-- css模态框end -->        <!-- js模态框start -->        <button class="btn btn-primary" id="motai" >js模态框</button>        <div id="wotai" class="modal" role="dialog">            <div class="modal-dialog" role="document" >                <div class="modal-content">                    <div class="modal-header"> 头 <span class="close"data-dismiss="modal" >&times;</span> </div>                    <div class="modal-body" >ti</div>                    <div class="modal-footer">脚</div>                </div>            </div>        </div><script type="text/javascript">    $(function(){        $("#motai").click(function(){            $("#wotai").modal({                backdrop:'static'       //点击背景不退出模态框            });        })    })</script><!-- js模态框end -->

    <!-- js模态框start2 -->        <button class="btn btn-primary" id="motai" >js模态框</button>        <div id="wtai" class="modal" role="dialog">            <div class="modal-dialog" role="document" >                <div class="modal-content">                    <div class="modal-header"> 头 <span class="close"data-dismiss="modal" >&times;</span> </div>                    <div class="modal-body" >ti</div>                    <div class="modal-footer">                         <button class="btn btn-primary" data-dismiss="modal">关闭</button> <button  class="btn btn-primary" data-dismiss="modal" >保存修改</button>                    </div>                </div>            </div>        </div><script type="text/javascript">    $(function(){        $("#motai").click(function(){            $("#wtai").modal({                backdrop:'static'       //点击背景不退出模态框            });        })        $("#wtai").on("show.bs.modal",function(){            alert("模态框即将显示");        })        $("#wtai").on("shown.bs.modal",function(){            alert("模态框已经显示");        })        $("#wtai").on("hide.bs.modal",function(){            alert("模态框即将隐藏");           })        $("#wtai").on("hidden.bs.modal",function(){            alert("模态框已经隐藏");           })    })</script><!-- js模态框end2 -->

<!-- 轮播图start -->关闭自动轮播$("#myCarousel").carousel('pause');<style type="text/css">     #myCarousel img{        width:100%;    }</style><div class="container">    <div class="carousel slide" id="myCarousel"  >        <!-- 下方小点 -->        <ul class="carousel-indicators">            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>            <li data-target="#myCarousel" data-slide-to="1" ></li>            <li data-target="#myCarousel" data-slide-to="2" ></li>        </ul>        <div class="carousel-inner">            <div class="item active" >                <img src="img/slide1.png">                <div class="carousel-caption"> 第一张轮播图 </div>            </div>            <div class="item" >                <img src="img/slide2.png">                <div class="carousel-caption"> 第2张轮播图 </div>            </div>            <div class="item" >                <img src="img/slide3.png">                <div class="carousel-caption"> 第3张轮播图 </div>            </div>        </div>        <a class="carousel-control left"href="#myCarousel" data-slide="prev" > <span class="glyphicon glyphicon-chevron-left"></span> </a>        <a class="carousel-control right"href="#myCarousel" data-slide="next" > <span class="glyphicon glyphicon-chevron-right"></span> </a>    </div>  </div><!-- 轮播图end -->