twitter-bootstrap Bootstrap 模态轮播

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30708029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:48:31  来源:igfitidea点击:

Bootstrap Modal Carousel

htmltwitter-bootstrapcarouselbootstrap-modal

提问by Fearghal

I am trying to implement the modal carousel in my simple, static, Bootstrap based HTML page. I am trying to get this simple codeto work in my page, but I need some more direction. I pasted the code stated into my page, but I end up with the carousel embedded in the page and not hidden. My lack of practical css/javascript knowledge is letting me down as I don't quite understand the 3 simple instructions before the code snippet.

我正在尝试在我的简单、静态、基于 Bootstrap 的 HTML 页面中实现模式轮播。我试图让这个简单的代码在我的页面中工作,但我需要更多的指导。我将声明的代码粘贴到我的页面中,但我最终将轮播嵌入页面中而不是隐藏。我缺乏实用的 css/javascript 知识让我很失望,因为我不太理解代码片段之前的 3 个简单指令。

Can somebody explain to me how I get my modal carousel working by clicking on the thumbnail in this fiddle? JSFiddle example here.

有人可以通过单击此小提琴中的缩略图向我解释如何让我的模式轮播工作吗? JSFiddle 示例在这里。

   <body>
    <!--rows and cols structure -->               
        <div class="row">
            <div class="col-sm-12 col-md-8 col-md-offset-2">
                <!--2nd row-->
                <div class="col-sm-4 col-md-4">          
                        <div class="thumbnail">
                          <img src="/img/image3.jpg" alt="image3 missing">
                          <div class="caption">
                            <h3>Thumbnail label</h3>
                          </div>
                            </div>
                </div>
            </div>
           </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>


    <script src="js/bootstrap.min.js"></script><!--Reference Bootstraop.min before plugins.js but after jquery.js. We alterbootstrap javascript with plugins.js -->
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

</body>

回答by SirJord

If you haven't seen this one yet :

如果你还没有看过这个:

https://noreiller.github.io/bootstrap-modal-carousel/modal-carousel.html

https://noreiller.github.io/bootstrap-modal-carousel/modal-carousel.html

this might give some clarity

这可能会提供一些清晰度