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='#'& ...
随机推荐
- 深入学习SQL的Limit语句
一.基本语法 SQL的limit语法的如以下形式 SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset 当省略offset的时候 ...
- jQuery信息提示工具jquery.poshytip (转载)
转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...
- Oracle 11g 卸载
1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...
- oracle 共享池( shared pool )
Oracle共享池 Oracle共享池(Share Pool)属于SGA,由库高速缓存(library cache)和数据字典高速缓存(data dictionary cache)组成. 库高速缓存 ...
- Sql server之路 (一)基础学习
查询 1.Select * from表名 2.Select 字段1,字段2,from表名 3.Select 字段1,字段2,...from表名 where 字段1 in('内容') 插入 1.inse ...
- 理解ASP.NET 5的中间件
今天推荐的这篇文章,讲述了如何实现和使用ASP.NET 5的中间件. 虽然在ASP.NET 5中,微软没有再强调OWIN(Open Web Interface for .NET)及其微软官方的OWIN ...
- SQL Server2008跟SQL Server2008R2的区别(转)
QL Server 2008 R2基于SQL Server 2008提供可靠高效的智能数据平台构建而成,SQL Server 2008 R2 提供了大量新改进,可帮助您的组织满怀信心地调整规模.提高 ...
- MATLAB学习笔记(十一)——MATLAB图形用户界面设计
(一)菜单设计 一.建立用户菜单 1.概况: 用户菜单一般含有一级菜单和二级菜单,乃至多级菜单.每一级菜单又包含多个菜单项.建立菜单可以使用uimenu函数. 2.uimenu函数调用: %建立一级菜 ...
- Messenger信使
* Messenger用于Activity和Service之间消息传递 需求:activity来绑定服务,绑定成功后,将数据发送给service,service收到消息后,再发送信息给activity ...
- IntelliJ下使用Code/Live Template加快编码速度:程序员的工作不是写程序,而是写程序解决问题
程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...