免費(fèi)AI編程助手
Bootstrap 膠囊式標(biāo)簽頁(yè)
2018-03-06 14:02 更新
nav 類通用于標(biāo)簽和膠囊（Pills）。
我們可以使用基類 .nav-pills而不是 .nav-tabs創(chuàng)建基礎(chǔ)的基于pills的導(dǎo)航，而不需要對(duì)標(biāo)記進(jìn)行任何進(jìn)一步的更改。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<ul class="nav nav-pills">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Liked Pages</a></li>
</ul>
</body>
</html>例子
我們可以通過(guò)附加一個(gè)額外的類nav-stack來(lái)垂直堆疊這些pills：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Liked Pages</a></li>
</ul>
</body>
</html>添加圖標(biāo)到膠囊式導(dǎo)航
我們可以添加圖標(biāo)到膠囊式導(dǎo)航。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
</ul>
</div>
</body>
</html>折疊膠囊式導(dǎo)航
默認(rèn)情況下膠囊式導(dǎo)航是水平的。要使pills垂直折疊，需在<ul>元素中添加一個(gè)額外的類.nav-stacked。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</body>
</html>對(duì)齊標(biāo)簽和Pills
我們可以通過(guò)添加額外的類.nav-justified使標(biāo)簽和膠囊式導(dǎo)航寬度等于其父元素。
它只適用于寬大于768px的屏幕，在較小的屏幕上，導(dǎo)航鏈接是堆疊的。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Justified pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</body>
</html>禁用Pill組件中的鏈接
我們可以使用類.disabled讓導(dǎo)航中的所有鏈接顯示為禁用。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h3>Pills with Disable Links</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="disabled"><a href="#">Admin</a></li>
</ul>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：