Bootstrap导航栏始终固定在页面顶部

最新推荐文章于 2023-10-18 14:51:41 发布

原创最新推荐文章于 2023-10-18 14:51:41 发布 · 7.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html

本文介绍了如何使用Bootstrap框架将导航栏固定在页面顶部。通过引入Bootstrap相关文件，并在HTML中添加`navbar-fixed-top`类，可以实现导航栏始终在页面顶部的效果。

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

Bootstrap导航栏始终在页面顶部

引入文件，这是需要自己去官网下载的

<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />		
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

HTML部分
navbar-fixed-top：使导航条固定在头部

<div class="container-fluid">
			<div class="row">
				<nav class="navbar navbar-fixed-top navbar-default">
					<div class="container">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
       							<span class="sr-only">Toggle navigation</span>
        						<span class="icon-bar"></span>
        						<span class="icon-bar"></span>
       							<span class="icon-bar"></span>
     						 </button>
							<a class="navbar-brand" href="#"><b>xx学院</b></a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown">
									<li>
										<a href="index.html"><b>xx首页</b> <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="index.html"><b>xx博客</b> <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="index.html"><b>前端开发</b> <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="index.html"><b>最新课程</b> <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="index.html"><b>移动APP</b> <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#"><b>联系我们</b></a>
									</li>
								</li>
							</ul>
						</div>
						
					</div>
				
				</nav>
			</div>

		</div>