BootStrap左侧菜单栏

最新推荐文章于 2021-12-23 21:58:09 发布

名字太难随便取了

最新推荐文章于 2021-12-23 21:58:09 发布

阅读量3.6w

点赞数 5

分类专栏： bootstrap 文章标签： bootstrap 左侧菜单折叠菜单

本文链接：https://blog.csdn.net/pinkling/article/details/88617226

版权

bootstrap 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1. 事先说明

事先说明，此代码比较简短所以并没有美化，所以css需要自己再补一些。

另外，我比较菜。。刚进入前端，只能用vue、avue和element做一点公司的crud，勿喷

2. 做法过程

bootstrap折叠

主要使用的是上面链接的功能。

代码：

    <div>
		<!-- 侧边栏标签页 -->
		<ul class="nav nav-pills nav-stacked">
			<!-- 侧边栏选项 -->
			<li role="presentation" class="active">
				<!-- 选项控制data-target对应的显隐 -->
				<a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
				<!-- 隐藏的详细菜单 -->
				<ul id="list" class="collapse in">
					<li>
						<a href="">
							操作一
						</a>
					</li>
					<li><a href="">操作二</a></li>
				</ul>
			</li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
	</div>

应该都能看懂

引用了bootstrap3 参考了bootstrap3中文文档

算是很简短了，主要利用菜鸟教程上面写的折叠将ul折叠起来了，通过点击控制折叠与否。

data-target要对应ul的id 此处我也不懂，应该是类似vue中的 :data 绑定吧

贴一下全部代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="admin.css"/>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title>
		E-SHOP
	</title>
</head>

<body class="loginBgColor">
	
	<div>
		<!-- 侧边栏标签页 -->
		<ul class="nav nav-pills nav-stacked">
			<!-- 侧边栏选项 -->
			<li role="presentation" class="active">
				<!-- 选项控制data-target对应的显隐 -->
				<a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
				<!-- 隐藏的详细菜单 -->
				<ul id="list" class="collapse in">
					<li class="active">
						<a href="">
							操作一
						</a>
					</li>
					<li><a href="">操作二</a></li>
				</ul>
			</li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
	</div>
	
	
	<script type="text/javascript">
		
	</script>
</body>

</html>

实验的时候可以把我引入的自己的css去掉，在这个页面中我只在body处加了一个background-color。

名字太难随便取了

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
BootStrap左侧菜单栏

1. 事先说明事先说明，此代码比较简短所以并没有美化，所以css需要自己再补一些。另外，我比较菜。。刚进入前端，只能用vue、avue和element做一点公司的crud，勿喷2. 做法过程bootstrap折叠主要使用的是上面链接的功能。代码： &lt;div&gt; &lt;!-- 侧边栏标签页 --&gt; &lt;ul class="na...
复制链接

扫一扫

专栏目录