<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. 深入学习SQL的Limit语句

    一.基本语法 SQL的limit语法的如以下形式 SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset 当省略offset的时候 ...

  2. jQuery信息提示工具jquery.poshytip (转载)

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

  3. Oracle 11g 卸载

    1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...

  4. oracle 共享池( shared pool )

    Oracle共享池 Oracle共享池(Share Pool)属于SGA,由库高速缓存(library cache)和数据字典高速缓存(data dictionary cache)组成. 库高速缓存 ...

  5. Sql server之路 (一)基础学习

    查询 1.Select * from表名 2.Select 字段1,字段2,from表名 3.Select 字段1,字段2,...from表名 where 字段1 in('内容') 插入 1.inse ...

  6. 理解ASP.NET 5的中间件

    今天推荐的这篇文章,讲述了如何实现和使用ASP.NET 5的中间件. 虽然在ASP.NET 5中,微软没有再强调OWIN(Open Web Interface for .NET)及其微软官方的OWIN ...

  7. SQL Server2008跟SQL Server2008R2的区别(转)

    QL Server 2008 R2基于SQL Server 2008提供可靠高效的智能数据平台构建而成,SQL Server 2008 R2 提供了大量新改进,可帮助您的组织满怀信心地调整规模.提高 ...

  8. MATLAB学习笔记(十一)——MATLAB图形用户界面设计

    (一)菜单设计 一.建立用户菜单 1.概况: 用户菜单一般含有一级菜单和二级菜单,乃至多级菜单.每一级菜单又包含多个菜单项.建立菜单可以使用uimenu函数. 2.uimenu函数调用: %建立一级菜 ...

  9. Messenger信使

    * Messenger用于Activity和Service之间消息传递 需求:activity来绑定服务,绑定成功后,将数据发送给service,service收到消息后,再发送信息给activity ...

  10. IntelliJ下使用Code/Live Template加快编码速度:程序员的工作不是写程序,而是写程序解决问题

    程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...