我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了！
标签页的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./jquery/jquery-3.4.1.min.js"></script>
<!--引入js文件-->
<script src="./bootstrap/js/bootstrap.js"></script>
<style>
.container {
border: silver 1px solid;
}
.navbar-right{
margin-right: 10px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
background-color: rgb(60, 123, 102);
}
.tab1{
color: #fff;
background-color: rgb(60, 123, 102);
}
.drink{
text-align: center;
}
</style>
</head>
<body>
<div role="tabpanel" class="container">
<!-- Nav tabs -->
<!--选项卡-->
<div class="row">
<img src="#" alt="" style="height:15px;" class="hidden-xs">
<ul class="nav nav-tabs navbar-right" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
</li>
<li role="presentation" class="tabs1">
<a href="#tab1" aria-controls="tab" role="tab" data-toggle="tab">tab</a>
</li>
<li role="presentation" class="tabs1">
<a href="#tab2" aria-controls="tab" role="tab" data-toggle="tab">tab</a>
</li>
</ul>
</div>
<!--内容-->
<!-- Tab panes -->
<div class="row">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 drink" >
<img src="./imgs/cat.jpg">
<h5>drink</h5>
<p>$0.12</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab1">2
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 drink" >
<img src="./imgs/cat.jpg">
<h5>drink</h5>
<p>$0.12</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 drink" >
<img src="./imgs/cat.jpg">
<h5>drink</h5>
<p>$0.11</p>
</div>
</div>
</div>
</div>
</body>
</html>
代码截图
总结
$:手动启动）： (function(){ (".carousel").carousel( {interval: 1000} ); })
nav:导航；
nav-pills:胶囊样式;
class="hidden-xs":最小屏时隐藏；class="visible-xs"最小屏时出现
看到aria可以不用管；
data-toggle="tab"：切换
