bootstrap-选项卡头部及内容

来源：互联网发布：关注足球淘宝在哪编辑：程序博客网时间：2024/06/01 09:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签页</title>    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">    <script src="../JS/jquery-3.2.1.min.js"></script>    <script src="../JS/bootstrap.js"></script>    <style type="text/css">        .tab-content{border: 1px solid #ddd;border-top: none;padding: 20px;border-radius: 0 0 5px 5px;}        img{width: 350px;height:350px;}    </style></head></head><body style="height: 2000px;">    <div id="container">    <br><br>    <!-- 标签页头部 -->    <ul class="nav nav-tabs">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <br><br>    <ul class="nav nav-tabs" style="width: 500px;">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <br><br>    <ul class="nav nav-tabs nav-justified" style="width: 500px;">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <br><br>    <ul class="nav nav-tabs nav-tabs-justified">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <br><br>    <ul class="nav nav-pills">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <br><br>    <ul class="nav nav-pills nav-stacked">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li><a href="#">three</a></li>    </ul>    <!-- 标签航加下拉菜单 -->    <br><br>    <ul class="nav nav-tabs" style="width: 500px;">        <li class="active"><a href="#">one</a></li>        <li><a href="#">two</a></li>        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle='dropdown'>three<span class="caret"></span></a><!-- data-toggle='dropdown'交互 -->            <ul class="dropdown-menu">                <li><a href="#">a</a></li>                <li><a href="#">b</a></li>                <li><a href="#">c</a></li>            </ul>        </li>    </ul><!-- 标签主体 -->    <br><br><br><br>    <div style="width:400px;position: relative;left: 400px;">        <ul class="nav nav-tabs">            <li class="active"><a href="#a" data-toggle="tab">字懿</a></li>            <li><a href="#b" data-toggle="tab">桑茜雅</a></li>            <li class="dropdown">                <a href="#" class="dropdown-toggle" data-toggle="dropdown">刘冠群                <span class="caret"></span></a>                    <ul class="dropdown-menu">                        <li><a href="#a" data-toggle="tab">字懿</a></li><!-- data-toggle="tab":使能与tab的主体内容链接-->                        <li><a href="#b" data-toggle="tab">桑茜雅</a></li>                    </ul>            </li>        </ul>        <ul class="tab-content">            <li id="a" class="tab-pane fade in active"><img src="../../img/猫1.jpg"></li>            <li id="b" class="tab-pane fade"><img src="../../img/猫2.jpg"></li>            <li id="c" class="tab-pane fade"><img src="../../img/猫3.jpg"></li>        </ul>    </div>    </div></body></html><!-- 标签页  头部：class="nav nav-tabs"nav-tabs：一种标签样式nav-pills:标签的另一种样式，药丸型，类型同nav-tabsnav-justified：自适应宽度，均匀分配，若屏幕变小，则自动变成竖列nav-tabs-justified:下划线和标签的宽度相同 nav-stacked:竖状的样式，一般都是横状的  class="nav nav-pills nav-stacked"一般这样搭配 内容（与下拉菜单不同的是，它是直接显示的）：class="tab-content" class="tab-pane"：tab-pane作为tab-content的内元素才可以进行显示隐藏，class="tab-pane"元素要和标签的data-toggle互相对应，如果data-toggle设置为data-toggle="#demo"则内容元素上要设置id="demo"fade：如果需要为选项卡设置淡入淡出效果, 需要添加 .fade 到每个 .tab-pane后面。第一个选项卡必须添加 .in 类，表示刷新后就直接显示，下面的项设置fadedata-toggle="tab"：使选项卡的头部和内容交互 -->
阅读全文
0 0