网页的图片预览效果（bootstrap）

最新推荐文章于 2025-05-28 11:29:00 发布

原创最新推荐文章于 2025-05-28 11:29:00 发布 · 7.4k 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何利用Bootstrap框架和Lightbox插件在网页中创建图片预览效果。通过HTML结构、引入Bootstrap样式和Lightbox脚本，实现了响应式的图片链接，点击后以弹出窗口形式展示大图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-sm-4"><a href="img/1.jpg" class="lightbox-2" rel="flowers" title="1">
            <img src="img/1.jpg"
                 class="img-responsive img-circle"></a></div>
        <div class="col-sm-4"><a href="img/2.jpg" class="lightbox-2" rel="flowers" title="2">
            <img src="img/2.jpg"
                 class="img-responsive img-circle"></a></div>
        <div class="col-sm-4"><a href="img/3.jpg" class="lightbox-2" rel="flowers" title="3">
            <img src="img/3.jpg"
                 class="img-responsive img-cirecle"></a></div>

        <div class="col-sm-4"><a href="img/4.jpg" class="lightbox-2" rel="flowers" title="4">
            <img src="img/4.jpg"
                 class="img-responsive img-cirecle"></a></div>
        </div>
</div>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox.js"></script>
    <script>
        $(function(){
            $(".lightbox-2").lightbox({
                fitToScreen: true,
                imageClickClose: false
            });

        });

    </script>

</body>
</html>