代码：（使用模板引擎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 绑定 C，C++ 参考工具介绍

    https://wiki.python.org/moin/IntegratingPythonWithOtherLanguages 完.

  2. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  3. SpringBoot之加密

    最近利用闲暇时间写了一个博客系统,主要参考wordpress,主要目的是为了提高自己的技术能力.写代码写了两年多,联系到之前在学校的时候写过的一个博客系统,发现工作中开发的系统,技术上基本一致,业务逻 ...

  4. UITextFieldDelegate 说明

    - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField  // 返回YES,允许进行编辑 - (void)textFieldDidBe ...

  5. 面试：用 Java 实现一个 Singleton 模式

    面试:用 Java 实现一个 Singleton 模式 面试系列更新后,终于迎来了我们的第一期,我们也将贴近<剑指 Offer>的题目给大家带来 Java 的讲解,个人还是非常推荐< ...

  6. iOS开发简记（7）：网络请求模块

    主流的APP都少不了跟服务器交互,网络请求是少不了的事情. 开源的网络请求库,有很多,比如:AFNetworking.YTKNetwork.PPNetworkHelper.ASIHttpRequest ...

  7. Python—反射

    反射 1 什么是反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它 ...

  8. OSS网页上传和断点续传（STSToken篇）

    云账号AccessKey拥有所有API访问权限,在客户端不要直接使用,会泄露ak信息,造成安全问题.所以使用STS方式(临时账号权限)给客户端授权. C#版获取STSToken 一.下载阿里SDK(a ...

  9. 了解sso原理

  10. fun = [lambda x: x*i for i in range(4)] 本质解析/原理，LEGB规则 闭包原理

    命名空间,闭包原理,参考点击本文 一.问题描述 fun = [lambda x: x*i for i in range(4)] for item in fun: print(item(1)) 上述式子 ...