Home>Article>Web Front-end> Detailed explanation of thumbnails in Bootstrap

Detailed explanation of thumbnails in Bootstrap

青灯夜游
青灯夜游 forward
2021-04-06 10:51:55 2519browse

Detailed explanation of thumbnails in Bootstrap

The most commonly used place for thumbnails on the website is the product list page. Several pictures are displayed in one line, and some have titles, descriptions, etc. at the bottom (left or right) of the picture. information. The Bootstrap framework separates this part into a module component. This article will introduce the Bootstrap thumbnail in detail

Overview

The default design of the Bootstrap thumbnail requires only a minimum of tags. It can display pictures with links and realize thumbnails through the "thumbnail" style and the grid system of bootstrap. The circle is blank, with borders and rounded corners outside, and text below

.thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .thumbnail > img, .thumbnail a > img { margin-right: auto; margin-left: auto; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #428bca; } .thumbnail .caption { padding: 9px; color: #333; }

Detailed explanation of thumbnails in BootstrapCustom content

On the basis of only thumbnails, a pContainer named "caption", place other content in this container, such as title, text description, button, etc.

.thumbnail .caption { padding: 9px; color: #333; }
//m.sbmmt.com/m/faq/#

小火柴的蓝色理想

好的代码像粥一样,都是用时间熬出来的

确认 取消

//m.sbmmt.com/m/faq/#

小火柴的蓝色理想

好的代码像粥一样,都是用时间熬出来的

确认 取消

//m.sbmmt.com/m/faq/#

小火柴的蓝色理想

好的代码像粥一样,都是用时间熬出来的

确认 取消

//m.sbmmt.com/m/faq/#

小火柴的蓝色理想

好的代码像粥一样,都是用时间熬出来的

确认 取消

Detailed explanation of thumbnails in BootstrapFor more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of Detailed explanation of thumbnails in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete