grupo de botones de arranque
grupo de botones permite que varios botones para ser apilados en la misma línea. Cuando se desea alinear los botones a la vez, lo cual es muy útil. Puede botón (botón) plug-in de Bootstrap para añadir una casilla de verificación y estilo de la caja JavaScript comportamiento opcional.
La siguiente tabla resume algunos de los Bootstrap clase importante utilizar los botones proporcionados por el grupo:
| Class | 描述 | 代码示例 |
|---|
| .btn-group | 该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。 |
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
</div>
|
| .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 |
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
|
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 |
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
|
| .btn-group-vertical | 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 |
<div class="btn-group-vertical">
...
</div>
|
Los grupos básicos de botones
El siguiente ejemplo demuestra la tabla anterior para discutir el uso de laclase .btn-grupo:
Ejemplos
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default" > Botón 1 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 2 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 3 </ botón>
</ Div>
Los resultados son los siguientes:
Botón en la barra de herramientas
El siguiente ejemplo demuestra la tabla anterior se discuten enclase .btn-barra de herramientas para utilizar:
Ejemplos
<Div class = "btn-barra de herramientas" role = "barra de herramientas">
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default" > Botón 1 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 2 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 3 </ botón>
</ Div>
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default" > botón de 4 </ botón>
<Botón type = "button" class = "btn btn-default" > Botón 5 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 6 </ botón>
</ Div>
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default" > botones 7 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 8 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 9 </ botón>
</ Div>
</ Div>
Los resultados son los siguientes:
Tamaño del botón
El siguiente ejemplo demuestra la anterior discusión de mesa a laclase .btn-grupo- * Uso:
Ejemplos
<Div class = "btn-grupo btn- grupo-lg">
<Botón type = "button" class = "btn btn-default" > Botón 1 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 2 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 3 </ botón>
</ Div>
<Div class = "btn-grupo btn- grupo-sm">
<Botón type = "button" class = "btn btn-default" > botón de 4 </ botón>
<Botón type = "button" class = "btn btn-default" > Botón 5 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 6 </ botón>
</ Div>
<Div class = "btn-grupo btn- grupo-xs">
<Botón type = "button" class = "btn btn-default" > botones 7 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 8 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 9 </ botón>
</ Div>
Los resultados son los siguientes:
anidación
Puede anidar otro grupo de botones de botón dentro de un grupo, es decir, dentro de un nido.btn-grupo-.btnotrogrupo.Cuando se utiliza una combinación de una serie de botones y menús desplegables para hacer, esto va a ser utilizado.
Ejemplos
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default" > Botón 1 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 2 </ botón>
<Div class = "btn-grupo">
<Botón type = "button" class = "btn btn-default desplegable -toggle" datos de palanca = "desplegable"> estas <span class = "cursor"> </ span>
</ Button>
<ul class = "menú desplegable">
<Li> <a href = "#"> Enlace desplegable 1 </ a> </ li >
<Li> <a href = "#"> Enlace desplegable 2 </ a> </ li >
</ Ul>
</ Div>
</ Div>
Los resultados son los siguientes:
grupo de botones vertical
El siguiente ejemplo demuestra la anterior discusión de mesa declase de uso de grupos vertical .btn:
Ejemplos
<Div class = "btn-grupo vertical ">
<Botón type = "button" class = "btn btn-default" > Botón 1 </ botón>
<Botón type = "button" class = "btn btn-default" > botón 2 </ botón>
<Div class = "btn-grupo vertical ">
<Botón type = "button" class = "btn btn-default desplegable -toggle" datos de palanca = "desplegable"> desplegable <span class = "cursor"> </ span>
</ Button>
<ul class = "menú desplegable">
<Li> <a href = "#"> Enlace desplegable 1 </ a> </ li >
<Li> <a href = "#"> Enlace desplegable 2 </ a> </ li >
</ Ul>
</ Div>
</ Div>
Los resultados son los siguientes:
