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

最新推荐文章于 2022-01-10 22:02:52 发布

qq_26495107

最新推荐文章于 2022-01-10 22:02:52 发布

阅读量457

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap表单

本文链接：https://blog.csdn.net/qq_26495107/article/details/72639193

bootstrap表单专栏收录该内容

8 篇文章

订阅专栏

本文通过具体实例介绍了Bootstrap中常用组件的应用，包括面包屑导航、分页、警告框、面板、模态框及轮播图等。这些组件能帮助开发者快速搭建美观且响应式的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 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 -->