i new bootstrap, , trying first example, shows black bar on top 3 buttons. far have code.
the example saw here http://getbootstrap.com/2.3.2/examples/starter-template.html
but tab switching doesn't work. know how it?
thanks
<!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 make container go way bottom of 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 document way quick start new project.<br> message , 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>
<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> 
Comments
Post a Comment