Navbar - barra responsive

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Navbar - barra responsive

Previous pageReturn to chapter overviewNext page

Tela - PC

 

bootstrap9

 

Tela - Smartphone e Tablet

 

bootstrap10

 

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>

       

  </style>

</head>

<body>

  <div class="navbar navbar-fixed-top navbar-inverse">

      <div class="navbar-inner">

          <div class="container">

              <a 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>

              </a><a class="brand" href="#">Project name</a>

              <div class="nav-collapse">

                  <ul class="nav">

                      <li class="active"><a href="#">Inicial</a></li>

                      <li><a href="#">Cadastro</a></li>

                      <li><a href="#">Consultas</a></li>

                      <li><a href="#">Sobre</a></li>

                  </ul>

              </div>

          </div>

      </div>

  </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

</html>