展示图片时,使用bootstrap的缩略图可以快速展示图片(以及图片信息的展示)
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" class="thumbnail">
<img src="../images/timg.jpg" width="200" height="200">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
</div>
<div class="caption">
<h3>boostrap</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
</div>
<div class="caption">
<h3>boostrap</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
</div>
<div class="caption">
<h3>boostrap</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/timg.jpg"
alt="通用的占位符缩略图" width="200" height="200">
</div>
<div class="caption">
<h3>boostrap</h3>
<p>一些示例文本。一些示例文本。</p>
<p>一些示例文本。一些示例文本。</p>
<p>一些示例文本。一些示例文本。</p>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
</div>
1、如果只有图片展示,图片就用a标签包裹,并添加一个类名为thunbnail;如果还有其实信息的展示,可以使用div包裹并添加thunbnail类名;
2、为了是适配pc和移动端,使用col-xs-6在移动端的时候展示2个图片,pc端的时候展示4个图片
3、最后一个row简介内容不在框框内