• Bootstrap之图片展示界面Demo


    代码:(使用模板引擎freemarker)

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>图片</title>
     5     <meta charset="UTF-8"/>
     6     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     7     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     8 </head>
     9 <body>
    10 <#--导航栏-->
    11 <div class="container">
    12     <nav class="navbar navbar-inverse">
    13         <div class="navbar-header">
    14             <a href="#" class="navbar-brand"><strong>demo</strong>.com</a>
    15             <button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
    16                 <span class="icon-bar"></span>
    17                 <span class="icon-bar"></span>
    18                 <span class="icon-bar"></span>
    19                 <!--<span class="icon-bar"></span>-->
    20             </button>
    21         </div>
    22         <div id="nav1" class="collapse navbar-collapse">
    23             <ul class="nav navbar-nav">
    24                 <li><a href="/">首页</a></li>
    25                 <li><a href="/listStudent">学生信息</a></li>
    26                 <li class="active"><a href="/welcome">图片</a></li>
    27                 <!--<li><a href="#">个人中心</a></li>-->
    28             </ul>
    29             <form action="" class="navbar-form navbar-right">
    30                 <input type="text" placeholder="搜索" class="form-control">
    31                 <input type="button" value="搜索" class="form-control">
    32             </form>
    33             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">登陆</a>
    34             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">注册</a>
    35         </div>
    36     </nav>
    37 </div>
    38 
    39 <#--主体-->
    40 <div class="container">
    41 <#--上传图片-->
    42     <div class="row">
    43         <div class="col-md-12">
    44             <div class="panel panel-primary">
    45                 <div class="panel-heading">
    46                     上传图片
    47                 </div>
    48                 <div class="panel-body">
    49                     <form method="post" action="/upload" enctype="multipart/form-data" role="form">
    50                         <div class="form-group col-md-6">
    51                             <input type="file" name="file" class="form-control">
    52                         </div>
    53                         <div class="form-group col-md-2">
    54                             <button type="submit" class="btn btn-default">提交</button>
    55                         </div>
    56                     </form>
    57                 </div>
    58             </div>
    59         </div>
    60     </div>
    61 
    62 <#--展示图片-->
    63     <div class="row">
    64         <div class="col-md-12">
    65             <div class="panel panel-primary">
    66                 <div class="panel-heading text-center">
    67                     <h4>显示所有图片</h4>
    68                 <#--<span class="panel-title">显示所有图片</span>-->
    69                 </div>
    70 
    71                 <#list picList as pic>
    72                 <div class="panel-body">
    73                 <#--<img src="./image/zz.png" width="400" height="50"/>-->
    74                     <img src="./image/${pic.name}" width="50%" height="50%"/>
    75                     <br><br>
    76                     <form action="/download" method="get" role="form">
    77                         <div class="form-group">
    78                             <input type="text" name="fileName" value="${pic.name}" hidden="hidden"/>
    79                             <button type="submit" class="btn btn-primary">下载文件</button>
    80                         </div>
    81                     </form>
    82                 </div>
    83                 <hr>
    84                 </#list>
    85             </div>
    86         </div>
    87     </div>
    88 </div>
    89 </body>
    90 </html>

    截图:

  • 相关阅读:
    jquery select取值,赋值操作
    数据库性能监测工具
    Redis集群搭建与简单使用
    Docker安装指南
    yum常用操作
    centos6.8 安装Python2.7后, yum出现“No module named yum”错误
    Docker使用阿里云docker镜像加速
    高并发缓存架构
    mysql主从复制-方案1
    redis队列操作
  • 原文地址:https://www.cnblogs.com/gongxr/p/10266876.html
Copyright © 2020-2023  润新知