Bootstrap 4 .card-header-pills类
使用Bootstrap4中的card-header-pills类在卡片标题中设置导航药片的样式。
使用Card-header-pill设置导航-
<ul class="nav nav-pills card-header-pills">
以下是将car-header-pills类与na-pills类一起使用的代码片段-
<div class="card">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Java</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C</a>
</li>
</ul>
</div>
</div>以下是实现card-header-pillsBootstrap4类的示例-
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Programming</h2>
<div class="card">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Java</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C++</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Java Installation</h5>
<p class="card-text">Download JAVA JDK from Oracle Java website and...</p>
</div>
</div>
</div>
</body>
</html>热门推荐
10 宝宝周岁可乐祝福语简短
11 祝福语简短古诗词
12 生日祝福语大全女生简短
13 生日祝福语简短独特的
14 叔叔生日祝福语简短励志
15 很暧昧的简短祝福语
16 好朋友夫妻祝福语简短
17 周末祝福语简短的英语
18 圣诞祝福语简短小学