Bootstrap之图片展示界面Demo

时间:2023-03-09 03:12:21
Bootstrap之图片展示界面Demo

代码:(使用模板引擎freemarker)

 <!DOCTYPE html>
<html>
<head>
<title>图片</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#--导航栏-->
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="#" class="navbar-brand"><strong>demo</strong>.com</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!--<span class="icon-bar"></span>-->
</button>
</div>
<div id="nav1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">首页</a></li>
<li><a href="/listStudent">学生信息</a></li>
<li class="active"><a href="/welcome">图片</a></li>
<!--<li><a href="#">个人中心</a></li>-->
</ul>
<form action="" class="navbar-form navbar-right">
<input type="text" placeholder="搜索" class="form-control">
<input type="button" value="搜索" class="form-control">
</form>
<a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">登陆</a>
<a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">注册</a>
</div>
</nav>
</div> <#--主体-->
<div class="container">
<#--上传图片-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
上传图片
</div>
<div class="panel-body">
<form method="post" action="/upload" enctype="multipart/form-data" role="form">
<div class="form-group col-md-6">
<input type="file" name="file" class="form-control">
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
</div>
</div>
</div>
</div> <#--展示图片-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h4>显示所有图片</h4>
<#--<span class="panel-title">显示所有图片</span>-->
</div> <#list picList as pic>
<div class="panel-body">
<#--<img src="./image/zz.png" width="400" height="50"/>-->
<img src="./image/${pic.name}" width="50%" height="50%"/>
<br><br>
<form action="/download" method="get" role="form">
<div class="form-group">
<input type="text" name="fileName" value="${pic.name}" hidden="hidden"/>
<button type="submit" class="btn btn-primary">下载文件</button>
</div>
</form>
</div>
<hr>
</#list>
</div>
</div>
</div>
</div>
</body>
</html>

截图:

Bootstrap之图片展示界面Demo