bootstrap - image

2024年3月20日 186次阅读 来源: 1000copy

使用bootstrap内置类可以把图片套圆角、套圆、套白边：

<img src="http://placehold.it/125x125" class="img-rounded" >
<img src="http://placehold.it/125x125" class="img-circle">
<img src="http://placehold.it/125x125" class="img-thumbnail">

利用好bootstrap的布局能力，做出类似缩略图集的UI很容易：

<div class=”container”>

<div class="row">
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/125x125" alt="125x125">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/125x125" alt="125x125">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/125x125" alt="125x125">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/125x125" alt="125x125">
        </a>
    </div>
</div>

</div>

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000006791839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞