This is the 10th day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.

10.1 the picture

This section will learn how to make images support reactive behavior (so they don’t go beyond the parent element) and how to add some style through classes.

10.1.1 Responsive images

The.img-Fluid class provided by Bootstrap enables responsive layout of images. Max-width: 100%; And height: auto; Assign a picture to scale with the parent element.

<! 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 > images demonstrate < / title > < / head > < body > < div class = "container" > < img SRC = "PIC/taohua. JPG" class = "img - fluid" Alt = "blossoming peach blossom open" > < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > </body> </html>Copy the code

The container above is to center the image and show margins around the cut, which is not part of the image component. The following is the demo video.

10.1.2 Image thumbnails

In addition to the border-radius provided by the generic class, you can use.img-thumbnail to make the image look like a 1px round border.

<! 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; <div class="div1"> <img SRC =" PIC /taohua.jpg" width="50%" Class = "img - thumbnail" Alt = "click to view a larger version" > < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > < / body > < / HTML >Copy the code

This component is also responsive, but I’m only showing you a screenshot. The CSS style above is to keep the image away from the edges, so that you can’t see the border. The same goes for using container directly, just so you don’t think container is part of it.

10.1.3 picture label

The picture element is used by including one or more source elements and an IMG element combined with media (media query) to display different images depending on the size of the screen. If there is no match or the browser does not support the picture attribute, the img element is used. A picture element will display only one or img of the specified sources.

If you use elements to specify multipleelements for a , be sure to add the. Img -* class to the element instead of the element or the source element.

Source elements are sorted in order. Media query value, if max-width, sort from smallest to largest; If it is min-width, it is sorted in order from largest to smallest. Below is the source code, source code js code is to obtain the screen width, as a control.

<! 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 > images demonstrate < / title > < / head > < body > < div class = "container" > < p > <span id="info"></span> <script> getwidth(); window.onresize = function(){ getwidth(); {} function getwidth () document. GetElementById (" info "). The innerHTML = "width:" + document. DocumentElement. ClientWidth + ", height: "+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"> </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"> </picture> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

Here’s the demo

10.2 Figures

Use the Figure component of Bootstrap to display the associated images and text. Whenever you need to display a piece of content (such as an image with an optional title), use the

tag.

Use the built-in.figure,.fig-img, and.fig-Caption categories to provide some basic styling Settings for HTML5

and < Figfigure > tags. Image does not have a definite size, be sure to set the.img-fluid category in the
tag as a responsive image.

In fact, the outline component is not only used for images; it was used in the text typesetting section and the citation section in the previous section.

<! 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 demo < / title > < / head > < body > < div class = "container" > <figure class="figure"> <img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="..." "> < figure caption class=" text-center"> </figure> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

Rounded rounded corners are included in the img tag. Rounded corners are optional. Figure Caption: The text-center class is used to center the image, and the text-end class can be used to align the image to the right.

That’s all for today. Please pay attention to me and timely learn the table in section 11 Bootstrap of my original “Bootstrap AP5 from Zero to Master”. The use of the table is very wide, but it is also troublesome to design. Fortunately, we can easily make beautiful tables with the help of Bootstrap.

If this article is helpful, please feel free to like it!