Bootstrap---导航条响应式

最新推荐文章于 2023-06-12 10:21:27 发布

GQ_cyan

最新推荐文章于 2023-06-12 10:21:27 发布

阅读量963

点赞数

CC 4.0 BY-SA版权

分类专栏： css系列

本文链接：https://blog.youkuaiyun.com/GQ_cyan/article/details/52475501

web前端同时被 2 个专栏收录

43 篇文章

订阅专栏

css系列

11 篇文章

订阅专栏

本文介绍如何使用Bootstrap框架实现响应式导航条。通过HTML、CSS和JavaScript代码展示了一个包含品牌标识和导航链接的实例，并解释了关键属性如.navbar、.navbar-toggle及data-toggle等的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航条：

.navbar .navbar-fixed-top .navbar-fixed-bottom .navbar-inverse .navcollapse data-target="#example-navbar-collapse" data-toggle="collapse"

class="navbar-toggle"

代码实现响应式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js<span style="color:#ff0000;">/bootstrap.min.js</span>"></script>
<link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" />
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#example-navbar-collapse">
			<span class="sr-only">切换导航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">cyan</a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

结果：