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

Editor to share with you what the picture style in bootstrap is, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

There are four picture styles in bootstrap: 1, ".img-rounded", rounded picture style; 2, ".img-circle", circular picture style; 3, ".img-thumbnail", thumbnail style; 4, ".img-responsive", responsive picture style.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap provides four types of

The style of the class is:

.img-rounded: round corners (not supported by IE8). Add border-radius:6px to get the rounded corners of the image

.img-circle: circle (not supported by IE8). Add border-radius:50% to make the whole picture round.

Img-thumbnail: thumbnail function, adding some inner margins (padding) and a gray border.

.img-responsive: picture responsive (will be well extended to the parent element).

Use:

You can add class styles directly to class:

From the picture, you can see the effect of using various styles, and it is very simple and convenient to deal with the picture. Sometimes, as needed, for example, when we need to use a round avatar with an inner margin and a gray border, we can use circle and thumbnail on top of each other, as shown in circle thumbnail above.

Img-responsive makes our pictures responsive. The so-called responsive type is changing, changing with the change of a certain element, so as to achieve an adaptive effect. The codes of the two responsive images in the above figure are as follows:

Responsive (150-150)

Responsive (100,100)

Here we do not set the size of the image, but set the size of the element figure that wraps it. No matter whether the figure is 150px*150px or 100px*100px, the image can be well extended to the parent element figure.

The above is all the content of the article "what is the picture style in bootstrap?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.