详解Bootstrap四种图片样式

前端之家收集整理的这篇文章主要介绍了详解Bootstrap四种图片样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsive 图片响应式

<Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="Keywords" content="关键词一,关键词二"> <Meta name="Description" content="网站描述内容"> <Meta name="Author" content="Yvette Lau"> <Meta name = "viewport" content = " width = device-width,initial-scale = 1 "> BootstrapDemo

.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四种图片样式的相关知识,希望大家喜欢。

猜你在找的Bootstrap相关文章