Bootstrap学习笔记—做一个简单的缩略图

最新推荐文章于 2022-10-13 22:35:52 发布
最新推荐文章于 2022-10-13 22:35:52 发布
阅读量535 收藏
点赞数
分类专栏： Bootstrap学习 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flywaterfree/article/details/51078125
版权

Bootstrap学习笔记—做一个简单的缩略图

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Recommend</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>01</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>02</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>03</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>04</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>05</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>06</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>07</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>08</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>09</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>10</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>11</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-lg-3">
                    <a class="thumbnail">
                        <img src="../img/test01.jpg" alt="" />
                        <div class="caption">
                            <h3>12</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

注释：

1、定义一个container容器；

2、先写一个行row；

3、想要缩略图中页面每行显示四个图片则col-md-3 col-sm-6 col-lg-3；

4、想要设置缩略图，且图片可点击即为超链接，则a class="thumbnail"；

5、输入图片地址src；

6、给图片写一个标题，定义一个div，div class="caption"，输入内容；

7、可设置n行。

风醉流觞
关注
专栏目录
Bootstrap基本组件学习笔记之缩略图(13)
09-01
在Bootstrap中，缩略图（thumbnails）是一个常用的组件，用于展示图片预览或缩略版本，通常与其它内容如标题、描述和操作链接一起使用。在本文中，我们将深入探讨Bootstrap缩略图的基本用法和特性。 首先，缩略图的...
分享bootstrap学习笔记心得(组件及其属性)
11-29
通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。 ...
Bootstrap<基础二十四> 缩略图
04-28 178
Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class.thumbnail的 <a> 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。 ...
Bootstrap缩略图
暖心~的博客
03-07 1341
使用 Bootstrap 创建缩略图 ： （1）在图像周围添加带有 .thumbnail 的 <a> 标签。 （2）这会添加四个像素的内边距（padding）和一个灰色的边框。 （3）当鼠标悬停在图像上时，会动画显示出图像的轮廓。<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="th
bootstrap缩略图（21）
qq_43687284的博客
12-29 244
Bootstrap 缩略图 本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 &lt;a&gt; 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动...
bootstrap学习笔记之初识bootstrap
10-22
它基于Less，这是一个动态CSS语言，允许开发者通过变量、嵌套规则和函数来编写更加模块化和可维护的CSS代码。同时，Bootstrap也依赖于jQuery库，使得交互和动画效果的实现更加便捷。 Bootstrap框架包含了多种预定义...
bootstrap学习笔记
01-08
### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架，它基于HTML、CSS及JavaScript构建，旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局，...
Bootstrap学习总结笔记（13）-- 基本组件之缩略图
kikaylee的专栏
12-07 445
Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案。
bootstrap-3-下拉菜单
deepquiet的博客
03-03 500
下拉菜单的学习
Bootstrap -- 缩略图
hugejihu9的专栏
12-18 194
文章来自：源码在线https://www.shengli.me/css/444.html         代码：         实现效果：      
Bootstrap 组件-缩略图
litengbin的博客
01-21 400
1 : 相册风格     2 : 自定义内容     相册风格 img{ width:150px; } 自定义内容 img{ width:150
bootstrap的缩略图
最新发布
a2_45688的博客
10-13 162
缩略图
Bootstrap 缩略图
歪脖先生的博客
03-11 4625
缩略图缩略图用于给图片、视频、文本等加入栅格功能，很适合以网格形式展示图片、视频、商品列表等。默认的缩略图非常简单，只需把图片放在 class="thumbnail" 的 &lt;a&gt; 标签中即可。如：&lt;a href="#" class="thumbnail"&gt;  &lt;img src="img/260x180.jpg" alt=""&gt;
bootstrap缩略图
杨哥的博客
05-16 489
缩略图 XXX
bootstrap中缩略图的用法
weixin_42289273的博客
06-16 560
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <script src=".
【Bootstrap】015-组件：缩略图、警告框、进度条
訾博（ZiBo）的博客
10-07 496
目录 一、缩略图 1、概述 2、默认样式的实例 代码演示： 运行结果： 3、自定义内容 代码演示： 运行结果： 二、警告框 1、实例 代码演示： 运行结果： 2、可关闭的警告框 代码演示： 运行结果： 备注： 3、警告框中的链接 代码演示： 运行结果： 三、进度条 1、概述 2、基本实例 代码演示： 运行结果： 3、带有提示标签的进度条 代码演示： 运行结果： 代码演示： 运行结果： 4、根据情境变化效果 代码演示： 运行结果： 5、条纹效果
Bootstrap学习：缩略图与警示窗的运用解析
例如，以下代码创建了一个响应式的缩略图布局： ```html ; display:block;" alt=""> <!-- 更多缩略图... --> ``` 这段代码在超小屏幕（）上每行显示2个缩略图，而在中等屏幕（≥992px）上每行显示4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值