缩略图+面板

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量114 收藏 1
点赞数
分类专栏： Bootstrap 文章标签： bootstrap css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38191971/article/details/113750365
版权
这篇博客探讨了如何利用Bootstrap库来有效地设计和实现缩略图与面板的组合，详细介绍了相关HTML和CSS3的用法。
摘要由CSDN通过智能技术生成

缩略图

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="{% static '1.jpg' %}"/>
                <h3>BobbySmith</h3>
                <p>Boining in Sichuang province,a student,a boy.</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>remark
                </button>
            </div>
        </div>

    </div>

</body>
</html>

面板+缩略图

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">


    <div class="row">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h2 align="center">graduation photos</h2>
            </div>

            <div class="panel-body">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{% static '1.jpg' %}"/>
                        <h3>BobbySmith</h3>
                        <p>Boining in Sichuang province,a student,a boy.</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span>like
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>remark
                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>

</body>
</html>
南栀子。
关注
专栏目录
CorelDRAW缩略图显示方法详解
xmz00258的博客
11-04 1万+
我们安装CorelDRAW软件之后，在使用的过程中，保存到文件夹中的文件有时会出现cdr缩略图无法显示，只有图标的问题，见图1所示。 我所使用的CorelDRAW软件是CorelDRAW X8（WIN系统）。 图1：cdr文件不显示缩略图 缩略图能够让我们在众多的文件当中，快速的找到需要的文件，是提高工作效率的有力辅助。如果我们打开文件夹，发现里面文件都是图标形式的，一定会觉得特别着急，为了帮助...
WPF 缩略图功能 小面板 移动可改变滚动条
04-26
"WPF 缩略图功能 小面板 移动可改变滚动条"这个标题涉及到一个特定的交互设计，即通过小面板中的缩略图和可移动的滑块来控制内容的显示。这种设计对于处理大尺寸图像或界面时，提高用户体验特别有用，因为它使用户...
Bootstrap4缩略图和面板
Harris-H的博客
09-16 1219
Bootstrap4缩略图和面板 缩略图 本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail的<a> 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。 <div class="row"> <div class=
bootStrap缩略图和面板
aqzengkuasheng的博客
02-21 126
缩略图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> </head> <body> <div class="contai
android im 缩略图,IM聊天缩略图显示策略
weixin_36284522的博客
05-30 322
背景介绍在IM产品中，发送图片是产品的一个基本功能，由于图片消耗内存，通常为了防止OOM的发生，在聊天面板中会显示一种图片的缩略图，点击可以看大图。由于用户可以选择发送任何尺寸的图片，因此在开发的过程中就需要考虑对一些尺寸比较大和比较小的图片的显示策略，否则会影响产品的用户体验。下面就介绍一下本人在产品中显示缩略图的策略，希望可以帮助大家。限定图片显示尺寸通常为了有一个比较好的显示效果，UE同学通...
android 图片 缩略图,加载许多大型位图图像作为缩略图 – Android
weixin_32285045的博客
05-27 243
我正在开发一个媒体播放器应用程序,并希望加载专辑封面艺术图像以在ListView中显示.现在,它可以正常使用我从last.fm自动下载的图像,这些图像低于500×500 png.但是,我最近添加了另一个面板到我的应用程序,允许查看全屏艺术作品,所以我用大(1024×1024)png替换了我的一些艺术作品.现在当我用高分辨率艺术品滚动几张专辑时,我的BitmapFactory上出现了一个java.l...
php如何取视频缩略图,视频提取缩略图
weixin_35648005的博客
03-12 710
提取视频文件中的缩略图片方法首先安装ffmpeg1、BT面板的linux支持一键安装wgethttp://download.bt.cn/install/ext/ffmpeg.sh&&shffmpeg.sh2、运行完成后执行：ffmpeg-version3、回到BT面板的PHP设置，解禁函数把shell_exec从列表中删除4、在PHP中写代码编写生成缩略图代码//测试代...
ppt批量缩略图_PPT如何在文件夹下显示缩略图的方法
weixin_39624705的博客
12-19 2029
PPT如何在文件夹下显示缩略图的方法2017-10-17 19:15 责任编辑：zhiban导读 / 很多朋友多喜欢让自己文件夹一目了然，但是ppt况下是不会显示缩略图的，这就让不少朋友很困扰，那么现在就跟小编一起看看PPT如何在文件夹下显示缩略图吧。在存放ppt文件的目录下，当设置文件夹视图为缩略图浏览时，发很多朋友多喜欢让自己文件夹一目了然，但是ppt况下是不会显示缩略图的，这就让不少朋友很困...
cr2格式缩略图不显示,怎么把raw格式显示出缩略图
weixin_34864191的博客
03-12 9832
1. 怎么在我的电脑看RAW的缩略图windows默认的图片格式是有限的，例如数码单反相机的RAW格式图片原始信息文件(如佳能的..CR2文件，尼康的.NEF文件)就不能识别也不能显示缩略图。其他特殊格式的图片文件也类似。如果某个文件夹开始是存储不能默认识别的图片文件类型的，则整个文件夹中缩略图功能就全都不能应用了。即使移入可识别的JPG文件，也不能显示缩略图。从你的截屏图中可以看出目前有三...
php mp4缩略图,php获取mp4视频缩略图
weixin_39946313的博客
03-19 189
php 获取远程图片并把它保存到本地例1 代码如下 /* *功能:php 多种方...php获取远程图片并保存到本地6页word文档_计算机软件及应用_IT/计算机_专业资料。php 获取远程图片并保存到本地 hp 获取远程图片并保存到本地,这是一个比较通用......“Save as” ,选择 HTML 文件的保 asp2php V0....单击“捕获视频”下的“导入图片”导入刚才得到的 ......
Windows 显示TGA DDS 文件 缩略图
11-29
如果仍然无法看到缩略图，可以尝试打开“控制面板”>“所有控制面板项”>“文件夹选项”或“文件资源管理器选项”。在“查看”标签页中，取消勾选“始终显示图标，从不显示缩略图”，然后再勾选回来，最后点击“应用...
win7不显示缩略图问题修复总结.rar
11-26
在Windows 7操作系统中，用户经常遇到一个常见问题：缩略图不显示或者在尝试预览缩略图时系统崩溃。这个问题可能由于多种原因导致，包括但不限于系统设置、软件冲突、资源管理器错误或者病毒影响。下面将详细介绍...
Acrobat 52课时——组织页面与缩略图面板编排页面的优缺点？.mp4
02-28
Acrobat 52课时——组织页面与缩略图面板编排页面的优缺点？.mp4
TGA缩略图显示插件
03-04
总之，"TGA缩略图显示插件"是提高TGA文件管理效率的实用工具，它填补了Windows系统在处理TGA格式缩略图显示上的空白，使得用户在处理TGA图像时更加便捷。对于IT专业人士，尤其是图形设计师和游戏开发者，这是一个...
CSS画出三角形的做法
mingangel的博客
10-01 388
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 383
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
【CSS】position
最新发布
小秀的博客
10-02 323
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 239
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
pdf word缩略图
10-13
您想要将 PDF 或 Word 文档的缩略图提取出来吗？如果是的话，您可以使用 Adobe Acrobat 或 Microsoft Word 来实现这个功能。在 Adobe Acrobat 中，您可以使用“缩略图”面板来查看和提取 PDF 文档中的缩略图。在 Microsoft Word 中，您可以使用“缩略图”视图来查看和提取 Word 文档中的缩略图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值