我正在查询数据库中的一些图像并在网页上显示它们。但是,我想以缩略图的形式在行和列中显示这些图像。
例如:
如果c1,c2,c3,c4和c5是5列,r1,r2和r3是3行,那么页面应该显示15个图像缩略图。
我正在使用bootstrap。
提前感谢您的帮助。
答案 0 :(得分:1)
我认为这是关于它的
<body>
<div class="container-fluid">
<div class="hidden-phone">
</div>
<div class="row-fluid">
<div class="span12 well">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<强> CSS 强>
ul.thumbnails li.span4:nth-child(3n + 4) {
margin-left : 0px;
}
答案 1 :(得分:0)
您可以使用基本网格系统和thumbnail
类来创建所需的结构。
<div class="row">
<div class="col-sm-3 col-md-2">
<a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
</div>
...
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
</div>
...
</div>
...
Here's a JSFiddle来证明。您可以根据要实现的布局选择网格类。 grid system的Bootstrap文档将帮助您加载。