Question

我正在为我的一个朋友制作一个单页网站。她是一名时装设计师，她很想拥有一个基于“时尚组合”Bootstrap模板的单页网站 - ＆gt; http://startbootstrap.com/stylish-portfolio

但是，我想在下面的部分中放入一个灯箱库，上面写着“我们的一些工作”。

我在考虑使用BlueImp Lightbox图库或Bootstrap Lightbox：http://www.jasonbutz.info/bootstrap-lightbox/#usage

两者都符合我的要求。

但是，我试图将其插入到HTML代码中，但没有任何运气！有没有人有任何插入/添加灯箱画廊到Bootstrap模板的经验？如果是这样，我该如何处理这项任务呢？

Answer 1

与您的问题中的评论一样，他们希望看到您的代码，以便他们知道他们可以在何处以及如何帮助您。它还可以让我们知道我们需要提供多少代码而不用实际的勺子喂你的答案，这样你就可以得到你的答案并且仍然可以学习：）

有了这个，我会假设你是初学者，因此提供了你需要的大部分代码以及我正在做的事情的解释。我将以bootstrap-lightbox为例。

首先，您需要从网站下载文件。下载文件后，您将能够看到它包含4个文件，即bootstrap-lightbox.css，bootstrap-lightbox.js及其最小文件。（最小文件只是文件的压缩版本，以减小其大小）

现在，它基本上只需要将这些文件插入您的项目中。

假设您将文件放入项目中各自的js和css文件夹中，这就是它们的样子：

<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags

<script src="js/bootstrap-lightbox.js"></script>

在插入文件后，只需使用您在网站上找到的HTML代码就可以了:)

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
        <img src="image.png">
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>

Answer 2

解决。我使用BlueImp来插入灯箱库： - ）

Bootstrap 3模板中的Lightbox Gallery？

2 个答案: