Maison > Article > interface Web > Parlons du composant image et du composant contour dans Bootstrap
Parlons du composant image et du composant contour dans Bootstrap
- 青灯夜游avant
- 2021-11-19 19:32:332211parcourir
Cet article vous présentera le composant image et le composant contour dans Bootstrap, et présentera les images réactives, les vignettes d'image, les balises d'image et les contours (Figures).
1 Images
Dans cette section, vous apprendrez comment faire en sorte que les images prennent en charge un comportement réactif (afin qu'elles ne dépassent pas la portée de l'élément parent) et comment ajouter du style via des classes.
1.1 Images réactives
Utilisez la classe .img-fluid fournie par Bootstrap pour que les images prennent en charge la mise en page réactive. Le principe est de donner max-width: 100%; et height: auto à l'image pour qu'elle s'adapte à l'élément parent. [Recommandation associée : "Tutoriel bootstrap"]
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>图片演示</title> <div> <img alt="Parlons du composant image et du composant contour dans Bootstrap" > </div> <script></script>
Le conteneur ci-dessus sert à centrer l'image et à la couper avec des marges de tous les côtés. Il ne fait pas partie du composant image.
10.1.2 Vignettes d'image
En plus du rayon de bordure fourni par la classe générique, vous pouvez également utiliser .img-thumbnail pour donner l'apparence d'une image avec une bordure circulaire de 1 px de largeur.
<!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>Ce composant est également réactif, mais je n'ai donné qu'une capture d'écran. Le style CSS ci-dessus consiste à empêcher l'image d'être proche du bord, afin que la bordure ne soit pas visible. conteneur directement. Ceci est juste pour ne pas utiliser de conteneurs pour empêcher tout le monde de penser que les conteneurs en font également partie.
1.3 balise d'image
l'élément d'image est utilisé en incluant un ou plusieurs éléments source et un élément img combinés avec des médias (requête multimédia), Différentes images sont affichées en fonction des différentes tailles correspondant à l'écran. S'il n'y a pas de correspondance ou si le navigateur ne prend pas en charge l'attribut image, l'élément img sera utilisé. Quel que soit le nombre de sources spécifiées pour un élément d'image, une seule. d'entre eux ou une image sera affichée.
Si vous utilisez l'élément <img alt="Parlons du composant image et du composant contour dans Bootstrap" > pour spécifier plusieurs éléments <source></source>, assurez-vous d'ajouter les classes .img-* au < ;img> au lieu de l'élément <picture></picture> ou de l'élément source. <img alt="Parlons du composant image et du composant contour dans Bootstrap" > 指定多个 <source></source> 元素的话，请确保将 .img-* 类添加到 <img alt="Parlons du composant image et du composant contour dans Bootstrap" > 元素而不是<picture></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="Parlons du composant image et du composant contour dans Bootstrap" >
</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="Parlons du composant image et du composant contour dans Bootstrap" >
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>下面是演示
2 轮廓（Figures）
通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure></figure>标签。
使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure></figure>和<figcaption></figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img alt="Parlons du composant image et du composant contour dans Bootstrap" >
<!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>Voici la démo
2 Figures
Utilisez le composant figure de Bootstrap pour afficher des images et du texte associés. Chaque fois que vous devez afficher un élément de contenu (comme une image avec une légende facultative), utilisez la balise <figure></figure>. Utilisez les catégories intégrées .figure, .figure-img et .figure-caption pour fournir des paramètres de style de base pour HTML5 <figure></figure> et <figcaption></figcaption> balises Certainement. L'image n'a pas une taille claire. Assurez-vous d'ajouter la catégorie .img-fluid à la balise <img alt="Parlons du composant image et du composant contour dans Bootstrap" > pour la définir comme image réactive.
rrreee
Une brève explication de la classe arrondie dans la balise img signifie que l'image a des coins arrondis, vous n'avez donc pas besoin de l'écrire. La classe text-center dans la balise figcaption consiste à aligner l'image au centre. Vous pouvez également utiliser text-end pour l'aligner à droite. La valeur par défaut n'a pas besoin d'être alignée à gauche. C'est tout pour la leçon d'aujourd'hui.
Veuillez me suivre🎜 et apprenez les tableaux de Bootstrap dans la section 11 de "Bootstrap 5 from Zero Basics to Mastery" écrit à l'origine par Liu Liu. Les tableaux sont largement utilisés et difficiles à concevoir. Heureusement, avec l'aide de bootstrap, nous pouvons facilement créer. de belles tables. 🎜🎜🎜Si cet article vous est utile, n'oubliez pas de lui donner un like ! 🎜🎜🎜Pour plus de connaissances sur le bootstrap, veuillez visiter : 🎜tutoriel de base du bootstrap🎜 ! ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!