代码：（使用模板引擎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. Python实现机器人聊天

    今天午休的时候,无意之中看了一篇博客,名字叫Python实现机器人,感觉挺有的意思的.于是用其写了一个简单的Python聊天,源码如下所示: # -*- coding: utf- -*- import ...

  2. CentOS7时间设置问题

    本地安装一个VMWare player虚拟机客户端,并安装了Linux CentOS7 Basic Web Server系统,时区在安装时已经选择了Asia/Shanghai,但是安装完成后,时间和当 ...

  3. 淡旺季机票的价格问题（switch语句与if-else语句嵌套）

    项目背景 淡旺季机票的价格,原价机票价格为5000元, 淡季头等舱打5折,经济舱打4折 旺季头等舱打9折,经济舱打8折 要求 编写程序实现: 输入任意的月份与舱位来计算机票的价格 1代表头等舱,2代表 ...

  4. Apollo 3.0 硬件与系统安装指南

    https://github.com/ApolloAuto/apollo/blob/master/docs/quickstart/apollo_3_0_hardware_system_installa ...

  5. Android自定义相机拍照并使用CardView展示

    直接上完整代码:在Android Studio新建一个项目,然后依次创建: 1.预先在drawable文件夹中保存的图片资源 2.创建:CameraPreView.java类: 3.创建:OnClic ...

  6. oracle impdp将导出用户的所有对象导入至另一个用户下，生成的触发器语句问题处理

    问题产生的操作步骤及详细说明: 1)操作的数据库是oracle 11g,先通过命令将用户GAS_NEW的数据导出,命令语句如下: expdp GAS_NEW/GAS_NEW@ORCL schemas= ...

  7. RabbitMQ详解（三）------RabbitMQ的五种队列

    上一篇博客我们介绍了RabbitMQ消息通信中的一些基本概念,这篇博客我们介绍 RabbitMQ 的五种工作模式,这也是实际使用RabbitMQ需要重点关注的. 这里是RabbitMQ 官网中的相关介 ...

  8. IntelliJ IDEA 高效率配置

    之前学习和开发的时候一直用Eclipse,现在转战IDEA,记录一下IDEA的个性化设置,有助于提高效率.(参考:http://www.cnblogs.com/huaxingtianxia/p/586 ...

  9. 下面哪项技术可以用在WEB开发中实现会话跟踪实现？

    下面哪项技术可以用在WEB开发中实现会话跟踪实现? A:session B:Cookie C:地址重写 D:隐藏域 答案:ABCD 会话跟踪是一种灵活.轻便的机制,它使Web上的状态编程变为可能. H ...

  10. 使用hibernate造成的MySql 8小时问题解决方案

    本文借鉴了网上的很多博客,在此不再声明 总结 1.增加 MySQL 的 wait_timeout 属性的值(不推荐) mysql5之前的版本,可以在jdbc连接的url中加入:autoReconnec ...