Bootstrap - Grupos de entrada
Este capítulo explica una característica más que admite Bootstrap, los grupos de entrada. Los grupos de entrada son controles de formulario ampliados . Con los grupos de entrada, puede anteponer y agregar fácilmente texto o botones a las entradas basadas en texto.
Al agregar contenido antepuesto y adjunto a un campo de entrada, puede agregar elementos comunes a la entrada del usuario. Por ejemplo, puede agregar el símbolo del dólar, la @ para un nombre de usuario de Twitter o cualquier otra cosa que pueda ser común para la interfaz de su aplicación.
Para anteponer o agregar elementos a un .form-control-
Envuélvalo en un <div> con clase .input-group
Como siguiente paso, dentro de ese mismo <div>, coloque su contenido adicional dentro de un <span> con clase .input-group-addon.
Ahora coloque este <span> antes o después del elemento <input>.
Para la compatibilidad entre navegadores, evite usar elementos <select> aquí, ya que no se pueden diseñar completamente en los navegadores WebKit. Tampoco aplique clases de grupo de entrada directamente para formar grupos. Un grupo de entrada es un componente aislado.
Grupo de entrada básico
El siguiente ejemplo demuestra el grupo de entrada básico:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>Tamaño del grupo de entrada
Puede cambiar el tamaño de los grupos de entrada, agregando las clases de tamaño de formulario relativo como .input-group-lg, input-group-sm, input-group-xs al .input-groupsí mismo. El contenido dentro cambiará de tamaño automáticamente.
Los siguientes ejemplos demuestran esto:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>Casillas de verificación y complementos de radio
Puede anteponer o agregar botones de opción y casillas de verificación en lugar de texto como se muestra en el siguiente ejemplo:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Complementos de botón
Incluso puede agregar o agregar botones en grupos de entrada. En lugar de.input-group-addon class, necesitarás usar class .input-group-btnpara envolver los botones. Esto es necesario debido a que los estilos de navegador predeterminados no se pueden anular. Los siguientes ejemplos demuestran esto:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Botones con desplegables
Se pueden agregar botones con menús desplegables en grupos de entrada simplemente envolviendo el botón y el menú desplegable en un .input-group-btn class como se demuestra en el siguiente ejemplo:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Botones segmentados
Para segmentar los menús desplegables de botones en grupos de entrada, use el mismo estilo general que el botón desplegable, pero agregue una acción principal junto con el menú desplegable como se puede ver en el siguiente ejemplo:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>