Bootstrap图片

当前位置 : 首页 > 网页制作 > CSS > Bootstrap图片

Bootstrap图片

来源: 作者: 时间:2016-01-14 16:13
Bootstrap提供了四种应用于图片的class,分别是:img-rounded 添加 border-radius:6px 来获得图片圆角img-circle 添加 border-radius:50% 来让整个图片变成圆形img-thumbnail 添加一些内边距(pa

 

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;}

  1. 效果:

    \

    4、img-responsize

    
    .img-responsive{display:block;max-width:100%;height:auto;}

     

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

Tag:
网友评论

<