Tabs, Barra de Navegação e Abas

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Tabs, Barra de Navegação e Abas

Previous pageReturn to chapter overviewNext page

 

Tela

 

bootstrap5

 

Abas

 

bootstrap6

 

Fonte

 

<!DOCTYPE html>

<html>

<head>

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

  <style>

       

  </style>

</head>

<body>

  <!--barra de botoes -->

  <div class="container">

      <div class="row">

          <div class="span6">

              <h2>

                   Basic tabs</h1>

                  <ul class="nav nav-tabs">

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

                      <li><a href="#">Quem somos</a></li>

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

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

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

                  </ul>

          </div>

          <div class="span6">

              <h2>

                   Basic pills</h1>

                  <ul class="nav nav-pills">

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

                      <li class="active"><a href="#">Quem somos</a></li>

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

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

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

                  </ul>

          </div>

      </div>

      <!----------------------------------->

      <div class="row">

          <div class="span6">

              <h2>

                   Stacked tabs</h1>

                  <ul class="nav nav-tabs nav-stacked">

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

                      <li><a href="#">Quem somos</a></li>

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

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

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

                  </ul>

          </div>

          <div class="span6">

              <h2>

                   Stacked pills</h1>

                  <div class="well">

                      <ul class="nav nav-pills nav-stacked">

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

                          <li class="active"><a href="#">Quem somos</a></li>

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

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

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

                      </ul>

                  </div>

          </div>

      </div>

      <!----------------------------------->

      <div class="row">

          <div class="span6">

              <h2>

                   Nav List 01</h1>

                  <div class="well">

                      <ul class="nav nav-list">

                          <li class="nav-header">Homemnu</li>

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

                          <li><a href="#">Quem somos</a></li>

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

                          <li class="nav-header">Bosques</li>

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

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

                      </ul>

                  </div>

          </div>

          <div class="span6">

              <h2>

                   Nav List com icones</h1>

                  <div class="well">

                      <ul class="nav nav-list">

                          <li class="nav-header">Homemnu</li>

                          <li class="active"><a href="#"><i class="icon-plus"></i>Inicial</a></li>

                          <li><a href="#"><i class="icon-bell"></i>Quem somos</a></li>

                          <li><a href="#"><i class="icon-book"></i>Produtos</a></li>

                          <li class="nav-header">Bosques</li>

                          <li><a href="#"><i class="icon-trash"></i>Contato</a></li>

                          <li><a href="#"><i class="icon-edit"></i>Sobre</a></li>

                      </ul>

                  </div>

          </div>

      </div>

  </div>

  <!-------------------------->

  <!-------------------------->

  <div class="container">

      <div class="row">

          <div class="span12">

              <div class="page-header">

                  <h2>

                       ABAS <small>Locomia</small></h1>

                      <div class="tabbable">

                          <ul class="nav nav-tabs">

                              <li class="active"><a href="#tab1" data-toggle="tab">Primeira</a></li>

                              <li><a href="#tab2" data-toggle="tab">Segunda</a></li>

                          </ul>

                          <div class="tab-content">

                              <div class="tab-pane active" id="tab1">

                                  <p>

                                       conteudo aba #1</p>

                              </div>

                              <div class="tab-pane" id="tab2">

                                  <p>

                                       DOIS!!!</p>

                              </div>

                          </div>

                      </div>

              </div>

          </div>

          <!-- BELOW --->

          <div class="row">

              <div class="span12">

                  <div class="page-header">

                      <h2>

                           ABAS Below <small>Locomia</small></h1>

                          <div class="tabbable tabs-below">

                              <div class="tab-content">

                                  <div class="tab-pane active" id="tab3">

                                      <p>

                                           conteudo aba #3</p>

                                  </div>

                                  <div class="tab-pane" id="tab4">

                                      <p>

                                           DOIS!!!</p>

                                  </div>

                              </div>

                              <ul class="nav nav-tabs">

                                  <li class="active"><a href="#tab3" data-toggle="tab">Primeira</a></li>

                                  <li><a href="#tab4" data-toggle="tab">Segunda</a></li>

                              </ul>

                          </div>

                  </div>

              </div>

              <!-- LEFT --->

              <div class="row">

                  <div class="span12">

                      <div class="page-header">

                          <h2>

                               ABAS LEFT<small>Locomia</small></h1>

                              <div class="tabbable tabs-left">

                                  <ul class="nav nav-tabs">

                                      <li class="active"><a href="#tab5" data-toggle="tab">Primeira</a></li>

                                      <li><a href="#tab6" data-toggle="tab">Segunda</a></li>

                                  </ul>

                                  <div class="tab-content">

                                      <div class="tab-pane active" id="tab5">

                                          <p>

                                               conteudo aba #1</p>

                                      </div>

                                      <div class="tab-pane" id="tab6">

                                          <p>

                                               DOIS!!!</p>

                                      </div>

                                  </div>

                              </div>

                      </div>

                  </div>

                  <!-- RIGTH --->

                  <div class="row">

                      <div class="span12">

                          <div class="page-header">

                              <h2>

                                   ABAS Right<small>Locomia</small></h1>

                                  <div class="tabbable tabs-right">

                                      <ul class="nav nav-tabs">

                                          <li class="active"><a href="#tab7" data-toggle="tab">Primeira</a></li>

                                          <li><a href="#tab8" data-toggle="tab">Segunda</a></li>

                                      </ul>

                                      <div class="tab-content">

                                          <div class="tab-pane active" id="tab7">

                                              <p>

                                                   conteudo aba #1</p>

                                          </div>

                                          <div class="tab-pane" id="tab8">

                                              <p>

                                                   DOIS!!!</p>

                                          </div>

                                      </div>

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