Bootstrap页面布局20 - BS缩略图
<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缩略图的更多相关文章
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
- Bootstrap页面布局23 - BS折叠内容
<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...
- Bootstrap页面布局22 - BS工具提示
当鼠标点击在一个a连接上时,显示提示文字的效果 ---------------- tooltip <div class='container-fluid'> <h3 class=' ...
- Bootstrap页面布局19 - BS提示信息
提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...
- Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...
随机推荐
- 深入浅出TCP协议的三次握手过程
TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 每一次TCP连接都需要三个阶段:连接建立.数据传送和连接释放.“三次握手”就发生在连接建立阶段. 1.三次握手( ...
- ubuntu下简单的驱动编译
转自:http://www.eefocus.com/jefby1990/blog/13-02/291628_c39b8.html 本文是参考了网上多篇帖子而写的算不上什么原创.唯一值得欣慰的只不过在本 ...
- 敏捷开发之Scrum扫盲篇(转)
转:http://www.cnblogs.com/taven/archive/2010/10/17/1853386.html 现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP.. ...
- oracle 10g 学习之基本 SQL SELECT 语句(4)
本篇文章中,对于有的和MSSQL Server相同的语法我就没有再写了,这里我只写Oracle和MSSQL Server有点不同的 定义空值 l 空值是无效的,未指定的,未知的或不可预知的值 l ...
- Diskpart命令安装系统小结
<diskpart命令安装系统小结> 今天给同学安装系统,win8改win7.同学是预装了win8的联想y480,分区表采用的是GPT格式,捣鼓了半天才知道.GPT格式是新式的分区格式,相 ...
- Java Hour 13 集合基础
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为13 Hour,请各位不吝赐教. Java 中的集 ...
- android—获取网络数据
取网络数据主要靠发交易(或者说请求,接口等),而这些交易由java中的网络通信,HttpURLConnection和HttpClient实现,以下是具体例子. 大家都知道,网络通信,发送请求有两种 ...
- win7下loadrunner创建mysql数据库参数化问题解决
问题现象: 安装mysql数据源驱动后,lr创建mysql驱动程序列表没有安装的驱动程序: 安装完mysql ODBC数据源后 2.在控制面板-数据源(ODBC) 3.创建mysql数据源: 4.从l ...
- SU suacor命令学习
前段时间事情忙,今天才更新.
- JAVA定时执行任务的三种方法
1.利用 java.util.Timer 这个方法应该是最常用的,不过这个方法需要手工启动你的任务 Timer timer=new Timer(); timer.schedule(new ListBy ...