代码：（使用模板引擎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. MemCache在.NET中使用Memcached.ClientLibrary详解 转发 https://www.cnblogs.com/li150dan/p/9529112.html

    本文说明:memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法 首先下载客户端的3个dll,ICSharpCode.SharpZipLib.d ...

  2. 操作循环的关键字switch，break，return的应用及区别

    break 使用break结束循环  break可以终止循环 和 switch语句的运行; break用于结束一个循环,即跳出循环体,执行循环体之后的代码: switch 使用continue提前结束 ...

  3. Egg入门学习(一)

    一:什么是Egg? 它能做什么?Egg.js是nodejs的一个框架,它是基于koa框架的基础之上的上层框架,它继承了koa的,它可以帮助开发人员提高开发效率和维护成本.Egg约定了一些规则,在开发中 ...

  4. .Net Core 在 Linux-Centos上的部署实战教程（一）

    pa我是在VS2017上写好项目然后来部署的,我的宗旨能截图就少BB 服务器系统: Asp.Net Core版本: 1.往服务器安装.net core 2.1 https://www.microsof ...

  5. Item 16: 让const成员函数做到线程安全

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果我们在数学领域里工作,我们可能会发现用一个类来表示多项式会很方 ...

  6. ubuntu 添加开机启动服务

    新建umpserver.service [Unit] Description=UMPServer After=syslog.target network.target remote-fs.target ...

  7. iptables防火墙规则的添加、删除、修改、保存

    原文地址:https://blog.csdn.net/educast/article/details/52093390 本文介绍iptables这个Linux下最强大的防火墙工具,包括配置iptabl ...

  8. python第一章：简介与安装--小白博客

    Python简介 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...

  9. MySQL的常用命令：添加外键，修改字段名称，增加字段 设置主键自增长等

    Mysql命令添加外键 前提是有这么几个表  以mall_product 和 mall_category为例 ALTER TABLE mall_product ADD CONSTRAINT fore_ ...

  10. hadoop：如何运行自带wordcount

    1.在linux系统创建文件 vi aa.txt   --------i 进行编辑  输入  内容(多个单词例如:aa bb cc aa) 2.在HDFS上面创建文件夹 hdfs dfs -mkdir ...