当前位置: 首页 > 编程笔记 >

Bootstrap Img 图片样式(推荐)

白念
2023-03-14
本文向大家介绍Bootstrap Img 图片样式(推荐),包括了Bootstrap Img 图片样式(推荐)的使用技巧和注意事项,需要的朋友参考一下

 Bootstrap提供了四种用于<img>类的样式,分别是:

.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角;

.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail:缩略图功能添加一些内边距(padding)和一个灰色的边框。

.img-responsive:图片响应式 (将很好地扩展到父元素)。

使用:

将类样式直接添加到class中即可:

<img class="img-circle" src="img.jpg" alt="头像"/> 

效果如下:

从图中可以看到使用各种样式得到的效果,处理起图片来非常的简单方便。有时候根据需要,比如我们需要用一个具有内边距和灰色边框的圆形头像时,可以将circle和thumbnail两个样式叠加使用,效果如上图circle thumbnail所示。

img-responsive使得我们的图片具有响应式的效果。所谓响应式,就是变化的,随着某一个元素的变化而变化,从而实现自适应的效果。上图中的responsive两个图片代码如下:

<figure style="width: 150px;height: 150px;"> 
      <figcaption>responsive(150*150)</figcaption> 
      <img class="img-responsive " src="img.jpg" alt="头像"/> 
 </figure> 
<figure style="width: 100px;height: 100px;"> 
      <figcaption>responsive(100*100)</figcaption> 
      <img class="img-responsive " src="img.jpg" alt="头像"/> 
 </figure> 

在这里我们没有设置图片的大小,但是设置了包裹他的元素figure 的大小,无论figure为150px*150px或者100px*100px,图片都能够很好的扩展到父元素figure。

如果大家决定上文介绍的不够详细,大家可以参考下:

详解Bootstrap四种图片样式

Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

以上所述是小编给大家介绍的Bootstrap Img 图片样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 问题内容: 有没有办法调整列表样式图像的位置? 当我对列表项使用填充时,图像将停留在其位置,并且不会随着填充而移动… 问题答案: 并不是的。您的填充(可能)将应用于列表项,因此只会影响列表项中的实际内容。 结合使用 背景 样式和 填充 样式可以创建看起来类似的内容,例如 您可能希望将样式添加到父级列表容器(ul)中,以放置项目符号列表项,此A ListApart文章提供了很好的入门参考。

  • 本文向大家介绍Python各类图像库的图片读写方式总结(推荐),包括了Python各类图像库的图片读写方式总结(推荐)的使用技巧和注意事项,需要的朋友参考一下 最近在研究深度学习视觉相关的东西,经常需要写python代码搭建深度学习模型。比如写CNN模型相关代码时,我们需要借助python图像库来读取图像并进行一系列的图像处理工作。我最常用的图像库当然是opencv,很强大很好用,但是opencv

  • 在 material design 中,图像(无论是绘画还是摄影)都应该是组建而成而并非人为策划的,看起来神奇并且不显得过度制作。这种风格乐观,愉悦,并且坦率。这种风格比较强调场景的实质性(Materiality),质感,深度,让人意想不到的色彩运用, 以及对环境背景的关注。这些原则都旨在创建目的性强,美丽又有深度的用户界面。 原则 当使用绘画和摄影提升用户体验时,选择能够表达个人关联、信息和令人

  • 产品图标 产品图标作为一个品牌下产品、服务和工具的一种视觉表现,能够简洁、显眼且友好地传递产品的核心理念与内涵。尽管每个产品图标看上去截然不同,但对于一个给定品牌,产品图标应在理念和实践中统一。 产品图标是传达品牌内涵的一个重要载体。从使用以下准则开始,确保产品图标的颜色和其他关键要素能够正确反映你的品牌标识。 设计途径 产品图标设计从现实材料的质感和触感中获得启发。每个图标都像真实纸张一样被裁剪

  • 关于图形样式 图形样式是一组可反复使用的外观属性。图形样式使您可以快速更改对象的外观;例如,您可以更改对象的填色和描边颜色、更改其透明度,还可以在一个步骤中应用多种效果。应用图形样式所进行的所有更改都是完全可逆的。您可以将图形样式应用于对象、组和图层。将图形样式应用于组或图层时,组和图层内的所有对象都将具有图形样式的属性。例如,假设您现在有一个由 50% 的不透明度组成的图形样式。如果您将此图形样

  • 本文向大家介绍BootStrap 图片样式、辅助类样式和CSS组件的实例详解,包括了BootStrap 图片样式、辅助类样式和CSS组件的实例详解的使用技巧和注意事项,需要的朋友参考一下 首先把模板代码上上来: 图片样式 .img-responsive:直接为图片添加该样式,可以实现响应式图片。 .center-block:图片居中样式,而不能使用text-center样式。 图片形状样式:.im