软件20-4 陈珊珊 Bootstrap 7

原创 已于 2022-05-05 17:36:23 修改 · 425 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #html

于 2022-05-05 17:32:05 首次发布
本文详细探讨了Bootstrap前端框架的使用，包括其响应式布局、预定义的组件和CSS工具，帮助开发者快速构建美观的网页。通过实例展示了如何结合HTML和JavaScript实现交互效果，进一步提升了Web项目的用户体验。 
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>用户管理</title>

		<!-- Bootstrap -->
		<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<script src="js/vue.global.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div>
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <!-- 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="#">COMO Admin</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">
		        <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页<span class="sr-only">(current)</span></a></li>
		        <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
		        <li><a href="#"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
		          </ul>
		        </li>
				<li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		</div>
		<div id="app">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="list-group">
							<a href="#" class="list-group-item" @click="index=1" :class="{active:index==1}">用户管理</a>
							<a href="#" class="list-group-item" @click="index=2" :class="{active:index==2}">用户搜索</a>
							<a href="#" class="list-group-item">添加用户</a>
						</div>
					</div>
					<div class="col-md-10">
						<div class="page-header">
							<h3> <small>用户管理</small></h3>
						</div>
						<div>
						<!-- Nav tabs -->
						<ul class="nav nav-tabs">
						  <li @click="index=1" :class="{active:index==1}"><a href="#">用户列表</a></li>
						  <li @click="index=2" :class="{active:index==2}"><a href="#">用户搜索</a></li>
						  <li><a href="#">添加用户</a></li>
						</ul>

						<!-- Tab panes -->
						<div class="tab-content">
						  <div class="tab-pane" :class="{active:index==1}">
							<div class="panel panel-default">

							<!-- Table -->
							<table class="table">
							<thead>
							<tr>
								<th>ID</th>
								<th>用户名</th>
								<th>邮箱</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<th scope="row">1</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">2</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">3</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">4</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">5</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">6</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">7</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">8</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">9</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">10</th>
								<td>童</td>
								<td>tong@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							</tbody>
							</table>
							</div>
						  </div>
						<div class="tab-pane" :class="{active:index==2}">用户搜索</div>
						</div>

				</div>
				</div>
				</div>
			</div>
			<!-- #append -->
		</div>
		<div class="container">
		<nav class="pull-right" aria-label="Page navigation">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		</div>
		
		<footer>
		  <div class="container">
		    <div class="row">
		      <div class="col-md-12">
		       Copyright&nbsp;&nbsp; &copy;2019-2020 &nbsp;&nbsp; www.edu.com&nbsp;&nbsp;  ICP备1300号-4
		      </div>
		    </div>
		  </div>
		  </footer>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		 crossorigin="anonymous"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		 crossorigin="anonymous"></script>
		<script type="text/javascript">
			const app = {
				data() {
					return {
						index: 1
					}
				}
			}
			Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

在这里插入图片描述

ddPengPengbb
关注
软件20-4 陈珊珊 Laravel 3
ddPengPengbb的博客
04-03 1103
hello.blade.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" type="text/css" href="{{asset('cs
2115925532 陈珊珊 工程数学大作业.zip
06-14
4. **数值分析**：涉及数值计算的方法，如插值法、牛顿迭代法、龙格-库塔方法（用于求解微分方程）、最优化算法（如梯度下降法、牛顿法）等，这些在工程计算中具有实用性。 5. **复变函数**：复数及其运算、复函数...
Bootstrap环境外部及内部的引入
qq_46179813的博客
04-13 1445
01、外部引入bootrap环境（这种方法必须要联网才可以使用，如果没有网络则不能使用） 1.加载css文件 <!-- 这种方法必须要联网才可以使用，如果没有网络则不能使用 --> <!-- 加载css文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/ ...
软件20-4 陈珊珊 Bootstrap 4
ddPengPengbb的博客
04-17 192
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4 陈珊珊 bootstrap 2
ddPengPengbb的博客
03-23 138
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4 陈珊珊 Bootstrap 6
ddPengPengbb的博客
04-29 157
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4陈珊珊 Bootstrap 5
ddPengPengbb的博客
04-21 128
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4 陈珊珊 bootstrap 1
ddPengPengbb的博客
03-10 136
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4 陈珊珊 Bootstrap 8
ddPengPengbb的博客
05-28 115
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.
软件20-4 陈珊珊 Bootstrap3
ddPengPengbb的博客
04-07 128
<!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 的 CSS 文件 --> <!--
Bootstrap8 软件20-4 陈珊珊
ddPengPengbb的博客
05-24 242
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> &
具有自修复功能的透明_高强度和阻燃_超疏水聚合物复合物膜_陈珊珊.caj
10-01
具有自修复功能的透明_高强度和阻燃_超疏水聚合物复合物膜_陈珊珊.caj
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 284
Boolean。
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 138
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 227
【代码】商城后台管理系统 03 规格参数配置。
Harmony OS Web 组件：如何在新窗口中打开网页（实战分享）
Yihong1833100198的博客
12-17 872
摘要：本文分享了Harmony OS Web组件实现新窗口打开网页的实战经验。通过multiWindowAccess()设置允许新窗口，结合onWindowNew回调捕获并处理网页中的新窗口请求（如target="_blank"链接或window.open调用）。文章提供了典型应用场景（如区分内外链处理）、完整代码示例和常见问题解决方案，帮助开发者实现更智能的网页打开策略，提升应用体验。
网络安全中级阶段学习笔记（七）：Web 安全之文件上传漏洞笔记1（包含upload-labs-master靶场前三关实战）
2501_91976946的博客
12-15 861
摘要：本文系统梳理文件上传漏洞攻防要点，包含漏洞定义、危害（如Webshell控制服务器）、检测流程及多种绕过技巧（JS验证、MIME-Type、黑名单等）。重点提出"白名单+多环节验证"防御方案，包括严格后缀验证、文件类型检测、权限控制等。补充靶场实践案例，演示通过修改后缀、利用解析特性实现漏洞利用。强调防御需结合前端限制、服务端校验与安全监控，构建纵深防护体系。
万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）
mooyuan的网络安全博客
12-18 918
本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。
【每日算法】LeetCode 78. 子集
最新发布
LYFlied的博客
12-18 606
前端开发者学习算法的重要性与实践 文章摘要：算法学习对前端开发者至关重要，是从"页面构建者"向"复杂系统设计者"转变的关键。以LeetCode 78题子集问题为例，展示了回溯法、迭代法和位运算三种解法，并分析了各自的优缺点。回溯法因其可读性和灵活性成为最优解，特别适合前端场景如权限系统、商品筛选器等。文章强调算法思想比具体实现更重要，建议前端开发者通过实际应用场景来理解和练习算法，从而提升技术视野和问题解决能力。
鞅的指数不等式与PAC-Bayesian应用研究
作者陈珊珊针对马尔科夫不等式和PAC-Bayesian不等式进行了系统的研究，以此作为硕士学位论文的一部分，旨在补充当前关于鞅不等式领域的知识空白。 在论文的第一部分，作者概述了指数不等式和PAC-Bayesian不等式的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值