El grupo de botones es el mismo que el componente del menú desplegable, y debe confiar en el complemento Button.js para funcionar correctamente.
Aspecto estructural: use un contenedor con el nombre de clase BTN-Group y coloque múltiples botones en este contenedor.
El grupo de botones también es un componente independiente, por lo que se puede encontrar el archivo fuente correspondiente:
Menos: botones.
Sass: _buttons.scss
CSS: Bootstrap.CSS Line 3131 ~ 3291
<div> <botón type = "botón"> <span> </span> </boton> ... <botón tipo = "botón"> <span> </span> </boton> </div>
CSS:
.btn-group, .btn-group-vertical {posición: relativo; display: inline-block; vertical-align: middle;}. btn-group> .btn, .btn-group-verical> .btn {posición: relativo; float: izquierda;}. btn-group> .btn: hover, .btn-group-verical. .btn: focus, .btn-group-verical> .btn: focus, .btn-group- verical> .btn: activo, .btn-grupo-verical> .btn: activo, .btn-grupe> .btn.active, .btn-grupal-verical> .btn.active {z-odex: 2;}. btn-greup> .btn:. {Outline: Ninguno;}. Btn-Group .Btn + .Btn, .BTN-Group .BTN + .BTN-GROUP, .BTN-GROUP .BTN-GROUP + .BTN-GROUP {margen-left: -1px;}Además de usar el elemento <botón>, también puede usar otros elementos de etiqueta, como la etiqueta <a>. Lo único que debe garantizar es que no importa qué etiqueta se use, el elemento de etiqueta en el contenedor .BTN-Group debe tener el nombre de clase.btn
Las cuatro esquinas del grupo de botones son esquinas redondeadas, excepto el primer y último botón que tienen esquinas redondeadas en los bordes, los otros botones no tienen esquinas redondas.
Explicación detallada:
1. Valor predeterminado: todos los botones son esquinas redondeadas
2. Excepto por el primer botón y el último botón, los otros botones serán redondeados.
3. El último botón se deja solo como esquinas redondeadas y las esquinas inferior derecha.
Código fuente:
.BTN-GROUP> .BTN: no (: First-Child): no (: Last-child): no (.dropdown-toggle) {border-radius: 0;}. btn-group> .btn: first-child {margin-left: 0;}. btn-group> .btn: first-child: not (: last): no (no (.drown-toggle) {border-toggle) 0; Border-Bottom-Right-Radius: 0;}. Btn-Group> .Btn: Last-Child: Not (: First-Child),. .btn-group: no (: first-child): no (: last-child)> .btn {border-radius: 0;}. btn-group> .btn-group: first-child> .btn: last-child, .btn-group> .btn-group: first-child> .dropdown-toggle {border-top-radius: 0; border-bottom-radius: 0;}. .BTN-GROUP: Last-Child> .BTN: First-Child {Border-Top-Left-Radius: 0; Border-Bottom-Left-Radius: 0;}Barra de herramientas de grupo de botones
En un editor de texto enriquecido, organice grupos de botones, como copiar, cortar, pegar un grupo, alinear a la izquierda, al centro, a la derecha y dos extremos, y use la barra de herramientas del botón de marco de arranque BTN-Toolbar
<Div> <Viv>… </div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> </div>
Principio: Permita que floten múltiples grupos del contenedor.
.btn-toolbar {margin-left: -5px;}. btn-toolbar .btn-group, .btn-toolbar .input-group {float: left;}. btn-toolbar> .btn, .btn-toolbar> .btn-group, .btn-toolbar> .input-group {margin-loft: 5px;};Tenga en cuenta que borra el flotador en BTN-Toolbar
.btn-toolbar: antes, .btn-toolbar: después de {display: table; content: "";}. btn-toolbar: después {claro: ambos;}Ejemplo:
<div> <div> <button type = "button"> <span> </span> </boton> <button type = "button"> <span> </span> </boton> <botte> <botte> <boton> </span> </botón> <botón type = "button"> <span> </span> </div> <div> <button type = "button"> <span> </span> </boton>
Agrupación de anidación de botones
Muchas veces, organizamos los grupos de botones del menú desplegable juntos para lograr un efecto similar al menú de navegación:
Cuando lo use, simplemente cambie el nombre de clase del contenedor desplegable que realizó el menú desplegable antes al grupo BTN y colóquelo en el mismo nivel que el botón Normal:
<Div> <button type = "Button"> Home </Button> <Button type = "Button"> Pantalla de producto </Button> <Button type = "Button"> Analas de casos </botón> <botón Tipo de botón = "Botón"> Contáctenos </botón> <div> <button data-toggle = "retiro" type = "botón"> Acerca de nosotros <span> </span> </botón> <li> <li> <li> <a href = "#"#"#"#"#" Button "> Acerca de nosotros <span> </span> </botón> <li> <li> <li> <a href ="#"#"#"#" Perfil </a> </li> <li> <a href = "#"> Cultura corporativa </a> </li> <li> <a href = "#"> Estructura organizacional </a> </li> <li> <a href = "#"> Servicio al cliente </a> </li> </ul> </div> </div> .btn-Greup> > .Btn-Group: no (: First-Child): no (: Last-Child)> .Btn {Border-Radius: 0;}. Btn-Group> .Btn-Group: First-Child, .Btn-Group> .Btn-Group: First-Child>. .Btn-Group: Last-Child> .Btn: First-Child {border-top-left-radio: 0; border-bottom-left-radius: 0;}. btn-group .dropdown-toggle: activo, .btn-grupo.open. 8px;}. Btn-Group> .Btn-Lg + .dropdown-toggle {padding-right: 12px; padding-left: 12px;}. Btn-group.open .dropdown-toggle {-webkit-box-shadow: intest rgba (0, 0, 0, .125);}. Btn-Group.open .dropdown-toggle.btn-link {-webkit-box-shadow: none; box-shadow: none;}Botones agrupados verticalmente
Simplemente reemplace el nombre de clase agrupado horizontalmente.
<Div> <button type = "Button"> Home </Button> <Button type = "Button"> Pantalla de producto </Button> <Button type = "Button"> Analas de casos </botón> <botón Tipo de botón = "Botón"> Contáctenos </botón> <div> <button data-toggle = "retiro" type = "botón"> Acerca de nosotros <span> </span> </botón> <li> <li> <li> <a href = "#"#"#"#"#" Button "> Acerca de nosotros <span> </span> </botón> <li> <li> <li> <a href ="#"#"#"#" Perfil </a> </li> <li> <a href = "#"> Cultura corporativa </a> </li> <li> <a href = "#"> Estructura organizacional </a> </li> <li> <a href = "#"> Servicio al cliente </a> </li> </ul> </div> </div> .btn-Greup- Evertical>. .BTN-GROUP, .BTN-GROUP-VERICAL> .BTN-GROUP, .BTN-GROUP-VERTICAL> .BTN-GROUP-VERTICAL> .BTN-GROUP-VERICAL> .BTN {display: block; float: none; width: 100%; max-width: 100%;}. btn-group-verical> .btn {float: none;}. .btn, .btn-group-verical> .btn + .btn-grupo, .Btn-Group-verical> .BTN-GROUP + .BTN, .BTN-GROUP-VERTICAL> .BTN-GROUP + .BTN-GROUP {margin-top: -1px; margen-marginft: 0;}. btn-group-verical> .btn: no (no (no (no) {border-top-right-radio: 4px; border-bottom-right-radius: .btn {border-bottom-left-radius: 0;}. btn-group-verical> .btn: último child: no (: primer-child) {border-top-left-radius: 0; border-top-dight-radius: 0; fronter > .BTN-GROUP: no (: First-Child): Not (: Last-Child)> .BTN {Border-Radius: 0;}. Btn-Group-Vercical> .BTN-Group: First-Child: Not (: Last-Child)> .Btn: Last-Child, .BTN-Group-Vertical> .BTN-Group: First-Child: Not (Last-Child)>. {Border-Bottom-Right-Radius: 0; Border-Bottom-Left-Radius: 0;}. Btn-Group-verical> .Btn-Group: Last-Child: Not (: First-Child)> .Btn: First-Child {Border-Top-Left-Madius: 0; Border-Top-Right-radio: 0;}El botón de igualación también se llama botón de agrupación adaptativa:
El ancho de todo el grupo de botones es el 100% del contenedor, y cada botón en el grupo de botones divide el ancho de todo el contenedor. Por ejemplo, hay cinco botones en un grupo de botones, cada botón es el 20% del ancho del contenedor; Hay cuatro botones en un grupo de botones, cada botón es el 25% del ancho del contenedor;
Método de implementación: solo agregue un nombre de clase .btn-group-justificado al grupo de botones.BTN-GROUP
<div> <buttton type = "botón"> home </ buttton> <buttton type = "botón"> análisis de casos </ buttton> <buttton type = "botón"> Contáctenos </ buttton> </div> .btn-group-justified {display: table; width: 100%; table-layout: fijo; border-coollapse: separado;}. btn-group-justified> .bt,. .btn-group {display: table-celle; float: none; ancho: 1%;}. btn-group-justificado> .btn-group .btn {ancho: 100%;}Simule .BTN-GROUP-Justified en una tabla (pantalla: tabla) y simule la plantilla de botón dentro en una celda de tabla (pantalla: célula de mesa).
Nota: Al hacer un grupo de botones iguales, intente usar la etiqueta <a> para hacer botones, porque al usar elementos de la etiqueta de botón, usando la pantalla: la tabla no es amigable para admitir en algunos navegadores.
Lecturas recomendadas de Wulin.com:
Explicación detallada del botón Bootstrap
Lo anterior es el componente de botón Bootstrap introducido por el editor. ¡Espero que te sea útil!