2013-01-25 16 views
2

我在嘗試將Bootstrap Lightbox與我自己的twitter引導程序站點集成。如何使用示例http://jbutz.github.com/bootstrap-lightbox/#demoBootstrap燈箱。如何在自己的網站中使用簡單的例子?

在我的代碼?我需要導入什麼?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Template &middot; 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>&copy; 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> 

需要哪些文件?由於

回答

13

我傾向於使用內置的Twitter的引導模式對話框此:

完整的信息,請訪問官方引導網站:

http://getbootstrap.com/javascript/#modals

如果向下滾動,你會看到一個 '啓動演示模式' 按鈕,如下圖所示:

launch demo button

選擇此顯示這樣的模式:

launched modal

關於如何實現這一點的全部細節都在網站的詳細。