Barra de botões e botões com submenus

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Barra de botões e botões com submenus

Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap4

 

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="span12">
        <div class="page-header">
         <h2>Grupo de botões  <small>criando menu</small></h2>
       </div>
       
       <div class="well">
          <div class="btn-group">
           <a href="#" class="btn">Home</a>
           <a href="#" class="btn">Cadastro</a>
           <a href="#" class="btn">Consulta</a>
           <a href="#" class="btn">Contato</a>
         </div>
          
       </div>
     </div>
     </div>
 
    <!-- botao com submenus -->    
 
    <div class="row">
     <div class="span12">
        <div class="page-header">
         <h2>Grupo de botões  <small>menu dropdown</small></h2>
         
       <div class="well">
       
         <div class="dropdown">
            <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">Opções <span class="caret"></span></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
               <li><a href="#">Incluir</a></li>
               <li><a href="#">Excluir</a></li>
               <li><a href="#">Alterar</a></li>
           </ul>
         </div>         
               
       </div>  
       
       </div>
     </div>
     </div>
    
    <!-- grupo de vários botões com submenus -->    
 
    <div class="row">
     <div class="span12">
        <div class="page-header">
         <h2>Grupo de botões num toolbar <small>menu dropdown</small></h2>
         
       <div class="well">
         <div class="btn-toolbar">
         <div class="btn-group">
            <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
              Opções <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">Incluir</a></li>
               <li><a href="#">Excluir</a></li>
               <li><a href="#">Alterar</a></li>
           </ul>
         </div>         
 
         <div class="btn-group">
            <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
              Opções <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">Incluir</a></li>
               <li><a href="#">Excluir</a></li>
               <li><a href="#">Alterar</a></li>
           </ul>
         </div>         
 
         <div class="btn-group">
            <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
              Opções <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">Incluir</a></li>
               <li><a href="#">Excluir</a></li>
               <li><a href="#">Alterar</a></li>
           </ul>
         </div>         
         
         </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>