Bootstrap的缩略图

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

一 缩略图1

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>缩略图</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>简单的缩略图</h1>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

二 缩略图2

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>缩略图</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>复杂的缩略图</h1>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png"
                     style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
    </div>
</div>

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

chengqiuming
关注
专栏目录
Bootstrap 缩略图
csbysj2020的博客
07-23 379
Bootstrap 缩略图是一种特殊的组件，用于展示图片或内容的缩略视图。它通常用于相册、产品列表或任何需要展示图像集合的场合。缩略图可以包含图片、标题、描述和链接等元素，通过 Bootstrap 的样式和组件，可以轻松地创建响应式和美观的缩略图布局。
bootstrap缩略图
10-31
bootstrap缩略图，简洁方便，样式漂亮新异
Bootstrap缩略图
lumot的博客
09-08 405
前面的话 　　缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底部（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件，本文将详细介绍Boots...
bootstrap-3-下拉菜单
deepquiet的博客
03-03 514
下拉菜单的学习
Bootstrap缩略图的创建方法
12-02
首先，创建一个基本的Bootstrap缩略图，你需要围绕图像添加一个带有`class="thumbnail"`的`<a>`标签。例如： ```html ``` 这里的`<a>`标签提供了链接功能，可以链接到与缩略图相关的详细页面。`<img>`标签则...
Bootstrap -- 缩略图
hugejihu9的专栏
12-18 206
文章来自：源码在线https://www.shengli.me/css/444.html         代码：         实现效果：      
BootStrap缩略图
秋城落叶的博客
03-31 215
通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。 默认样式的实例 Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。 <!DOCTYPEhtml> <scriptsrc="js/jquery/2.0.0/jquery.min.js"></s...
Bootstrap缩略图.thumbnail
歪脖先生的博客
05-22 1637
缩略图 缩略图是对Bootstrap栅格系统的扩展，将图片、视频、文本等加入到缩略图中，就可以很容易地以网格形式展示图片、视频、商品列表等。 默认缩略图 Boostrap中的默认缩略图设计非常简单，只需把图片、视频、文本等放入 .thumbnail的 <a> 标签中，就能展示带链接的图片。如： <ahref="#"class="thumbnail">...
Bootstrap中缩略图
SpeedyElane的博客
07-15 1645
缩略图： 实现方式 为图像添加四个像素的内边距（padding）和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓(因为此时图片作为网址)。eg:代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 缩略图</title> <link rel
Bootstrap_缩略图
weixin_30535043的博客
03-24 117
　　缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。 　　Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 <div class="container"> <div class="row"> ...
bootstrap的缩略图
a2_45688的博客
10-13 177
缩略图
Bootstrap缩略图与警示框组件详解：提升产品列表设计
本文将深入探讨Bootstrap框架中的两个关键组件：缩略图组件和警示框组件。Bootstrap是由Twitter开发的一款流行的前端开发工具，以其易用性和响应式设计闻名。它基于HTML、CSS和JavaScript，简化了Web开发流程。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值