bootstrap实现经典的导航栏加内容区，外加菜单滑动特效

最新推荐文章于 2024-06-27 11:30:00 发布

cjx不吃包子

最新推荐文章于 2024-06-27 11:30:00 发布

阅读量1.5k

点赞数 4

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_39240442/article/details/107101946

版权

本文介绍如何使用Bootstrap快速搭建一个包含导航栏、内容区域和具有菜单滑动特效的页面。通过引入Bootstrap CSS，设置iframe内容区，并通过CSS实现过渡效果和菜单悬停时的滑动特效。

摘要由CSDN通过智能技术生成

bootstrap实现导航栏+内容去+菜单滑动特效

今天给大家分享一个快速搭建导航页的demo，先展示一下效果图
在这里插入图片描述
顶部是我们logo区域，左侧是菜单栏，右侧是对应菜单的内容区域。
在写页面之前，先引入我们需要的通用css

这边我引用的不是cdn上的，所以大家可以自己根据需要引入boostrap的css即可。话不多说，直接上代码

<body style="height: 100vh">
		<nav class="navbar navbar-dark bg-dark" style="padding-right: 0px;height: 9%;color: wheat;justify-content:flex-start">
			<a class="navbar-brand" href="#">Logo</a>
		</nav>
		<div class="container-fluid" style="height:90%">
			<div id="main" class="row" style="height:100%">
				<div id="left" class="col-md-2 bg-dark" style="height:100%;">
					<ul class="list-group list-group-flush bg-dark">
						<li class="list-group-item active bg-dark"><a class="stretched-link" href="./index.html" target="content">
								<i class="glyphicon glyphicon-home"></i>首页</