<div class='container-fluid'>
<h2 class='page-header'>Bootstrap 缩略图</h2>
<ul class='thumbnails'>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片1' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片2' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片3' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片4' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片9' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片10' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片11' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片12' /></a></li>
<li clalss='span5'><a class='thumbnail' href=''><img src='http://placehold.it/470x180' alt='我是图片6' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片5' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片7' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片8' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片9' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片10' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片11' /></a></li>
<li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片12' /></a></li>
</ul>
</div>

如图:

关于缩略图的一些配置,建议查看这里

http://www.w3cschool.cc/bootstrap/bootstrap-thumbnails.html

图片尺寸大小,根据需要需要调整

分享在线生成图片的地址

http://placehold.it/123x340

以上图片地址表示:生成一个宽123px,高340px的图片,引入的方法: 123x340 中的 “  x  ”是英文字母 x;

<img src='http://placehold.it/123x340' />

Bootstrap页面布局20 - BS缩略图的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  3. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  4. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  5. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  6. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  7. Bootstrap页面布局22 - BS工具提示

    当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class=' ...

  8. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

  9. Bootstrap页面布局18 - BS导航路径以及分页器

    导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...

随机推荐

  1. Android源码编译

    参考百度文章: http://jingyan.baidu.com/article/a501d80ce61ad0ec630f5e0b.html

  2. oracle 10g 学习之视图、序列、索引、同义词(9)

    目标 通过本章学习,您将可以: l  描述视图 l  创建和修改视图的定义,删除视图 l  从视图中查询数据 l  通过视图插入, 修改和删除数据 l  使用“Top-N” 分析 l  创建, 维护, ...

  3. UML中的图的出现顺序

    上接:UML从需求到设计--用例 从开始接触UML到现在对UML逐渐有了更深入的了解.刚开始,对于UML总是感觉UML就是图.一提起UML 就想着这个是画图的东西. 具体这些图都是干什么的.为什么会有 ...

  4. 微信jsapi接口测试

    微信jsapi接口测试 <?php require_once 'lib.inc.php'; $wx = new WxApi(); if(!isset($_GET['code'])){ heade ...

  5. php jquery ajax

    .php文件如下<?php header('Content-Type:text/html;charset=utf-8'); ?>    <script type="text ...

  6. x264码率控制方法介绍

    转自:http://www.bubuko.com/infodetail-471698.html 1.  X264显式支持的一趟码率控制方法有:ABR, CQP, CRF. 缺省方法是CRF.这三种方式 ...

  7. 修改Tomcat编码方式的两种方法

    转自:http://blog.sina.com.cn/s/blog_7c76d63901018lyt.html 方法一:推荐,不会影响到其它项目  见我的另一篇博客:http://www.cnblog ...

  8. FactoryBean的使用

    一般情况下,Spring通过反射机制利用bean的class属性指定实现类来实例化bean .在某些情况下,实例化bean过程比较复杂,如果按照传统的方式,则需要在<bean>中提供大量的 ...

  9. 简单几何(相对运动距离最值) UVA 11796 Dog Distance

    题目传送门 题意:两只狗在折线上跑,速度未知,同时出发,同时达到.问跑的过程中,两狗的最大距离和最小距离的差 分析:训练指南P261,考虑相对运动,设A静止不动,B相对A运动,相对的运动向量:Vb - ...

  10. SCU3033 Destroying a Painting(最小费用最大流)

    题目大概说有一个有n*m个格子的画板,画板上每个格子都有颜色,现在要把所有格子的颜色改成红.绿或者蓝,改变的代价是二者RGB值的曼哈顿距离,还要求红绿蓝格子个数的最大值和最小值要尽可能接近,问最少的代 ...