先看看效果:

代码:

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail pull-right">
<img src="20224543-5aa37207bf894b479319fea51f210ae3.jpg" alt="小熊猫"/>
<div class="caption">
<h5>小熊猫</h5>
<p><small>
小熊猫(学名:Ailurus fulgens)又名红熊猫、红猫熊、小猫熊、九节狼等,是一种濒危的哺乳类动物分布在中国南方到喜马拉雅山麓等国。</small>
</p>
<p><a href="#" class="btn btn-small btn-success pull-right">more
</a></p>
</div>
</div>
</li> <li class="span3">
<div class="thumbnail pull-right">
<img src="20224544-ab82486ef2444ca3b143e7059e60fad6.jpg" alt="考拉" />
<div class="caption">
<h5>考拉</h5>
<p><small>树袋熊,又称考拉,是澳大利亚的国宝,也是澳大利亚奇特的珍贵原始树栖动物。英文名Koala bear来源于古代土著文字,意思是“no drink”。</small></p>
<p><a class="btn btn-small btn-success pull-right">more</a></p>
</div>
</div>
</li>
</ul>

这里使用一个引用class=“thumbnails”的<ul>标签,标签里面的<li>表示一个缩略图 用"span+数字"类来控制他们的大小

<li>里面的<div class=“thumbnail”>为主体内容标签,其所包含的<img>显示一张图片,<div class="caption">包含描述内容。

BootStrap2学习日记20---定制缩略图的更多相关文章

  1. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  2. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  3. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  4. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  5. BootStrap2学习日记22---点击展开

    先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...

  6. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

  7. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  8. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

  9. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

随机推荐

  1. shell脚本操作mysql库

    shell脚本操作mysql数据库-e参数执行各种sql(指定到处编码--default-character-set=utf8 -s,去掉第一行的字段名称信息-N) 2011-05-11 18:18: ...

  2. mysql基础知识(5)--视图

    视图 单词:view 什么是视图: 视图可以看作是一个“临时存储的数据所构成的表”(非真实表),其实本质上只是一个select语句.只是将该select语句(通常比较复杂)进行一个“包装”,并设定了一 ...

  3. js中Number数字数值运算后值不对

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两 ...

  4. tomcat的host配置

    本机 etc\hosts 首先了解C:\WINDOWS\system32\drivers\etc\hosts文件配置 127.0.0.1 static1.ezsins.com #adoble ps c ...

  5. HDU1003前导和

    简单维护前导和 #include<stdio.h> int main() { ],cas,key=; scanf("%d",&cas); while(cas-- ...

  6. window 方法:延时 和 重复

    window 方法 var timer = setTimeout(closeFunc,10*1000); function closeFunc(){ alert('close'); }

  7. css 关于两栏布局,左边固定,右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  8. plsql配置连接远程数据库

    一.首先安装PL/SQL Developer 下载地址:https://yunpan.cn/cM3njKpfK8MnT 访问密码 996a 二.再安装instantclient_11_2 下载地址:h ...

  9. 钉钉开发笔记(3)MySQL的配置

    最近在编写web的过程中,经常需要与后台工作人员互动.由于比较麻烦.没有效率. 就果断的请教了,公司的后台大牛,学习下数据库的一些简单操作,现在就把利用MySQL连接服务器, 进行可视化操作的简单步骤 ...

  10. Java数据结构之线性表(2)

    从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...