缩略图

代码:

<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. openstack neutron网络主机节点网口配置 liberty版本之前的

  2. 创建并使用Windows Azure虚拟机模板

    在现实的IaaS应用中,往往会创建自己的虚拟机映像模板,以满足快速应用部署的目标,如预先配置好某些应用.管理与监控管理等. 1.登录到Windows Azure Dashboard中创建一个做为模板的 ...

  3. Struts – Wildcards example

    Struts wildcards can helps to reduce the repetition in your struts-config.xml file, as long as your ...

  4. 安装glibc2.7

    参考链接http://fhqdddddd.blog.163.com/blog/static/18699154201401722649441/ /lib/libc.so.6: version `glib ...

  5. find命令之xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...

  6. Intellij IDEA 14.x 中的Facets和Artifacts的区别

    Facets和Artifacts的区别: Facets 表示这个module有什么特征,比如 Web,Spring和Hibernate等: Artifact 是maven中的一个概念,表示某个modu ...

  7. JQ的each

    写法一:遍历JSON数据 $.each(JSON.parse("{" + msg.d + "}"), function (key, name) { //处理得到 ...

  8. HDU2897邂逅明下（博弈）

    题目是说每次每个人可以取[p,q],而且是最后一个不得不取完的人输 这道题刚刚看别人过,还一直纠结感觉不会做,然后想到1+q的倍数,还是不会,想到p+q的倍数,却发现最后一个取的人是输的,然后就更加无 ...

  9. 解决UITableView头部空白

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

  10. C# 使用ping命令

    方法一:调用cmd 的ping命令 private static string CmdPing(string strIp) { Process p = new Process(); p.StartIn ...