This article will take you to learn about the picture components and outline components inBootstrap, and introduce responsive pictures, picture thumbnails, picture tags and outlines (Figures). I hope it will be helpful to everyone. !

1 Images

This section will learn how to make images support responsive behavior (so that they do not exceed the scope of the parent element) and how to use classes (class) Add some styles.

1.1 Responsive images

Make images support responsive layout through the .img-fluid class provided by Bootstrap. The principle is to give max-width: 100%; and height: auto; to the image so that it scales with the parent element. [Related recommendations: "bootstrap tutorial"]

nbsp;html>       
  
 

The above container is to center the image and cut it with margins on all sides. It is not part of the image component. The following is a demonstration video.

10.1.2 Image thumbnail

In addition to the border-radius provided by the general class, you can also use .img-thumbnail to make the image thumbnail The appearance has a circular border of 1px width.

This component is also responsive, but I only gave a screenshot. The CSS style above is to keep the image from being close to the edge, so that the border is not visible. In fact, it is the same if you use the container directly. This is just to not use the container so that everyone will not think that the container is also part of it.

1.3 picture tag

The picture element is used by including one or more source elements and an img element combined with media (media query). Different pictures are displayed according to the different sizes matched by the screen. If there is no match or the browser does not support the picture attribute, the img element will be used. No matter how many sources are specified for a picture element, only one of them or img will be displayed.

If you use the element to specify multipleelements for abe sure to add the .img-* classes toelement instead ofelement or source element.

The source elements are arranged in order. The media query value, if it is max-width, is sorted from small to large; if it is min-width, it is sorted from large to small. The following is the source code. The js code in the source code is to obtain the screen width as a comparison.

The following is a demonstration

2 Figures

Display related images through Bootstrap’s figure component and text. Any time you need to display a piece of content (such as an image with an optional caption), use the