代码：（使用模板引擎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的更多相关文章

  1. Bootstrap之图片展示界面Demo2

    代码:(使用模板引擎freemarker) <!DOCTYPE html> <html> <head> <title>图片</title> ...

  2. 基于canvas图像处理的图片展示demo

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  3. java+js实现完整的图片展示本地目录demo

    java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...

  4. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

  5. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  6. 常量，字段，构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图，改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq

    常量,字段,构造方法   常量 1.什么是常量 ​ 常量是值从不变化的符号,在编译之前值就必须确定.编译后,常量值会保存到程序集元数据中.所以,常量必须是编译器识别的基元类型的常量,如:Boolean ...

  7. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  8. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  9. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

随机推荐

  1. hyperledger中文文档学习-4-构建第一个fabric网络

    接下来的操作都将在hyperledge环境安装构建的虚拟机的环境下进行 参考https://hyperledgercn.github.io/hyperledgerDocs/build_network_ ...

  2. i春秋-百度杯十月场-EXEC

    进入网站,查看源代码,发现是用vim编辑,而抓包没有有效信息,加参数也无果.百度查了一下vim能形成什么文件.找到答案说,用vim编辑文本xxx.php中途退出,会自动创建一个文件.xxx.php.s ...

  3. Python排序算法——插入排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10787464.html 一.插入排序(Inse ...

  4. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  5. MVC5 + EF6 完整教程 (转)

    点击查看: MVC5 + EF6

  6. BZOJ1064 NOI2008 假面舞会 图论

    传送门 将一组关系\((A,B)\)之间连一条边,那么显然如果图中存在环长为\(len\)的环,那么面具的种数一定是\(len\)的因数. 值得注意的是这里环的关系除了\(A \rightarrow ...

  7. 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 （第二节）

    说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...

  8. C\S 架构 DNS服务器 交换机 路由器

    ------------------------只有不快的斧,没有劈不开的柴;只有想不到的人,没有做不到的事.想干总会有办法,不想干总会有理由!# -------------------------- ...

  9. struts2之配置文件struts.xml详解

    struts配置文件 struts.xml配置参数详解 struts.xml中很大一部分配置默认配置就好了 但是有些还是需要做了解  以便于理解 和修改 <?xml version=" ...

  10. python文件读和写

    fileHandle = open ( 'G:/qqfile/1.txt','w' )fileHandle.write('abcd')#写文件 地址要用反斜杠fileHandle.close() fi ...