缩略图

展示图片时,使用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简介内容不在框框内

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容