代码：（使用模板引擎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><a href="/showPics">图片</a></li>

                <li class="active"><a href="/showPics2">图片2</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>

                </div>

                <div class="panel-body">

                <#list picList as pic>

                    <div class="col-sm-6 col-md-4">

                        <div class="thumbnail">

                            <img src="data:image//${pic.name}" alt="...">

                            <div class="caption">

                                <h3>${pic.name}</h3>

                            <#--<p>文字说明</p>-->

                            <#--下载按钮-->

                                <a href="./image/${pic.name}" class="btn btn-default" role="button"

                                   download="${pic.name}">下载</a>

                            </div>

                        </div>

                    </div>

                </#list>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</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. LNMP环境

    准备工作:1)把所有的软件安装在/usr/local/,源码包放在/package/,数据:自定义,日志文件:自定义 创建www所属组及用户/usr/sbin/groupadd www/usr/sbi ...

  2. C# 生成编号（防并发）

    今天抽了点时间,写了一个通用的生成编号的程序! 我的生成规则为年月日+两位编号,即:yyyyMMdd+两位编号,譬如:2018101001 / 2018101002 / 2018101003 首先,一 ...

  3. JDK命令行（jps、jstat、jinfo、jmap、jhat、jstack、jstatd、hprof）与JConsole

    很多资料在介绍JDK命令行工具时并不是在Java8环境下,因此还在使用过时的永久区系列的参数,给一些读者造成困难. Java8使用Metaspace(元空间)代替永久区,对于64位平台,为了压缩JVM ...

  4. NetCore实践篇：分布式监控客户端ZipkinTracer从入门到放弃之路

    前言 本文紧接上篇.Net架构篇:思考如何设计一款实用的分布式监控系统?,上篇仅仅是个思考篇,跟本文没有太大的关系.但有思考,结合现有的开源组件,实践起来更易理解起来,所以看本文之前,应该先看下上篇博 ...

  5. 序列化与ArrayList 的elementData的修饰关键字transient

    transient用来表示一个域不是该对象序行化的一部分,当一个对象被序行化的时候,transient修饰的变量不会被序列化 ArrayList的动态数组elementData被transient  ...

  6. WebApi集成Swagger

    1.新建一个WebApi空项目 2.新建一个Person实体类: public class Person { public int ID { get; set; } public string Use ...

  7. Flask的蓝图和红图

    1.蓝图 对于简单的项目来说,比如项目就只有一个user模块,我们可以都将视图函数定义在一个文件里面,不需要用到蓝图. 但是如果我们的项目有多个模块,如下有v1模块,v2模块.....等,那么如果我们 ...

  8. Krpano教程tour.xml详解

    <krpano version="1.18" //版本号 onstart="" //网页启动时调用的函数 basedir="%FIRSTXML% ...

  9. H5 30-CSS元素的显示模式

    30-CSS元素的显示模式 我是div 我是段落 我是标题 我是span 我是加粗 我是强调 <!DOCTYPE html><html lang="en"> ...

  10. amd，cmd规范

    AMD 和 CMD 的区别有哪些? AMD规范与CMD规范的区别 回顾:前端模块化和AMD.CMD规范(全) 浅析JS模块规范:AMD,CMD,CommonJS 理解AMD ,CMD,CommonJS ...