holder.js的使用心得

本文介绍如何利用Holder.js在前端开发中快速生成占位图片,不仅方便查看布局效果,还能显示div尺寸,有效避免频繁使用F12检查元素。通过简单三步:下载、引入、使用,即可在img标签内生成自定义大小的图片。

   在编写前端的时候,不总是有机会有趁手的预览图,这时我们总会想,有个人来撑场子就好了,holder.js显然是很好的选择,不光可以占住空间,还可以告诉我们div的大小,可以说十分舒服了,省却了F12麻烦事。

预览图:

使用说明:

1. 首先下载holder.js文件,扔到js文件夹里面

2. 引入文件

<script src="bootstrap-3.3.7-dist/js/holder.min.js"></script>

3. 在需要占空间的img标签里面使用

<img src="holder.js/100px200" >

注意事项:

1. 部分ide可能会有警告,这是因为ide按路径找不到文件的警告,我们使用的并非文件,无需理睬

2. %符号现在被p代替,后面不是乘号而是26字母的x,100px200表示造一个100% width,200px height的图片

3. 百分比,固定长度均可按个人要求使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值