本章将讲解 bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。bootstrap 通过缩略图为此提供了一种简便的方式。使用 bootstrap 创建缩略图的步骤如下:
在图像周围添加带有 class .thumbnail 的 标签。
这会添加四个像素的内边距(padding)和一个灰色的边框。
当鼠标悬停在图像上时,会动画显示出图像的轮廓。
概述
Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片,通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图
thumbnail中文翻译是拇指指甲,确实有些像缩略图,中间是图片,图片周围是一小圈空白,外面是边框和圆角,下面是文字
.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;
}
自定义内容
在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如标题,文本描述,按钮等
.thumbnail .caption {
padding: 9px;
color: #333;
}@@##@@小火柴的蓝色理想
好的代码像粥一样,都是用时间熬出来的
思高网络商城CycooShop下载主要模块:首页商品推荐 /顾客留言发布 /商品分类浏览 /按商品分类、关键字搜索商品 /商品购物车 人信息中心 /显示商品详细介绍以及多图片显示功能 /商品类别管理有分大类中类的类别设定商品搜索类别设定 /商品管理有临时关闭不在线功能 /订单管理 /支付类型管理模块 留言管理 /后台权限分级管理 /密码修改 /新闻管理 /网站配置管理 /滚动广告管理v1.58更新:1、增强支付接口设置。2、内置支










