代码：（使用模板引擎freemarker）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>图片</title>
  5.     <meta charset="UTF-8"/>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  7.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8. </head>
  9. <body>
  10. <#--导航栏-->
  11. <div class="container">
  12.     <nav class="navbar navbar-inverse">
  13.         <div class="navbar-header">
  14.             <a href="#" class="navbar-brand"><strong>demo</strong>.com</a>
  15.             <button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
  16.                 <span class="icon-bar"></span>
  17.                 <span class="icon-bar"></span>
  18.                 <span class="icon-bar"></span>
  19.                 <span class="icon-bar"></span>
  20.             </button>
  21.         </div>
  22.         <div id="nav1" class="collapse navbar-collapse">
  23.             <ul class="nav navbar-nav">
  24.                 <li><a href="/">首页</a></li>
  25.                 <li><a href="/listStudent">学生信息</a></li>
  26.                 <li><a href="/showPics">图片</a></li>
  27.                 <li class="active"><a href="/showPics2">图片2</a></li>
  28.             </ul>
  29.             <form action="" class="navbar-form navbar-right">
  30.                 <input type="text" placeholder="搜索" class="form-control">
  31.                 <input type="button" value="搜索" class="form-control">
  32.             </form>
  33.             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">登陆</a>
  34.             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">注册</a>
  35.         </div>
  36.     </nav>
  37. </div>
  38.  
  39. <#--主体-->
  40. <div class="container">
  41. <#--上传图片-->
  42.     <div class="row">
  43.         <div class="col-md-12">
  44.             <div class="panel panel-primary">
  45.                 <div class="panel-heading">
  46.                     上传图片
  47.                 </div>
  48.                 <div class="panel-body">
  49.                     <form method="post" action="/upload" enctype="multipart/form-data" role="form">
  50.                         <div class="form-group col-md-6">
  51.                             <input type="file" name="file" class="form-control">
  52.                         </div>
  53.                         <div class="form-group col-md-2">
  54.                             <button type="submit" class="btn btn-default">提交</button>
  55.                         </div>
  56.                     </form>
  57.                 </div>
  58.             </div>
  59.         </div>
  60.     </div>
  61.  
  62. <#--展示图片-->
  63.     <div class="row">
  64.         <div class="col-md-12">
  65.             <div class="panel panel-primary">
  66.                 <div class="panel-heading text-center">
  67.                     <h4>显示所有图片</h4>
  68.                 </div>
  69.                 <div class="panel-body">
  70.                 <#list picList as pic>
  71.                     <div class="col-sm-6 col-md-4">
  72.                         <div class="thumbnail">
  73.                             <img src="data:image//${pic.name}" alt="...">
  74.                             <div class="caption">
  75.                                 <h3>${pic.name}</h3>
  76.                             <#--<p>文字说明</p>-->
  77.                             <#--下载按钮-->
  78.                                 <a href="./image/${pic.name}" class="btn btn-default" role="button"
  79.                                    download="${pic.name}">下载</a>
  80.                             </div>
  81.                         </div>
  82.                     </div>
  83.                 </#list>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </div>
  88.  
  89. </div>
  90. </body>
  91. </html>

截图：

Bootstrap之图片展示界面Demo2的更多相关文章

  1. Bootstrap之图片展示界面Demo

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

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

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

  3. iOS开发-仿微信图片分享界面实现

    分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿 ...

  4. Matplotlib数据可视化（7）：图片展示与保存

    In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...

  5. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  6. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  7. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...

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

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

  9. iOS开发之静态库（五）—— 图片、界面xib等资源文件封装到静态框架framework

    编译环境:Macbook Air + OS X 10.9.2 + XCode5.1 + iPhone5s(iOS7.0.3) 一.首先将资源文件打包成bundle 由于bundle是静态的,所以可以将 ...

随机推荐

  1. ESP8266 mDNS

    https://circuits4you.com/2017/12/31/esp8266-mdns/ 本教程介绍如何使用ESP8266进行多播DNS?在网络世界中,很难记住每个网站和计算机的IP地址,解 ...

  2. tomcat配置通过域名直接访问项目首页步骤

    假设www.ctool.top.ip:192.168.122.135 step 1 申请一个域名并做好DNS解析,或者在hosts文件做域名指向 #vim /etc/hosts www.ctool.t ...

  3. 分区默认segment大小变化(64k—>8M)

    _partition_large_extents和_index_partition_large_extents 参考: http://www.xifenfei.com/2013/08/%E5%88%8 ...

  4. APP耗电量测试

    现象 APP耗电,导致电池续航能力不佳,如下图,在小米MIX2和iPhone X机型上后台静默一小时各应用的耗电排行: 基本概念 相对于PC来说,移动设备的电池电量是非常有限的,保持持久的续航能力尤为 ...

  5. Run Redis

    Cmd window enter console Cd\ E: Cd E:\Graduration\Redis\github Run redis for window 64 After cmd ent ...

  6. jvm 年轻代、年老代、永久代

    关键字约定 Young generation –>新生代    Tenured / Old Generation –>老年代    Perm Area –>永久代 年轻代: 所有新生 ...

  7. 5238-整数校验器-洛谷3月赛gg祭

    传送门 题目描述 有些时候需要解决这样一类问题:判断一个数 x是否合法. x合法当且仅当其满足如下条件: x格式合法,一个格式合法的整数要么是 0,要么由一个可加可不加的负号,一个 1到 9 之间的数 ...

  8. PAT A1095 Cars on Campus （30 分）——排序，时序，从头遍历会超时

    Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...

  9. 原生js 函数 callee属性

    一.在es5中,函数中有arguments参数,该参数是一个包含函数传入的参数的类数组. <script> function myArrgu(x){ console.log(argumen ...

  10. mysql存储引擎之MyISAM 和 InnoDB的比较

    一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...