如何在bootstrap中切換選項卡？

我是bootstrap新手，我正在嘗試第一個示例，它顯示了一個頂部有3個按鈕的黑色條。到目前爲止，我有這個代碼。如何在bootstrap中切換選項卡？

我看到的例子是在這裏 http://getbootstrap.com/2.3.2/examples/starter-template.html

但該選項卡切換功能不起作用。有誰知道該怎麼做？

感謝

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Pal</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
     <style> 
      body { 
       padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
      } 
     </style> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> 

    </head> 

    <body> 

     <!-- 
     <input id="test"/> 
     <input id="test2"/> 
     --> 

     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="brand" href="#">Pal</a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#about">About</a></li> 
          <li><a href="#contact">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="container"> 

      <h1>Bootstrap starter template</h1> 
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p> 

     </div> 

     <!-- Tab panes --> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane active" id="home">qqq</div> 
      <div role="tabpanel" class="tab-pane" id="about">ggg</div> 
      <div role="tabpanel" class="tab-pane" id="contact">jjj</div> 
     </div> 


     <script src="https://code.jquery.com/jquery-3.0.0-beta1.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 


    </body> 
</html>

來源

2016-01-29 omega

爲什麼你使用bootstrap 2文檔作爲參考和bootstrap 3的代碼文件？請參閱：http://getbootstrap.com/javascript/#tabs –

爲什麼我不應該？ – omega

只是檢查引導的文件，你有可能引發該地區只需要標籤窗格和導航選項卡，

<ul class="nav nav-tabs" role="tablist"> 
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

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

來源

2016-01-29 05:12:51 mmativ

<div class="nav-collapse collapse"> 
    <ul class="nav" role="navigation"> 
     <li class="active" role="presentation"><a data-toggle="tab" href="#home">Home</a></li> 
     <li role="presentation"><a data-toggle="tab" href="#about">About</a></li> 
     <li role="presentation" ><a data-toggle="tab" href="#contact">Contact</a></li> 

    </ul> 
</div>

來源

2016-01-29 07:43:20 aarzoo

如何在bootstrap中切換選項卡？

回答

相關問題