Bootstarp学习教程（12） 导航组件
无情
阅读：587
2021-04-01 00:25:51
评论：0
.nav开头，这是相似的部分。改变修饰类可以改变样式。
标签页:注意.nav-tabs类需要.nav基类。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<div class="row"></div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Messages</a>
</li>
</ul>
</div>
</body>
</html>
胶囊式标签页：
<body>
<br/>
<div class="container">
<div class="row"></div>
<ul class="nav nav nav-pills">
<li class="active"><a href="#">主页</a>
</li>
<li><a href="#">简介</a>
</li>
<li><a href="#">信息</a>
</li>
</ul>
</div>
</body>
两端对齐的导航：在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
注意：（Safari 和响应式两端对齐导航：Safari有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。此bug可以在justified nav example页面得到重现。）
<body>
<br/>
<div class="container">
<div class="row"></div>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">主页</a>
</li>
<li><a href="#">简介</a>
</li>
<li><a href="#">信息</a>
</li>
</ul>
</div>
</body>
禁用的链接：对任何导航（包括标签页，pills，或列表，加入.disabled使链接为灰色且没有鼠标悬停效果。
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
