详解Bootstrap缩略图组件及警示框组件-洛水三千

缩略图组件

缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件：

LESS : tbumbnails.less

SASS : _tbumbnails.scss

实现原理：

布局的实现主要依靠于bootstrap框架的网格系统，下面是缩略图对应的样式

 .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 ;
} 

查看更多关于详解Bootstrap缩略图组件及警示框组件-洛水三千的详细内容...