06Bootstrap5图像形状

最新推荐文章于 2024-05-10 03:05:44 发布

夏至xz

最新推荐文章于 2024-05-10 03:05:44 发布

阅读量283

点赞数

分类专栏： Bootstrap5 文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_46452300/article/details/121802034

版权

Bootstrap5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Bootstrap5实现图片的圆角效果、保持圆形或椭圆形状、创建缩略图，以及通过响应式设计适应不同屏幕。此外，还涵盖了图片对齐和居中技巧，以及Bootstrap5时代的替代Jumbotron元素的应用。

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

06Bootstrap5图像形状

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5图像形状</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
圆角图片
.rounded 类可以让图片显示圆角效果：
-->
<img src="../img/img_1.png" class="rounded" alt="猴子">
<!--
图片宽高相同--圆形
图片宽高不同--椭圆
.rounded-circle 类可以设置图片圆形
-->
<img src="../img/img.png" class="rounded-circle" alt="猴子">
<img src="../img/img_2.png" class="rounded-circle">
<!--
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框):
-->
<img src="../img/img.png" class="img-thumbnail">

<br>
<!--
图片对齐方式
使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐:
-->
<div>
    <img src="../img/img_1.png" class="float-start" width="200" height="200">
    <img src="../img/img_2.png" class="float-end" width="200" height="200">
</div>
<!--用于清除浮动-->
<br style="clear: both">
<!--
图片居中
使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：
-->
<img src="../img/img_2.png" class="mx-auto d-block" style="width: 50%">
<br>
<!--
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
-->
<img class="img-fluid" src="../img/img_2.png">
<!--
Bootstrap5 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
在 Bootstrap 3 中引入了一个 jumbotron 来创建一个大的背景框，用于显示一些重要的信息。
在 Bootstrap 5 中，已经不再支持 Jumbotron。但是，
我们可以使用 <div> 元素添加一些辅助类与颜色类来达到相同的效果：
提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
-->
<div class="mt-4 p-5 bg-primary text-white rounded">
    <h1>菜鸟教程</h1>
    <p>学的不仅是技术，更是梦想！！！</p>
</div>
</body>
</html>