略缩图 - Thumbnails

作者: 勤劳的悄悄 | 来源:发表于2016-03-30 11:36 被阅读209次

    怎样创建略缩图 ?

    • 最简单的方法是直接在 <img> 上设置 .img-thumbnail 样式;
    • 也可以在 <img> 的父元素,如 <div> 上设置 .img-thumbnail 样式;
    • 如果希望图像也是一个链接,则父元素应该是一个 <a>
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="/images/me.jpg">
            </a>
        </div>
    
        ......
    </div>
    
    01.PNG

    自定义的略缩图可以包含什么组件 ?

    设置了 .thumbnail 中元素中可以添加图片、图片之后可以添加标题、文本内容、按钮、链接等等

    <div class="row">
    
        <div class="col-xs-6">
            <div class="thumbnail">
                <img src="/images/me.jpg">
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容巴拉拉小魔仙巴拉拉小魔仙巴拉拉小魔仙巴拉拉小魔仙巴拉拉小魔仙巴拉拉小魔仙</p>
                    <p>
                        <a href="#" class="btn btn-primary">分享</a> 
                        <a href="#" class="btn btn-default">下载</a>
                    </p>
                </div>
            </div>
        </div>
    
        ......
    
    </div>
    
    02.PNG

    相关文章

      网友评论

        本文标题:略缩图 - Thumbnails

        本文链接:https://www.haomeiwen.com/subject/gvoslttx.html