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>