代码：（使用模板引擎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. 深度学习框架PyTorch一书的学习-第五章-常用工具模块

    https://github.com/chenyuntc/pytorch-book/blob/v1.0/chapter5-常用工具/chapter5.ipynb 希望大家直接到上面的网址去查看代码,下 ...

  2. 如何让Node.js运行在浏览器端

    Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...

  3. Android自定义相机拍照并使用CardView展示

    直接上完整代码:在Android Studio新建一个项目,然后依次创建: 1.预先在drawable文件夹中保存的图片资源 2.创建:CameraPreView.java类: 3.创建:OnClic ...

  4. Mac环境 安装brew

    一.brew官网主页上的方法: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...

  5. python之函数、参数、作用域、递归

    函数的定义 函数也就是带名字的代码块.使用关键字def来定义,指出函数名及参数,以冒号结尾. def fibs(num): result =[0,1] for i in range(num-2): r ...

  6. [03] SpringBoot+MyBatis+Shiro搭建杂谈

    0.写在前面的话 一直想能仿公司框架的形式,着手做一个简单的脚手架,一来是带着目标性能更好地学习,接触新的技术,另外自己如果有什么想要实现的简单需求,就可以进行快速开发,主要还是希望能在权限上有所控制 ...

  7. 01-vue学习篇-以优雅的姿势创建vue项目

    前言 小白一枚,今年(2019)准备学习一下前端的技术,因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统,可见前端的重要性,于是静下心来跟大佬学习.在不断的激励自己调整自己的 ...

  8. C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步）

    前几天碰到一个线程的顺序执行的问题,就是一个异步线程往A接口发送一个数据请求.另外一个异步线程往B接口发送一个数据请求,当A和B都执行成功了,再往C接口发送一个请求.说真的,一直做BS项目,对线程了解 ...

  9. 很详细全部的WinDbg学习资料

    [ 分类 ]- windbg - hgy413的专栏(﹎゛Never Give Up Your Dream ..ヽ..) - CSDN博客 .

  10. 在Winform开发中使用FastReport创建报表

    FastReport.Net是一款适用于Windows Forms, ASP.NET和MVC框架的功能齐全的报表分析解决方案.可用在Microsoft Visual Studio 2005到2015, ...