0

我目前正在学习 Web 开发的技巧并开始使用 Bootstrap，我目前正在研究轮播。我不喜欢这个设计，我找到了一个替代的旋转木马

我尝试了多种方法，并且阅读了网站上的指南，但由于某种原因，我无法使其在我的网站上运行。有谁知道我将如何添加插件？

4

1 回答 1

2

这里有一些让你开始的东西：http:
//jsfiddle.net/panchroma/hV3bT/

我从http://www.pixedelic.com/plugins/camera/下载了 zip 包，然后查看了 basic.htm 页面。

如果您查看引导示例的 HTML，它几乎与下载的示例页面完全相同，只是没有将内容放在

<div class="fluid_container"> ... </div>

我把它放在等效的引导网格中 

<div class="container">
<div class="row-fluid">
<div class="span12">

<!-- content here -->

</div>
</div>
</div>

然后，我以与 basic.html 示例中相同的顺序加载 CSS 和 javascript 文件。

我认为唯一的另一件事是您会注意到示例页面的头部也有一些样式。可能您唯一需要的就是#back_to_camera div。

如果您需要有关此示例中的 CSS 和 javascript 的更多信息，请转到 jsFiddle 并检查结果窗格的源代码。您将看到正在使用哪些 CSS 和 javascript 文件、它们的加载顺序以及头部中的其他 CSS 和 javascript。

我的示例缺少一些图标...箭头等。一旦你在你的网站上安装了图片、javascript 和 CSS，我认为它们也应该很好。

希望这可以帮助！

编辑：我添加了这个额外的 CSS 来强制第二个轮播示例底部的缩略图水平显示 

.camera_thumbs_cont ul{
width:100% !important;
}

.camera_thumbs_cont li
{
display: inline !important;
padding-right: 20px;
}
于 2013-01-16T20:20:53.030 回答