缩略图

代码:

<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. css斜线

    斜线 .demo{ display: inline-block; width: 400px; height: 100px; resize: both; overflow: auto; margin-t ...

  2. 杭电ACM减花布条

    这是原题的地址 http://acm.hdu.edu.cn/showproblem.php?pid=2087 Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条 ...

  3. C++11之sizeof

    [C++11之sizeof] 在标准C++,sizeof可以作用在对象以及类别上.但是不能够做以下的事: 这会传回OtherType的大小.C++03并不允许这样做,所以会引发编译错误.C++11将会 ...

  4. <<海闻电子发票接口 ESB 封装文档>>

    <<海闻电子发票接口 ESB 封装文档>> 章节目录结构: 发票验证接口 发票开具接口 ESB请求地址: 发票验证接口: http://10.15.22.120:8866/42 ...

  5. 存量数据处理结果查询.txt

    请求报文:<?xml version="1.0" encoding="UTF-8"?><PDL><PDL-Head>< ...

  6. 架设证书服务器 及 让IIS启用HTTPS服务

    一.架设证书服务器(CA服务)1.在系统控制面板中,找到“添加/删除程序”,点击左侧的“添加/删除windows组件”,在列表中找到“证书服务”,安装之.2.CA类型,这里有四种选择,这里以“独立根C ...

  7. URAL 2073 Log Files (模拟)

    题意:给定 n 场比赛让你把名称,时间,比赛情况按要求输出. 析:很简单么,按照要求输出就好,注意如果曾经AC的题再交错了,结果也是AC的. 代码如下: #pragma comment(linker, ...

  8. CString和string的互相转换

    CString->std::string 例子: CString strMfc=“test“; std::string strStl; strStl=strMfc.GetBuffer(0); s ...

  9. Javascript里，想把一个整数转换成字符串，字符串长度为2

    Javascript里,想把一个整数转换成字符串,字符串长度为2.  想把一个整数转换成字符串,字符串长度为2,怎么弄?比如 1 => "01"11 => " ...

  10. spring AOP Bean添加新方法

    目的:为studentAdditionalDetails中添加Student的showDetails()和ExtraShowDetails()两个方法 spring  中AOP能够为现有的方法添加额外 ...