代码：（使用模板引擎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. AT987 高橋君

    AT987 高橋君 给出 \(n,\ k\) ,求 \(\displaystyle\sum_{i=0}^kC_n^k\) , \(T\) 次询问 \(T\leq10^5,\ 0\leq k\leq n ...

  2. Java的错误类型

    程序的错误分为:编译期语法错误.运行期异常错误和运行期逻辑错误 (1)编译期语法错误可以借助Eclipse的帮助方便地定位错误,并进行修改 如: (2)运行期异常,即 没有语法错误,编译可以通过,但运 ...

  3. nginx + tomcat = http && https

    Tomcat版块配置: vim /to/path/conf/server.xml <Server port="" shutdown="SHUTDOWN"& ...

  4. [intoj#7]最短距离

    190227模拟 题目描述 给定一张 N 个点的有向图,点 i 到点 j 有一条长度为 i/gcd(i,j) 的边. 有个 Q 询问,每个询问包含两个数 x, y,求从点 x 出发到点 y 的最短距离 ...

  5. Java常见的几种内存溢出及解决方案

    1.JVM Heap(堆)溢出:java.lang.OutOfMemoryError: Java heap space JVM在启动的时候会自动设置JVM Heap的值, 可以利用JVM提供的-Xmn ...

  6. WebApi测试工具：SAEA.RESTED

    写好一个Api接口不知道怎么测试?试试SAEA.RESTED吧——无需任何代码.不污染主项目.快速上手.不依赖IIS,可供多人共享使用!下面就跟着本文查看如何使用吧:1.下载安装:https://gi ...

  7. WPF保存包含Winform控件的XAML页面问题

    原文:WPF保存包含Winform控件的XAML页面问题 最近的工作中,用到了WPF调用Winform控件 但是在保存XAML页面的时候发现了问题,就是Winform页面黑黑的,没有任何渲染的波形曲线 ...

  8. CentOS7 安装MySQL5.6

    1.  检查是否有MariaDB和MySQL,如果有则卸载掉 [root@--- ~]# rpm -qa | egrep "mariadb|mysql" mariadb-serve ...

  9. 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册

    项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...

  10. layui轮播中箭头不起作用问题

    layui轮播中箭头不起作用问题 layui轮播插件在使用中发现箭头不起作用其他都合适,是什么原因造成的呢?发现单独提出layui中的demo是合适的,通过仔细慢慢的寻找,发现layui.use('c ...