Bootstrap4 Tutoriales básicos

Bootstrap4 Grupo de botones

　　 En el capítulo anterior, aprendiste cómo crear diferentes tipos de botones individuales y cómo modificarlos con clases predefinidas. Sin embargo, Bootstrap también te permite combinar un grupo de botones en una línea utilizando el componente de grupo de botones.

Bootstrap 4 Permite que coloquemos los botones en una misma línea, se puede agregar .btn en el elemento <div>-La clase group para crear el grupo de botones.

Para crear un grupo de botones, simplemente envuelva una serie de botones con la clase .btn en un elemento y aplique .btn-La clase group, como se muestra en el siguiente ejemplo:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Grupo de botones</h2>
　　<p>　.btn-La clase group se utiliza para crear grupos de botones:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Aviso: Podemos usar .btn-grupo-lg|sm clase para configurar el tamaño del grupo de botones.

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tamaño del grupo de botones</h2>
　　<p>Podemos usar　.btn-grupo-lg|sm|xs clase para configurar el tamaño del grupo de botones.</p>
　　<h2>Botón grande:</h2>
　　<div class="btn-grupo　btn-grupo-lg">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　</div>
　　<h2>Botón predeterminado:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　</div>
　　<h2>Pequeño botón:</h2>
　　<div class="btn-grupo　btn-grupo-sm">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Grupo de botones verticales

Puede usar .btn-grupo-clase .btn-vertical para crear un grupo de botones vertical:<

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Grupo de botones verticales</h2>
　　<p>Puede usar .btn-grupo-clase .btn-vertical para crear un grupo de botones vertical:</p>
　　<div class="btn-grupo-vertical">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Grupo de botones integrado y menú desplegable

Podemos configurar un menú desplegable dentro del grupo de botones:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Grupo de botones integrado</h2>
　　<p>Configuración del menú desplegable del grupo de botones:<//p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primario　dropdown-activar" data-activar="dropdown">
　　　　　　Sony
　　　　　　</button>
　　　　　　<div class="dropdown-menú>
　　　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Menú desplegable de botones divididos

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Menú desplegable de botones divididos</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primario">Sony</button>
　　　　<button type="button" class="btn btn-primario　dropdown-activar　dropdown-activar-dividir" data-activar="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menú>
　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Grupo de botones verticales y menú desplegable

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Grupo de botones verticales y menú desplegable</h2>
　　<div class="btn-grupo-vertical">
　　　　<button type="button" class="btn btn-primario">Apple</button>
　　　　<button type="button" class="btn btn-primario">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primario　dropdown-activar" data-activar="dropdown">
　　　　　　　　Sony
　　　　　　</button>
　　　　　　<div class="dropdown-menú>
　　　　　　　　<a class="dropdown-item" href="#">Tablet</a>
　　　　　　　　<a class="dropdown-item" href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Crear barra de herramientas de botones

También puede combinar un conjunto de grupos de botones para crear componentes más complejos, como una barra de herramientas de botones. Para crear una barra de herramientas de botones, simplemente envuelva un conjunto de grupos de botones en una

elemento, luego .btn-aplicar clases en una barra de herramientas, como se muestra en el siguiente ejemplo:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho,　inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　　　<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/fuente-awesome/4.7.0/css/fuente-awesome.min.css">
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-font"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-bold"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-italic"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-left"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-center"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-right"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-justify"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-undo"></i>
　　　　　　　　</button>
　　　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto es el siguiente:

Bootstrap4 Borla Bootstrap4 Botón