BootStrap左侧菜单栏

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

名字太难随便取了

36775人浏览 · 2019-03-17 12:39:29

名字太难随便取了 · 2019-03-17 12:39:29 发布

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。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^