Shulou(Shulou.com)06/02 Report--

This article mainly introduces "Bootstrap picture component and outline component example analysis", in the daily operation, I believe that many people in the Bootstrap picture component and outline component example analysis problems have doubts, editor looked up all kinds of data, sorted out a simple and easy-to-use method of operation, hope to answer the "Bootstrap picture component and outline component example analysis" of the doubt is helpful! Next, please follow the editor to study!

1 Picture

This section will learn how to make pictures support responsive behavior (so that they don't go beyond the scope of the parent element) and how to add some styles through class.

1.1 responsive picture

Enables pictures to support responsive layouts through the. img-fluid class provided by Bootstrap The principle is to assign max-width: 100%; and height: auto; to the picture so that it can be scaled along with the parent element.

Picture demonstration

The above container is to center the image and show that there is a margin around the cut, which is not part of the image component.

10.1.2 Picture Thumbnail

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

.div1 {width: 300; height: 300px; center;padding-top: 50px;} Picture demonstration

This component is also responsive, but I only give a screenshot, the above css style is so that the picture is not close to the edge, it is impossible not to see the frame, in fact, it is also the same to directly use container, just not to use container so that people do not think that container is part of it.

1.3 picture tags

The picture element is used by containing one or more source elements and an img element combined with media (Media query) to display different pictures according to the different sizes of the screen match, if there is no match or the browser does not support the picture attribute, then use the img element, a picture element no matter how many source is specified, only one of them or img will be displayed.

If you use an element for someone

If you specify multiple elements, be sure to add the .img-* class to the

Element, not the element or source element.

Source elements are arranged in order. The value of the media query, if it is max-width, is sorted from smallest to largest; if it is min-width, it is sorted from largest to smallest. The following is the source code, the js code in the source code is to get the screen width as a comparison.

Picture demonstration

Getwidth (); _ window.onresize = function () {getwidth ();} function getwidth () {document.getElementById ("info") [xss_clean] = "width:" + document.documentElement.clientWidth+ ", height:" + document.documentElement.clientHeight;}

2 outline (Figures)

The associated pictures and text are displayed through the figure component of the Bootstrap. Whenever you need to display a piece of content (such as a picture with an optional title), use a tag.

Using the built-in .figure, .figure-img, and .figure-caption categories, you can provide some basic style settings for HTML5 and tags. The picture does not have a clear size, please be sure to

Tag and. img-fluid category is set to responsive images.

In fact, the outline component is not only used for pictures, but has already been used in the reference source section in the text typesetting section of the previous section.

Figure demo

Peach blossoms blossom

A brief explanation of the img tag inside the class rounded is the picture surrounded by rounded corners, do not need to write. The class text-center in the figcaption tag is centered on the picture, and can also be aligned to the right with text-end. By default, it can not be written as left.

At this point, the study on "example analysis of picture components and outline components in Bootstrap" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.