Как переключить вкладки в бутстрап?

Я новичок в бутстрапе, и я пробую первый пример, где он показывает черную полосу сверху с 3 кнопками. Пока у меня этот код.Как переключить вкладки в бутстрап?

Пример, который я видел здесь 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

Как переключить вкладки в бутстрап?

ответ

Смежные вопросы