希望通過使用引導程序

This image has button on right side in nav-bar. This button is my main issue.希望通過使用引導程序

Here, in this picture you will see along with the Website title menu I have created 3 tab like Page1, PAge2, and Page3.

問題，我有它是讓按鈕工作：按鈕在右側將出現在瀏覽器窗口頁面最大化和消失標籤的號召第1頁至第3頁。我想通過點擊按鈕而不是頁面上的頁面出現在頁面上來獲取按鈕，如果它消失的話。這裏是我的代碼下面，我正在引導，它已經下載到我的文件夾。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title>Bootstrap 101 Template</title> 
       <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
        <!--[if lt IE 9]> 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
        <![endif]--> 

      <style> 

       .box { 
        background-color:#d3d3d3; 
        border: 1px solid ; 

         } 


      </style> 
</head> 
<body> 

    <div class="navbar navbar-default"> 

     <div class="container"> 

     <div class="navbar-header"> 

      <a href="" class="navbar-brand">My Website</a> 

      <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">              
      <span class="sr-only">Toggle navigation</span>             
      <span class="icon-bar"></span>      
      <span class="icon-bar"></span>      
      <span class="icon-bar"></span>                   
      </button> 

     </div> 

     <div class="collapse navbar-collapse"> 

      <ul class="nav navbar-nav"> 

       <li class="active"><a href="">Page 1</a></li> 

       <li><a href="">Page 2</a></li> 

       <li><a href="">Page 3</a></li> 

      </ul> 

     </div> 

     </div> 

    </div> 

    <div class="container"> 

     <h1>Our Bootstrap Page</h1> 

     <form> 

      <input type="text" /> 


     </form> 

    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 



</body>

來源

2016-01-15 Dhruv Patel

嘗試在下面的代碼工作。這是引導啓動器模板。

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">My Website</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Page 1</a></li> 
     <li><a href="#about">Page 2</a></li> 
     <li><a href="#contact">Page 3</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

來源

2016-01-15 15:01:39 BigDropGR

變化：

datatoggle = 「崩潰」

要：

data-toggle="collapse"

來源

2016-01-15 15:12:01 Dan

感謝你的幫助丹尼爾。它現在有效。 –

希望通過使用引導程序

回答

相關問題