代码：（使用模板引擎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. TypeError: Buffer.alloc is not a function

    错误信息:TypeError: Buffer.alloc is not a function 截图如下: 解决办法(依次从上往下执行): sudo npm cache clean -f sudo np ...

  2. 根据成绩输出对应的等级(使用if多分支和switch语句分别实现)

    根据成绩输出对应的等级,使用if多分支和switch语句分别实现. a)        A级   [90,100] b)        B级   [80,90) c)        C级   [70, ...

  3. Linux内核入门到放弃-进程虚拟内存-《深入Linux内核架构》笔记

    进程地址空间的布局 <mm_types.h> <mm_types.h> struct mm_struct { ... unsigned long (*get_unmapped_ ...

  4. PAT A1094 The Largest Generation （25 分）——树的bfs遍历

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  5. 关于vue的混入使用

    普通使用: 定义一个 mixin.js文件 随便定一些数据 记得后面导出 然后在需要用的文件 就可以获取了. 全局混合: 引入vue 全局注册混合 main.js 入口文件引入 然后就可以在所有页面使 ...

  6. [Spark][kafka]kafka 的topic 创建和删除试验

    kafka 的topic 创建和删除试验 zookeeper和kafka 的安装,参考: http://www.cnblogs.com/caoguo/p/5958608.html 参考上述URL后,在 ...

  7. Raspberry Zero 上实现平滑视频图传

    在某些应用场合我们可能需要通过一个设备通过WIFI将图像传到其它的机器进行显示或者图形分析,那怎么可以低成本地实现呢?其实很简单,我们只需要一块 Raspberry Zero W 和一个RPI 摄像头 ...

  8. 开源纯C#工控网关+组态软件(二)工控网关的实现

    一.   工控网关是什么 网关是物联网和工控系统的核心组件.网关起的是承上启下的作用.上即上位机,电脑/触屏监控系统.MES这些:下即下位机,包括PLC.传感器.嵌入式芯片等. 不同厂家的下位机,往往 ...

  9. 十三、MUI的日期起始和结束日期设置

    MUI的日期选择器的使用 // 日期选择器 //生日选择器(不会超过今年) function fdPicker1(id) { var year=new Date().getFullYear(); va ...

  10. Python-递归复习-斐波那契-阶乘-52

    # 超过最大递归限制的报错# 只要写递归函数,必须要有结束条件. # 返回值# 不要只看到return就认为已经返回了.要看返回操作是在递归到第几层的时候发生的,然后返回给了谁.# 如果不是返回给最外 ...