Bootstrap es un conjunto de herramientas de código abierto lanzado por Twitter para el desarrollo front-end. Fue desarrollado por el diseñador de Twitter Mark Otto y Jacob Thornton y es un marco CSS/HTML.
Grupo de botones
.BTN-GROUP> .BTN: un conjunto de botones .btn se envuelven en .BTN-GROUP
Outsourcing Elements.BTN-GROUP {Position/Display/}
Botón elemento.btn
<div role = "group"> <button type = "botón"> izquierda </botón> <botón type = "botón"> Middle </button> <button type = "botón"> derecho </botón> </div>
Barra de herramientas de botón
.btn-toolbar> .btn-group
Outsourcing Element.btn-toolbar {margen-izquierda}
<div role = "Tool Bar"> <div role = "grupo"> ... </div> <div role = "grupo"> ... </div> <div role = "grupo"> ... </div> </div>
Tamaño del botón
.BTN-GROUP-*(LG/MD/SM/XS)
.BTN-GROUP-*>. BTN {Padding/Font-Size/Border-Radius}
<div> <botón> izquierda </boton> <boton> Middle </boton> <botón> derecho </boton> </div>
Anidación de botones
.BTN-GROUP Nesting.BTN-GROUP
<div role = "btn-group"> <boton> button1 </boton> <boton> Button2 </boton> <div role = "btn-group"> <button data-toggle = "desplegable"> dragar <pan> </span> </button> <ul> <li> <a> Proyecto 1 </a> </li> <li> <a> Project 2 </a> </li> <ul> </ul> </ul> </Divi
Grupo de botones organizado verticalmente
.btn-group-vertical
<div role = "btn-group"> ... </div>
Alinear ambos extremos del grupo de botones
Se manifiesta como llenar el ancho del elemento principal
Flaw: porque el margen no es compatible con la pantalla: célula de mesa; Aparecerá el efecto de las bordes dobles
Nestación de botones de necesidad.
<div role = "group"> <div role = "grupo"> <botón> izquierda </boton> </div> <div role = "grupo"> <botón> izquierda </boton> </div> <div role = "grupo"> <button data-toggle = "desplegable"> derecho> derecho <span> </span> </boton> <ul> <li> <a> item1 </a> </li> <li> <a> item2 </a> </li> </ul> </div> </div>
Menú desplegable al estilo de botones
Outsourcing Element Class.BTN-Group {display/posicion}
Confiar en el complemento del menú desplegable
Menú desplegable de un solo botón
<div role = "grupo"> <botón data-toggle = "desplegable"> botón <span> </span> </boton> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Menú desplegable del botón dividido
<viv> <boton> botón </boton> <botón data data-toggle = "desplegable"> <span> </span> </boton> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Tamaño del menú desplegable del botón
Control de control.btn-*:. BTN-LG/BTN-SM/BTN-XS {Padding/Font-Size/Border-Radius}
<div> <botón data-toggle = "desplegable"> botón <span> </span> </boton> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Menú emergente
Control de dirección emergente
<div> <botón data-toggle = "desplegable"> botón <span> </span> </boton> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Lo anterior es el conocimiento relevante sobre los botones de componente Bootstrap (2) introducidos por el editor. ¡Espero que te sea útil!