<!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-tabs
nav-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 类,表示刷新后就直接显示,下面的项设置fade
data-toggle="tab":使选项卡的头部和内容交互
-->
bootstrap-选项卡头部及内容
最新推荐文章于 2022-04-30 13:53:03 发布