Dieser Artikel führt Sie durch die Bildkomponente und die Gliederungskomponente in Bootstrap und stellt responsive Bilder, Bildminiaturansichten, Bild-Tags und Gliederungen (Abbildungen) vor!
In diesem Abschnitt erfahren Sie, wie Sie dafür sorgen, dass Bilder reaktionsfähiges Verhalten unterstützen (so dass sie den Umfang des übergeordneten Elements nicht überschreiten) und wie Sie durch Klassen etwas Stil hinzufügen.
Verwenden Sie die von Bootstrap bereitgestellte .img-fluid-Klasse, damit Bilder ein responsives Layout unterstützen. Das Prinzip besteht darin, dem Bild max-width: 100%; und height: auto; zuzuweisen, damit es mit dem übergeordneten Element skaliert. [Verwandte Empfehlung: „Bootstrap-Tutorial“]
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>图片演示</title> <div> <img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" > </div> <script></script>
Der obige Container dient dazu, das Bild zu zentrieren und es mit Rändern auf allen Seiten auszuschneiden. Das Folgende ist ein Demonstrationsvideo.
Zusätzlich zum bereitgestellten Randradius der generischen Klasse können Sie auch .img-thumbnail verwenden, um das Aussehen eines Bildes mit einem kreisförmigen Rand von 1 Pixel Breite zu erzeugen.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.div1{width: 300; height: 300px;text-align: center;padding-top: 50px;}
</style>
<title>图片演示</title>
</head>
<body>
<div class="div1">
<img src="pic/taohua.jpg" width="50%" class="img-thumbnail" alt="点击查看大图">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>Diese Komponente reagiert auch, aber ich habe nur einen Screenshot gegeben. Der obige CSS-Stil soll verhindern, dass das Bild zu nah am Rand liegt, sodass der Rand nicht sichtbar ist Dies dient nur dazu, Container nicht zu verwenden, um zu verhindern, dass jeder denkt, dass auch Container dazugehören.
Das Bildelement wird verwendet, indem ein oder mehrere Quellelemente und ein img-Element in Kombination mit Medien (Medienabfrage) eingefügt werden. Je nachdem, welche Größe dem Bildschirm entspricht, werden unterschiedliche Bilder angezeigt. Wenn keine Übereinstimmung vorliegt oder der Browser das Bildattribut nicht unterstützt, wird das img-Element verwendet, unabhängig davon, wie viele Quellen für ein Bildelement angegeben sind davon oder img werden angezeigt.
Wenn Sie das Element <img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" > verwenden, um mehrere Elemente <source> anzugeben, stellen Sie sicher, dass Sie die Klassen .img-* zum Element < hinzufügen ;img>-Element anstelle des <picture>-Elements oder Quellelements. <img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" > 指定多个 <source> 元素的话，请确保将 .img-* 类添加到 <img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" > 元素而不是<picture> 元素或者source元素上。
source元素排列是有顺序的。媒体查询的值，如果是max-width，则从小到大排序；如果是min-width，则按从大到小的顺序排列。下面是源码，源码中js代码是获取屏幕宽度，作为对照。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>图片演示</title>
</head>
<body>
<div class="container">
<p>
<span id="info"></span>
<script>
getwidth();
window.onresize = function(){
getwidth();
}
function getwidth(){
document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
}
</script>
</p>
<picture>
<source media="(max-width: 600px)" srcset="pic/girl1.jpg">
<source media="(max-width: 700px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" >
</picture>
<picture>
<source media="(min-width: 700px)" srcset="pic/girl1.jpg">
<source media="(min-width: 600px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" >
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>下面是演示
通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure>标签。
使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure>和<figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" >
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>figure演示</title>
</head>
<body>
<div class="container">
<figure class="figure">
<img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
</figure>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
<figure>. Verwenden Sie die integrierten Kategorien .figure, .figure-img und .figure-caption, um einige grundlegende Stileinstellungen für HTML5 <figure> und <figcaption>bereitzustellen > Tags Sicherlich. Das Bild hat keine eindeutige Größe. Bitte fügen Sie unbedingt die Kategorie „.img-fluid“ zum Tag <img alt="Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen" > hinzu, um es als responsives Bild festzulegen.
rrreee
Eine kurze Erklärung der abgerundeten Klasse im img-Tag bedeutet, dass das Bild abgerundete Ecken hat, sodass Sie es nicht schreiben müssen. Die Klasse text-center im figcaption-Tag dient dazu, das Bild zentriert auszurichten. Sie können es auch mit text-end rechtsbündig ausrichten. Das war's für die heutige Lektion.
Bitte folgen Sie mir🎜 und lernen Sie die Tabellen in Bootstrap in Abschnitt 11 von „Bootstrap 5 from Zero Basics to Mastery“ kennen, die ursprünglich von Liu Liu geschrieben wurden. Mit Hilfe von Bootstrap können wir sie glücklicherweise leicht erstellen schön aussehende Tische. 🎜🎜🎜Wenn dieser Artikel für Sie hilfreich ist, denken Sie bitte daran, ihn zu liken! 🎜🎜🎜Weitere Informationen zu Bootstrap finden Sie unter: 🎜Bootstrap-Basis-Tutorial🎜! ! 🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
