Bootstrap系列 -- 23. 图片

　　图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

　　1、img-responsive：响应式图片，主要针对于响应式设计
　　2、img-rounded：圆角图片
　　3、img-circle：圆形图片
　　4、img-thumbnail：缩略图片

<div class="container"><div class="row"><div class="col-sm-4"><img   alt="140x140" src="http://placehold.it/140x140"><div>默认图片</div></div><div class="col-sm-4"><img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <div>圆角图片</div></div><div class="col-sm-4"><img  class="img-circle" alt="140x140" src="http://placehold.it/140x140"><div>圆形图片</div></div><div class="row"><div class="col-sm-6"><img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <div>缩略图</div></div><div class="col-sm-6"><img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" style="width:40px;height:40px;"/> <div>响应式图片</div></div></div></div>
</div>

转载于:https://www.cnblogs.com/qingyuan/p/4600949.html

Bootstrap系列 -- 23. 图片相关推荐

Bootstrap系列之图片（Image）
文章の目录 1.响应式图片 2.图片的缩略图 3.对齐图片 4.`<picture>` 写在最后本文档及示例展示了如何让图片支持响应式行为(这样它们就不会超出父元素的范围)以及如何通过类 ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
SAP PM 初级系列23 - IW22 事务代码里创建维修工单
SAP PM 初级系列23 - IW22 事务代码里创建维修工单 SAP PM模块里,事务代码IW22用于修改一个已经存在的维修通知单. 实际上在这个界面里,不仅可以修改维修通知单相关的数据,而且可以 ...
SAP PM入门系列23 - IL07 Functional Location List (Multilevel)
SAP PM入门系列23 - IL07 Functional Location List (Multilevel) 报表事务代码IL07是SAP PM模块里提供的另外一只关于功能位置的报表,除了显示功 ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
bootstrap图片叠加_详解Bootstrap四种图片样式
在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获 ...
[Python系列-23]：WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)
作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客本文网址:[Python系列-23]:WARNING: Retrying (Retry(total=4, c ...
信创办公--基于WPS的Word最佳实践系列（图片的基本处理）
信创办公–基于WPS的Word最佳实践系列(图片的基本处理) 项目背景在日常的商务办公中,我们难免要在自己的文档中插入图片进行点缀或增加说明,但是由于图片的来源错综复杂,我们时常需要对于图片进行处理 ...

Bootstrap系列 -- 23. 图片

Bootstrap系列 -- 23. 图片相关推荐

最新文章

热门文章