<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. Virtual Box创建共享目录

    1.先关闭ubuntu,在virtualbox“设置”中找到“共享文件夹”,点击进入,点击右边添加目录按钮,添加windows中要共享的目录,取一个名.比如我在D盘建一个名为share的文件夹,如下图 ...

  2. CI中写原生SQL(封装查询)

    封装查询 封装,通过让系统为你组装各个查询语句,能够简化你的查询语法.参加下面的范例: $sql = "SELECT * FROM some_table WHERE id = ? AND s ...

  3. ytu 1789:n皇后问题(水题,枚举)

    n皇后问题 Time Limit: 1 Sec  Memory Limit: 64 MB  Special JudgeSubmit: 12  Solved: 3[Submit][Status][Web ...

  4. android中ADT和SDK的关系(转)

    ADT(Android Development Tools): 目前Android开发所用的开发工具是Eclipse,在Eclipse编译IDE环境中,安装ADT,为Android开发提供开发工具的升 ...

  5. lr_save_var字符串截取总结

    函数作用: 将一个变化长度的字符串保存到parameter中. 用法实例: 此处讲解函数: Action() {     web_save_timestamp_param("tStamp&q ...

  6. linux全部命令

    linux全部命令 一.安装和登陆命令1.进入图形界面startx 2.进入图形界面init 5 3.进入字符界面init 3 4.登陆login 5.关机poweroff-p 关闭机器的时候关闭电源 ...

  7. D. Array GCD

    You are given array ai of length n. You may consecutively apply two operations to this array: remove ...

  8. 状态压缩 + 暴力 HDOJ 4770 Lights Against Dudely

    题目传送门 题意:有n*m的房间,'.'表示可以被点亮,'#'表示不能被点亮,每点亮一个房间会使旁边的房间也点亮,有意盏特别的灯可以选择周围不同方向的房间点亮.问最少需要多少灯使得所有房间点亮 分析: ...

  9. BZOJ3833 : [Poi2014]Solar lamps

    首先旋转坐标系,将范围表示成矩形或者射线 如果范围是一条线,则将灯按y坐标排序,y坐标相同的按x坐标排序, 对于y相同的灯,f[i]=min(i,它前面灯发光时刻的第k[i]小值), 线段树维护,$O ...

  10. [Unity2D]脚本的使用规则

    Unity2D的游戏脚本可以使用3中开发语言来编写:C#,JavaScript和BOO.你可以选择你熟悉的编程语言来编写,通常C#语言的编程功能会更加强大一些,成为首选的语言.在Unity2D中使用C ...