信鸽网

详解Bootstrap四种图片样式

  作者：bea

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是： img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距（padding）和一个灰色的边框 img-responsive 图片响应式 1、img-rounded <!doctype ht

在本章中，我们将学习 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;
                  background-color:#FFF;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四种图片样式的相关知识，希望大家喜欢。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: