Javascript 引导灯箱。如何在自己的网站中使用简单的例子?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14521930/
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
Bootstrap Lightbox. How to use simple example in own site?
提问by vavelde
I'm trying to integrate Bootstrap Lightbox with my own twitter bootstrap site. How to use example from http://jbutz.github.com/bootstrap-lightbox/#demo
我正在尝试将 Bootstrap Lightbox 与我自己的 twitter bootstrap 站点集成。如何使用http://jbutz.github.com/bootstrap-lightbox/#demo 中的示例
in my code? What do I need to import?
在我的代码中?我需要导入什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template · Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Nothing</a></li>
<li><a href="#">About</a></li>
</ul>
<h3 class="muted">My site</h3>
</div>
<hr>
<div class="footer">
<p>© Company 2012</p>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
What files are required? Thanks
需要什么文件?谢谢
回答by hutchonoid
I tend to use the built in twitter bootstrap modal dialog for this:
为此,我倾向于使用内置的 twitter bootstrap 模态对话框:
The full information is available on the official bootstrap site:
完整信息可在官方引导站点上获得:
http://getbootstrap.com/javascript/#modals
http://getbootstrap.com/javascript/#modals
If you scroll down you will see a 'Launch demo modal' button like below:
如果向下滚动,您将看到一个“启动演示模式”按钮,如下所示:


Selecting this displays the model like this:
选择此项显示如下模型:


The full details on how to implement this are detailed in the site.
有关如何实现这一点的完整详细信息,请参阅网站。

