【响应式Web前端设计】Bootstrap入门Demo(导航栏)

最新推荐文章于 2025-05-13 09:42:22 发布

理想不闪火

最新推荐文章于 2025-05-13 09:42:22 发布

阅读量678

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # 前端

本文链接：https://blog.csdn.net/weixin_43838785/article/details/114269663

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用Bootstrap创建带有固定顶部导航栏的网页布局，并展示了简单的样式调整方法。

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

1 导入bootstrap.min.css

在这里插入图片描述

2 效果

在这里插入图片描述

3 代码


<!--
	作者：88304454@qq.com
	时间：2021-03-01
	描述：
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>bootstrap</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			body{
				padding-top: 50px;
			}
			.stater{
				padding: 40px 15px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top" role="nabigation">
			<div class="container">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">Project Name</a>
				</div>
				<div id="navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contect</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="stater">
				<h1>lx</h1>
				<p class="lead">
				lixiang
				</p>
			</div>
			
		</div>
	</body>
</html>