缩略图

代码:

<ul class="thumbnails">

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

</ul>

效果：

代码:

<ul class="thumbnails">

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span6"><a href="#" class="thumbnail"><img src="http://placehold.it/520x380" alt=""/></a></li>

    <li class="span6"><a href="#" class="thumbnail"><img src="http://placehold.it/520x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

    <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li>

</ul>

效果:

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

  1. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  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. 第二百二十六天 how can I 坚持

    今天弟弟生日,只是简单的说了句生日快乐,幸亏看了下日历,要不又忘了. 在家待了一天. 明天还想去爬山,八大处太远了,该去哪呢. 不想在家待着. 日复一日,啊,年复一年啊.想想好可怕,人生,太快.该如何 ...

  2. c++10 Seattle Clang error

    升级到C++Builder RAD 10 Settle 一些错误解决方法,使用LLVM  CLang编译器,BCC32C http://docwiki.embarcadero.com/RADStudi ...

  3. 细说OpenSessionInView问题

    [环境参数] 环境:SSH框架 [问题描述]  NoSession问题 HibernateTemplate对象提供的方法如果使用“延迟加载”,Session对象的管理不受开发者控制,此时如果在表现层获 ...

  4. Android教程说明-夜神模拟器连接IDE更新让Delphi发现你的手机或夜神模拟器

    相关资料: [深圳]jiuk 发布 1.官网下载模拟器http://www.bignox.com/并运行 2.打开开发者选项刚开始是看不到的->关于平板电脑->多点几次版本号->打开 ...

  5. 闲置的eSATA接口，会影响Windows 7的启动速度

      为方便用户连接外置硬盘等设备,很多中高 端主板上都有至少一个eSATA接口.事实上,很多人可能根本就不用eSATA接口,你想过没有,正是这个无所事事的eSATA接口,可能无意中就拖慢了 你的Win ...

  6. HDU 5884 Sort (二分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5884 nn个有序序列的归并排序.每次可以选择不超过kk个序列进行合并,合并代价为这些序列的长度和.总的 ...

  7. getConnection 区别

    1. 这是一个接口 package javax.sql; DataSource.class /** * <p>Attempts to establish a connection with ...

  8. JavaServer Faces 2.2 requires Dynamic Web Module 2.5 or newer

    Description Resource Path Location Type JavaServer Faces 2.2 can not be installed : One or more cons ...

  9. 解决UITableView头部空白

    解决方式1: self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.ta ...

  10. 如何在我们项目中利用开源的图表（js chart）

            最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!       这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...