bookstrap实现缩略图

缩略图网址: http://placehold.it/260x180

效果图

<!--缩略图网址http://placehold.it/260x180-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Boostrap 缩略图_05</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
        <div class="col-md-1">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="http://placehold.it/260x180">
            </a>
        </div>
    </div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_31935419/article/details/81217263