详解Bootstrap四种图片样式

最新推荐文章于 2022-05-27 22:05:15 发布

weixin_30498921

最新推荐文章于 2022-05-27 22:05:15 发布

阅读量304

点赞数

原文链接：http://www.cnblogs.com/sanshao221/p/6530205.html

版权

本文给大家介绍Bootstrap 对图片的支持，Bootstrap提供了四个可对图片应用简单样式的class，对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧

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

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

1、img-rounded

 
           <!doctype html>  
          
           <html lang= 
           "en" 
           >  
          
           <head>  
          
           <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->  
          
           <meta http-equiv= 
           "content-type" 
           content= 
           "text/html;charset=utf-8" 
           />  
          
           <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 " 
           >  
          
           <title>BootstrapDemo</title>  
          
           <!--css js 文件的引入-->  
          
           <link rel= 
           "stylesheet" 
           type= 
           "text/css" 
           href= 
           "../bootstrap-3.3.5-dist/css/bootstrap.min.css" 
           >  
          
           </head>  
          
           <body style= 
           "padding: 20px;" 
           >  
          
           <div class =  
           "container" 
           >  
          
           <img src =  
           "5.jpg" 
           class= 
           "img-rounded" 
           >     
          
           </div>  
          
           </body>  
          
           </html>

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

效果：

2、img-circle

 
           <body style= 
           "padding: 20px;" 
           >  
          
           <div class =  
           "container" 
           >  
          
           <img src =  
           "5.jpg" 
           class= 
           "img-circle" 
           >     
          
           </div>  
          
           </body>

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

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

3、img-thumbnail

 
           <body style= 
           "padding: 20px;" 
           >  
          
           <div class =  
           "container" 
           >  
          
           <img src =  
           "5.jpg" 
           class= 
           "img-thumbnail" 
           >   
          
           <img src =  
           "4.jpg" 
           class= 
           "img-thumbnail" 
           >   
          
           <img src =  
           "3.jpg" 
           class= 
           "img-thumbnail" 
           >   
          
           </div>  
          
           </body>

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果：

4、img-responsize

 
           <body style= 
           "padding: 20px;" 
           >  
          
           <div class =  
           "container" 
           style =  
           "width:150px;" 
           >  
          
           <img src =  
           "5.jpg" 
           class= 
           "img-responsive" 
           width= 
           "400px" 
           >     
          
           </div>  
          
           </body>

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

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

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

您可能感兴趣的文章:

转载于:https://www.cnblogs.com/sanshao221/p/6530205.html

weixin_30498921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解Bootstrap四种图片样式

本文给大家介绍Bootstrap 对图片的支持，Bootstrap提供了四个可对图片应用简单样式的class，对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是：img-rounded 添加 border-radius:6px...
复制链接

扫一扫