Bootstrap之图片展示界面Demo2

最新推荐文章于 2024-03-19 00:52:43 发布
最新推荐文章于 2024-03-19 00:52:43 发布
阅读量1.8k 收藏 1
点赞数
文章标签： javascript c# 前端 ViewUI
原文链接：http://www.cnblogs.com/gongxr/p/10268083.html
版权

代码：（使用模板引擎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="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>

 

截图：

 

转载于:https://www.cnblogs.com/gongxr/p/10268083.html

weixin_30770495
关注
Bootstrap响应式图片展示模板
08-11
Bootstrap响应式图片展示模板，便捷，使用方便
Bootstrap之图片展示界面Demo
weixin_30667301的博客
01-14 2550
代码：（使用模板引擎freemarker） 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片</title> 5 <meta charset="UTF-8"/> 6 <meta name="viewport" content...
bootstrap img 显示多张照片_国庆了，用照片拼个中国地图吧？
weixin_29484843的博客
01-12 601
几天前的给头像加国旗，当时我们 Python 代码来实现时，采用的思路是以头像做背景，向上贴中间透明的带有国旗的头像框图。临近国庆了，我们把素材换一下，搞一个新玩法：准备些照片拼接成背景图，用中间透明的中国地图加以覆盖，即可生成一个酷炫的照片地图。（图片展示原因，未能显示岛屿等细节）话不多说，以千玺照片来展示，效果如下： 效果可还行？把它用到合适的场景没准会有意外收获哦：比如将素材图片换成你的...
Bootstrap系列之图片（Image）
老__L的博客
05-27 3714
图片（Image）
bootstrap实战（二）-响应式图片显示（随着浏览器大小变化，图片大小变化）
鲸鱼姐的专栏
11-14 3698
1.给导航栏下放置页面，如下效果，图片随着屏幕变小，也会变小： 技术要点： 1. img添加img-responsive属性后，会自动随屏幕大小而变化<imgsrc="image/2.png"class="img-responsive"style="display:inline-block"alt="php"> 2. img是行内元素，通过style="display...
Bootstrap布局的网站首页DEMO
10-03
Bootstrap布局的网站首页DEMO是一个基于Bootstrap前端框架构建的示例页面，主要用于展示如何利用这个流行的响应式设计工具来创建一个高效、美观且适应各种设备的网站主页。Bootstrap是由Twitter开发并开源的一个强大...
bootstrap文件上传demo
11-30
本示例"bootstrap文件上传demo"是基于Spring MVC框架和Bootstrap前端库实现的一个高效、友好的文件上传解决方案。下面将详细介绍这个实例中的关键知识点。 首先，`Spring MVC`是一个强大的Java Web开发框架，它提供...
Bootstrap非常不错的Demo
07-30
这个"Bootstrap非常不错的Demo"显然提供了一些展示Bootstrap强大功能和优雅设计的实例。在商业网站的背景下，这些Demo可能包含了用于创建专业且吸引用户界面的各种元素。 Bootstrap的核心特性包括一个响应式的网格...
bootstrap admin后台系统面板demo模板
12-11
"Bootstrap Admin 后台系统面板Demo模板"是基于Bootstrap构建的一种预设布局和界面元素的框架，专门用于创建管理后台或者控制面板的界面。这个模板通常包含了各种常见的功能模块，如导航菜单、图表、表格、表单等，...
前端框架bootstrap信息分类-练习demo
11-13
Bootstrap是世界上最受欢迎的前端开发框架之一，主要用于构建响应式、移动优先的网页项目。这个"前端框架Bootstrap信息分类-练习demo"提供了丰富的实践资源，帮助初学者和有一定基础的开发者更好地理解和运用...
基于Bootstrap的多图片（文件也可以）上传、预览、删除、缩放、进度...显示
bestfeng1020的博客
06-29 1万+
一、引用js、css//核心js、css https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/css/fileinput.min.css https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/fileinput.min.js //显示中文需要的js https://cdn.bootcss.co
bootstrap展示导入的图片_使用Bootstrap完成个人博客首页
weixin_32012539的博客
01-07 710
个人博客一：准备工作 1、下载bootstrap所需生产环境以及Bootstrap 插件全部依赖 jQuery。 2、准备好博客的主题风格，以及所需素材。二、创建项目 创建 html 项目，导入项目所需图片素材和 相关文件。 编写首页 index.html，并引用css、js文件。（解压后直接引入项目文件夹下，部分文件未使用） <!DOCTYPE html> <html lan...
bootstrap展示导入的图片_基于vue+ bootstrap实现图片上传图片展示功能
weixin_33997566的博客
01-13 432
效果图如下所示：html............vuedata:{queryFirmInfo：{idPicUrl：""......}}//选择改变图片handleFileChange(e){varvm=this;letfile=e.target.files[0];letsupportedTypes=['image/jpg','image/jpeg','image/png...
bootstrap 轮播图显示多张图片
热门推荐
hlvy
07-20 1万+
代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 轮播（Carousel）插件的标题&lt;/title&gt; &lt;link rel="stylesheet" href="
bootstrap展示导入的图片_bootstraptable添加图片及显示图片，保存图片的物理路径...
weixin_31530761的博客
01-26 1127
研究了两三个小时，解决了C#保存图片物理路径，并显示在bootstrap上的问题，终于解决了前端代码如下：@using System.Text@using System.Web.Optimization@using WarehouseManage.Model.Dto@model Base_GoodsDto@{ViewBag.Title = "添加物料";Layout = "~/Views/Shar...
说说如何使用 Bootstrap 显示图片
读万卷书，行万里路
04-27 1万+
Bootstrap 提供了三个可对图片应用简单样式的 class： Class 说明 .img-rounded 添加 border-radius:6px 来获得图片圆角。 .img-circle 添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail 添加一些内边距（padding）和一个灰色的边框。 ...
bootstrap 轮播图显示多张图片，netty架构图
最新发布
m0_60452134的博客
03-19 192
(img-8XAbLoXu-1710780751378)]轮播（Carousel）指标。轮播（Carousel）项目。实战项目、讲解视频**
bootstrap实战（三）- 并列显示三图，图片随浏览器缩放
鲸鱼姐的专栏
11-15 3709
技术要点： 1. 并列使用col-md-4，例如<divclass="col-md-4"> 2.图片缩放使用class="img-responsive"，例如 <imgsrc="image/bbs2.png"class="img-responsive"alt=""> 3.取消链接下划线#bbsa{text-decoration:none;} 4...
Bootstrap从入门到实战---图文混排
Season CSDN博客
07-07 901
Bootstrap从入门到实战—图文混排 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
bootstrap用图片展示功能
05-13
Bootstrap 提供了一些类来方便地展示图片，例如 `img-fluid`、`rounded`、`thumbnail` 等等。以下是一个简单的例子，展示如何使用这些类来展示图片： ```html <div class="container"> <h1>图片展示</h1> <div class="row"> <div class="col-sm-4"> <img src="https://picsum.photos/200/200" class="img-fluid rounded"> </div> <div class="col-sm-4"> <img src="https://picsum.photos/200/200" class="img-fluid rounded"> </div> <div class="col-sm-4"> <img src="https://picsum.photos/200/200" class="img-fluid rounded"> </div> </div> </div> ``` 在上面的例子中，我们使用了 Bootstrap 的栅格系统来将图片平均分配到三个列中。每个列中的图片都使用了 `img-fluid` 类来让图片自适应父容器的大小，并且使用了 `rounded` 类来让图片的边角变得圆润。你还可以使用 `thumbnail` 类来让图片带有边框和阴影效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值