缩略图

代码:

<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. php--opp--1.什么是面向对象?

    面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成 ...

  2. 配置IIS Express 7.5以允许外部访问

    默认配置文件位于:[我的文档]\IISExpress\config\applicationhost.config修改站点地址如:<binding protocol="http" ...

  3. Apache Spark的部署环境的小记

    Spark的单机版便于测试,同时通过SSH用Spark的内置部署脚本搭建Spark集群,使用Mesos.Yarn或者Chef来部署Spark.对于Spark在云环境中的部署,比如在EC2(基本环境和E ...

  4. Django中如何使用django-celery完成异步任务1（转）

    原文链接: http://www.weiguda.com/blog/73/ 本篇博文主要介绍在开发环境中的celery使用,请勿用于部署服务器. 许多Django应用需要执行异步任务, 以便不耽误ht ...

  5. 用jmap分析java程序

    之前的随笔提到用jstack分析java线程情况,也是在这个项目中,当线程的问题解决之后,发现程序的内存一直增长,于是用jmap工具分析了一下java程序占用内存的情况. 命令很简单,直接 jmap ...

  6. spring mvc为何多注入了个SimpleUrlHandlerMapping？

    最近在调试项目时,debug DispatcherServlet时,发现handlerMappings属性包含了RequestMappingHandlerMapping.SimpleUrlHandle ...

  7. hdu 5310 Souvenir（BestCoder 1st Anniversary ($)）

    http://acm.hdu.edu.cn/showproblem.php?pid=5310 题目大意:要买n个纪念品,可以单个买p元每个,可以成套买q元一套,每套有m个,求最少花费 #include ...

  8. mysql语句收藏

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  9. winform 在指定目录下已经生成资源Image图片的方式

    假设在项目目录下存在一个Image目录,注意其中图片已经都设置成为:生成方式为资源文件. /// <summary> /// 得到要绘置的图片对像 /// </summary> ...

  10. 史上最全APP推广渠道

    群主做App推广的过程中,有过失败也尝过成功的甜头,渐渐地在APP推广尤其是渠道推广中积累了一些实战经验想同大家分享.如果各位有更好的推广建议,欢迎沟通分享哦!   一.应用商店推广   1.应用市场 ...