代码：（使用模板引擎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. camke使用例程

    1 同文件夹直接编译 1 同文件夹直接编译 # cmake needs this line cmake_minimum_required(VERSION 2.8) # Define project n ...

  2. pytorch例子学习——NEURAL TRANSFER USING PYTORCH神经迁移

    参考:https://pytorch.org/tutorials/advanced/neural_style_tutorial.html 具体的理论就不解释了,这里主要是解释代码: ⚠️使用的是pyt ...

  3. macOS下appstore提示未能完成该操作的解决办法

    macOS下App Store下载软件,提示:未能完成该操作.(com.apple.commerce.client 错误 500.) 解决办法: 在终端输入 defaults write com.ap ...

  4. Java内存模型与线程安全

    原文链接:blog.edreamoon.com Java内存模型 计算机cpu的运算能力强大,但是数据的存储相对于cpu运算能力需要消耗大量时间,为了充分利用运算能力引入了缓存,但是也为计算机系统带来 ...

  5. python内置的高效好用各种库

    二分查找,import bisect 堆排序,import heapq 哈希算法,import hashlib 压缩,lzma 图形处理,PIL 处理xml文件,PyXML 多媒体操作,PyMedia ...

  6. A2D JS框架 - loadScript实现

    其实这个功能比较小,本着自己造轮子的优良传统....就自己造一个好了 <head> <title></title> <script src="A2D ...

  7. .NetCore简单学习图谱

    一.学习途径 学习.netcore的最佳途径在哪里,无疑是微软官方.netCore指南.它覆盖十分全面,就目前网上经常看到的各种文章都能在微软处找到类似文章,堪称.netcore的百科全书.所以我利用 ...

  8. mysql自增id超大问题查询

    引言 小A正在balabala写代码呢,DBA小B突然发来了一条消息,"快看看你的用户特定信息表T,里面的主键,也就是自增id,都到16亿了,这才多久,在这样下去过不了多久主键就要超出范围了 ...

  9. 如何查看IntelliJ IDEA的版本信息

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. IDEA的版本信息问题 额,说实在的,这篇文章十三一开始也不是很想整 ...

  10. React 与 React Native 底层共识：React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...