Gaya berwajar nav Bootstrap
Hasil terjemahan:
nav
abbr.navigasi; navigasi; perkara berlaku atas sebab
v. buktikan... dibenarkan (past tense and past participle of justify) Fungsi: Untuk tab yang dijajarkan, pada skrin yang lebih besar daripada 768px, kelas .nav-justified boleh menjadikan tab atau tab kapsul kelihatan dengan lebar yang sama. Pada skrin kecil, pautan navigasi kelihatan bertindan. Klik butang "Run Instance" untuk melihat contoh dalam talianGaya berwajar nav Bootstrapsintaks
Gaya berwajar nav Bootstrapcontoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>两端对齐的标签页</h2>
<p>在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。</p>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">About</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>