代码：（使用模板引擎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. 使用TTS实现Oracle跨版本迁移

    TTS实现数据库迁移,具有速度快.支持跨平台和跨版本等优点.本文记录了用TTS从10g single迁移到11g RAC的过程. Source数据库版本和字符集设置: SQL> select * ...

  2. leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String

    344. Reverse String 最基础的旋转字符串 class Solution { public: void reverseString(vector<char>& s) ...

  3. 从String.valueOf(null)说起

    同学在群问String.valueOf(null)返回啥,我看了下源码,返回"null"啊,   public static String valueOf(Object obj) ...

  4. JavaScript的基本包装类型说明

    一.基本包装类型: 为了便于操作基本类型值,ECMAScript 还提供了3个特殊的引用类型:Boolean.Number和String.这些基本包装类型,具有与各自基本类型相应的特殊行为. 实际上我 ...

  5. TMS-规划图

    规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 ...

  6. 你知道Java的四种引用类型吗

    关于java四种引用类型,我也是刚了解,特此记下! 在Java中提供了四个级别的引用:强引用,软引用,弱引用和虚引用.在这四个引用类型中,只有强引用FinalReference类是包内可见,其他三种引 ...

  7. Python 学习 第十四篇：命名元组

    Python的元组不能为元组内部的数据进行命名,而 collections.namedtuple 可以来构造一个含有字段名称的元组类,命名元组可以通过逗号+字段名来获取元素值: collections ...

  8. HBase篇(2)-数据模型与操作

    HBase其实就是一个数据库,无非就是存储和增删改查,那我们先从数据模型说起把 这里有一张表,是用关系型数据库的思维画出来的表,这样比较易于理解: 概念 Table(表格) 没啥说的,和关系型数据库一 ...

  9. C# Type.GetType 返回NULL 问题解决记录

    Type.GetType("OP.Client.Html.Resources.KenFengFormMethod"); 从Dll里面获取KenFengFormMethod这个会返回 ...

  10. Quartz.NET 任务调度新教程

    https://www.cnblogs.com/yscit/p/10393867.html