（6）Bootstrap——图片

最新推荐文章于 2022-08-19 18:40:20 发布

Wu_967

最新推荐文章于 2022-08-19 18:40:20 发布

阅读量204

点赞数

分类专栏： Bootstrap学习笔记文章标签： js bootstrap css html

本文链接：https://blog.csdn.net/qq_41841658/article/details/112982036

版权

Bootstrap学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Bootstrap框架中用于图片样式的三个class：.img-rounded（圆角图片）、.img-circle（圆形图片）和.img-thumbnail（缩略图样式）。通过添加这些class，可以轻松改变图片外观。此外，还展示了如何通过应用.img-responsive类实现图片的响应式设计，使图片在不同设备上自适应显示。

摘要由CSDN通过智能技术生成

1.Bootstrap提供了三个可对图片应用简单样式的class：

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

以下代码使用了上述的样式class:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
</head>
<body>
  <img src="image/yibo.jpg" alt="一博" class="img-rounded">
  <img src="image/yibo.jpg" alt="一博" class="img-circle">
  <img src="image/yibo.jpg" alt="一博" class="img-thumbnail">
</body>
</html>

代码运行结果如下：

2.响应式图片
通过在img标签中添加.img-responsive类来让图片支持响应式设计。图片将很好地扩展到父元素。.img-responsive类将max-width:100%和height:auto应用在图片上。以下代码展示了响应式图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
 <img src="image/yibo.jpg" alt="yibo" class="img-responsive" width="304" height="236">
</body>
</html>