js标签页

最新推荐文章于 2023-11-02 15:01:43 发布

次次皮

最新推荐文章于 2023-11-02 15:01:43 发布

阅读量531

点赞数

分类专栏： bootstrap学习笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/yszbrzdd/article/details/82714331

版权

bootstrap学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 引入 Bootstrap --> 
        <script src="js/jquery/3.3.1/jquery.min.js"></script> 
        <link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet"> 
        <script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>  
        <script src="js/holder.min.js"></script> 
        <style>
          
        .nav-tabs > li.active > a:focus {
            /*color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;*/
            border-bottom-color: #ddd;
            border-right-color: transparent;
        }
        .nav-tabs > li > a {
            /*margin-right: 2px;
            line-height: 1.42857143;
            border: 1px solid transparent;*/
            border-radius: 4px 0 0 4px;
        }
        body{
            padding: 30px;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <!--js分页标签页开始-->

        <div>

                <!-- Nav tabs -->
                <div class="col-md-2">
                <ul class="nav nav-tabs nav-stacked">
                  <li class="active"><a href="#a" data-toggle="tab">a</a></li>
                  <li><a href="#b" data-toggle="tab">b</a></li>
                  <li><a href="#c" data-toggle="tab">c</a></li>
                  <li><a href="#d" data-toggle="tab">d</a></li>
                </ul>
                </div>
                <!-- Tab panes -->
                <div class="col-md-10">
                <div class="tab-content">
                  <div class="tab-pane fade in active" id="a">a..</div><!--加上.fade in,.fade内容会出现淡入淡出的效果-->
                  <div class="tab-pane fade" id="b">b..</div>
                  <div class="tab-pane fade" id="c">c..</div>
                  <div class="tab-pane fade" id="d">d..</div>
                </div>
            </div>
        </div>
        <!--js分页标签页结束-->
        <!--js胶囊标签页
        <h1 class="page-header">js标签页</h1>
        <div class="col-xs-2">
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#1" data-toggle="tab">1</a>
            </li>
             <li>
                <a href="#2" data-toggle="tab">2</a>
            </li>
             <li>
                <a href="#3" data-toggle="tab">3</a>
            </li>
        </ul>
        </div>
        <div class="col-xs-10 tab-content">
        <div class="tab-pane " id="1">
            <img src="holder.js/700x100"></img>
            <p>11111111111111111111111111111111111111111111111</p>
        </div>
        <div class="tab-pane" id="2">
            <p>22222222222222222222222222222222222222222222222</p>
        </div>
        <div class="tab-pane" id="3">
            <p>33333333333333333333333333333333333333333333333</p>
        </div>
        </div>
        js胶囊标签页结束-->
        
    </div>
    </body>
</html>

次次皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js标签页

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="widt
复制链接

扫一扫

专栏目录