Bootstarp学习教程(12) 导航组件分析

无情 阅读:182 2021-04-01 00:25:51 评论:0


导航:Bootstrap中可用的导航有相似的标记,用基类.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.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号