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='#'& ...
随机推荐
- 【Linux工具】GIT+Gollum在Ubuntu下搭建本地WIKI编辑系统
1 设置淘宝的gem镜像 1.1 不用镜像的痛苦 如果直接用官网的话,会有如下的错误信息,添加源.安装gem都是一样的错误,就算能连上也会很慢: $ gem sources -a https://ru ...
- C# 常用正则表达式
// 匹配移动手机号 @"^1(3[4-9]|5[012789]|8[78])\d{8}$"; // 匹配电信手机号 @"^18[09]\d{8}$"; ...
- hdu 1150 Machine Schedule 最少点覆盖转化为最大匹配
Machine Schedule Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...
- ajax请求node.js接口时出现 No 'Access-Control-Allow-Origin' header is present on the requested resource错误
ajax请求node.js接口出现了如下的错误: XMLHttpRequest cannot load http://xxx.xxx.xx.xx:8888/getTem?cityId=110105&a ...
- 在CentOS下利用Eclipse调试FFmpeg
所需软件 64位软件打包下载链接:http://pan.baidu.com/s/1i3B08Up 密码:o50u https://yunpan.cn/cBKDSbrGDgBvz 访问密码 1f55 ...
- Java的内存模型
"让计算机并发执行若干个运算任务"与"更充分地利用计算机处理器的效能"之间的因果关系,看起来顺理成章,实际上它们之间的关系并没有想象中的那么简单,其中一个重要的 ...
- nodeAPI--TCP
Node HTTP服务器是构建与Node TCP服务器之上的,即http.Server继承自net.Server; TCP特性: 面向连接的通信和保证顺序的传递: IP的协议是面向无连接,且数据包送达 ...
- HDU3996 Gold Mine(最大权闭合子图)
#include<cstdio> #include<cstring> #include<queue> #include<algorithm> using ...
- POJ3764 The xor-longest Path(Trie树)
题目给一棵有边权的树,问树上任意两点路径上的边异或值最多是多少. 记录每个点u到根路径的异或值xor[u],那么任意两点u.v路径的异或值就是xor[u]^xor[v]. 于是这个问题就变成了从n个数 ...
- BZOJ3743 : [Coci2014]Kamp
d[x][0]表示x点向下走且回到x点的最少代价 d[x][1]表示x点向下走但不回到x点的最少代价 d[x][2]表示x点向下走的最长路 d[x][3]表示x点向下走的次长路 u[x][0]表示x点 ...