详解Bootstrap四种图片样式

详解Bootstrap四种图片样式

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是：

img-rounded 添加 border-radius:6px 来获得图片圆角

img-circle 添加 border-radius:50% 来让整个图片变成圆形

img-thumbnail 添加一些内边距（padding）和一个灰色的边框

img-responsive 图片响应式

1、img-rounded

.img-rounded{border-radius:6px;}

效果：

2、img-circle

.img-circle{border-radius:50%;}

效果(因为本图片的宽高大小不同，所以呈现出椭圆，如果将width和height设置相同，那么会呈现出一个圆)：

3、img-thumbnail

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;

                  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:100%;height:auto;}

效果(img中的width属性值被忽略)：

以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识，希望大家喜欢。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。