Bootstrap (Parte 10): Grupos de botones

Redes sociales

Logo Bootstrap

Grupos de botones

Bootstrap te permite reunir un conjunto de botones (en una sola línea o fila), en lo que se denomina Grupo de botones.

Para crear un grupo de botones debes usar un elemento <div> con la clase .btn-group.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Navarra</button>
    <button type="button" class="btn btn-primary">Cantabria</button>
    <button type="button" class="btn btn-primary">Arag&oacute;n</button>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Consejo: Para cambiar el tamaño de todos los botones de un grupo utiliza la clase .btn-group-xs para botones extra pequeños, la clase btn-group-sm para botones pequeños, la clase .btn-group-md para botones medianos (tamaño por defecto) y la clase .btn-group-lg para botones grandes.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
  <p>Botones grandes:</p>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Navarra</button>
    <button type="button" class="btn btn-primary">Cantabria</button>
    <button type="button" class="btn btn-primary">Arag&oacute;n</button>
  </div>
  <p>Botones extra pequeños:</p>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Navarra</button>
    <button type="button" class="btn btn-primary">Cantabria</button>
    <button type="button" class="btn btn-primary">Arag&oacute;n</button>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Grupos de botones verticales

Bootstrap también soporta grupos de botones verticales. Usa la clase .btn-group-vertical para crearlos.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Navarra</button>
    <button type="button" class="btn btn-primary">Cantabria</button>
    <button type="button" class="btn btn-primary">Arag&oacute;n</button>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Grupo de botones justificado

Para que el grupo de botones ocupe todo el ancho de la ventana del navegador, usa la clase .btn-group-justified. Se emplea con el elemnto <a>

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Navarra</a>
    <a href="#" class="btn btn-primary">Cantabria</a>
    <a href="#" class="btn btn-primary">Arag&oacute;n</a>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Grupos de botones anidados para menús desplegables

Puedes anidar grupos de botones para crear menos desplegables.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
<body>
<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Navarra</button>
    <button type="button" class="btn btn-primary">Cantabria</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Arag&oacute;n <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Huesca</a></li>
        <li><a href="#">Teruel</a></li>
        <li><a href="#">Zaragoza</a></li>
      </ul>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Botones desplegables divididos

Puedes crear botones desplegables, con dos áreas activas, separadas por una línea vertical. Una de las áreas la forma el título del botón, y las otra la punta de flecha que despliega el menú.

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo Bootstrap - webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Botones divididos</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Arag&oacute;n</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Huesca</a></li>
      <li><a href="#">Teruel</a></li>
      <li><a href="#">Zaragoza</a></li>
    </ul>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.