bootstrap-缩略图

最新推荐文章于 2024-11-01 10:18:14 发布
最新推荐文章于 2024-11-01 10:18:14 发布
阅读量64 收藏
点赞数
文章标签： 前端 后端 javascript ViewUI
原文链接：https://yq.aliyun.com/articles/561612
版权

1.运行效果如图所示

wKiom1kmhBrAG4pMAAQrwRcMC2k720.png-wh_50


2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>缩略图</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <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 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 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 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>



    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>


本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1929404

weixin_33921089
关注
bootstrap-4.3.1
06-30
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括： 模式...
startbootstrap-thumbnail-gallery：由Start Bootstrap创建的Bootstrap缩略图库模板
01-31
是为响应缩略图网格模板通过创建。 预习 状态 下载及安装 要开始使用此模板，请选择以下选项之一以开始使用： 通过npm安装： npm i startbootstrap-thumbnail-gallery 克隆仓库： git clone ...
error C2146: 语法错误: 缺少“;”(在标识符“m_sockReceive”的前面)
joy1314bubian的博客
10-17 2926
错误 1 error C2146: 语法错误: 缺少“;”(在标识符“m_sockReceive”的前面) d:\documents\visual studio 2013\projects\client\client\clientdlg.h 42 错误 2 error C4430: 缺少类型说明符 - 假定为 int。注意:  C++ 不支持默认 int d:\documents\v
Qt for ios开发:Qt在不同平台下编码问题
CDUT100的专栏
10-01 848
Qt for ios日记2
vs中 error C2146: 语法错误 : 缺少“;”(在标识符“m_btn1”的前面)
alias_888的专栏
10-27 2409
项目名为btnRun，基于对话框的MFC 中新建一个类CNewButton，并定义了两个成员变量m_btn1,m_btn2; 编译时错误： 1>e:\vsproject\btnRunDlg.h(91) : error C2146: 语法错误 : 缺少“;”(在标识符“m_btn1”的前面)  error C4430: 缺少类型说明符 - 假定为 int。注意: C++ 不支持默认 i
bootstrap-缩略图-自定义内容
weixin_34296641的博客
02-15 171
说明在缩略图组件内添加html内容示例<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> &l...
Bootstrap-缩略图
weixin_30649641的博客
05-19 52
效果图： 代码： <div class="container"> <ul class="media-list"> <li class="media"> <div class="media-left"> <a...
bootstrap-缩略图-默认样式的实例
weixin_33743703的博客
11-12 202
说明 以网格形式展示缩略图 示例 <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"&gt...
Bootstrap -- 缩略图
hugejihu9的专栏
12-18 205
文章来自：源码在线https://www.shengli.me/css/444.html         代码：         实现效果：      
Bootstrap -- 缩略图、进度条、列表组、面板
aitcq60826的专栏
12-14 168
Bootstrap -- 缩略图、进度条、列表组、面板 1. 缩略图 大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： (1) 在图像周围添加带有 class .thumbnail 的 <a> 标签。 (2) 这会添加四个像素的内边距（padding）...
bootstrap-fileinput 图片上传插件
07-11
- **图片缩略图**：生成并存储图片的缩略图，节省服务器资源。 - **本地缓存**：用户可以选择将已上传的图片存储在本地，下次上传时直接选取。 8. **国际化**： - **多语言支持**：支持多种语言，满足不同地区的...
bootstrap-fileinput-4.3.2
04-29
12. **插件扩展**：通过插件机制，可以添加更多功能，如缩略图生成、PDF预览等。 在Bootstrap FileInput 4.3.2这个版本中，可能包含以下更新和改进： - 修复了已知的bug，提高了组件的稳定性和兼容性。 - 更新了...
bootstrap-fileinput-官方提供的测试文件样本
08-28
2. **js**目录：包含必要的JavaScript文件，如`bootstrap-fileinput.js`是主插件文件，`plugins/*`目录下的文件则是插件的各个扩展功能，如图片缩略图、文件预览等。 3. **css**目录：包含样式文件，如`fileinput....
Bootstrap缩略图
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-04 2708
Bootstrap缩略图 缩略图.thumbnail 1.新建一个web项目ch18，将上节课写到的web项目ch17里面的css、js文件复制过来，打开ch18中的demo02.html，将之前写到的里面的内容删掉，保留头文件。 2.打开demo01.html，设置缩略图。 //需要用到我们之前所学的栅格系统
做一个能适配「手机」的网站需要注意什么
最新发布
illidri的博客
11-01 245
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端 常见开发工具使用
weixin_45534301的博客
10-31 457
【代码】前端 常见开发工具使用。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 679
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
Bootstrap快速实现精美缩略图教程
Bootstrap 缩略图是Bootstrap框架中的一种便捷组件，用于在网格系统中优雅地展示和布局图像、视频和文本等内容。其设计目的是简化网站开发者的工作...掌握Bootstrap缩略图的使用对于构建现代、整洁的前端界面至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值