位置: 编程技术 - 正文
详解Bootstrap四种图片样式
编辑：rootadmin推荐整理分享详解Bootstrap四种图片样式，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是：
img-rounded 添加 border-radius:6px 来获得图片圆角img-circle 添加 border-radius:% 来让整个图片变成圆形img-thumbnail 添加一些内边距（padding）和一个灰色的边框img-responsive 图片响应式
1、img-rounded
.img-rounded{border-radius:6px;}
效果：
2、img-circle
.img-circle{border-radius:%;}
效果(因为本图片的宽高大小不同，所以呈现出椭圆，如果将width和height设置相同，那么会呈现出一个圆)：
3、img-thumbnail
.img-thumbnail{display:inline-block;max-width:%;height:auto;padding:4px;line-height:1.; background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}
效果：
4、img-responsize
.img-responsive{display:block;max-width:%;height:auto;}
效果(img中的width属性值被忽略)：
以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识，希望大家喜欢。
详解Bootstrap按钮 描述BootstrapButton（按钮）JavaScript插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。什么是必需的您必须引
详解Bootstrap glyphicons字体图标 本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap捆绑了多种字体格式的字形。首先让我们先来理解一下什么是字体图标。首先
详解Bootstrap的aria-label和aria-labelledby应用 aria-label正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。如：!DOCTYPEhtmlhtmlheadmetacharset="
](https://www.jiuchutong.com/image/20240129/1706495716.jpg)
