Bootstrap proporciona los siguientes tipos de diseños de formularios:
• Forma vertical (predeterminada)-> Este no es guapo, todas son versiones móviles y la versión para PC ocupa una fila y no es guapo;
• Forma en línea-> Creo que esto es lo que desea, la versión para PC responde a filas horizontales, y la versión móvil responde a las filas verticales.
• Formulario horizontal-> Pantalla de control con sistema de cuadrícula
1. Forma vertical
Pasos estándar para el uso de la forma vertical
1. Agregar rol = "formulario" al elemento <Form>.
2. Coloque las etiquetas y controles en un <div> con "grupo de formulario" para obtener el mejor espacio.
3. Agregue los estilos de "control de formulario" a todos los elementos de texto <Poning>, <ExteArea> y <Select>.
<Form Role = "Form"> <div> <etiqueta for = "name"> name </label> <input type = "text" id = "name" placeHolder = "Por favor ingrese un nombre"> </div> <div> <etiqueta for = "name"> edad </label> <input type = "text" id = "name" placeholder = "por favor ingrese una edad"> </piv> </form>
2. Diseño en línea
El diseño en línea es exactamente el mismo que el diseño vertical, pero debe agregar class = form-inline a <form role = "form">.
<form de rol = "form">
Después de usar un diseño en línea de este tipo, la pantalla grande se muestra horizontalmente y la pantalla pequeña se muestra verticalmente.
Pantalla pequeña:
Pantalla grande:
3. Forma horizontal
Una forma horizontal se refiere al nivel entre una etiqueta de etiqueta y un control (entrada, botón).
Los pasos para usarlo son los siguientes:
• Agregar clase .Form-Horizontal al elemento Parent <Form>.
• Ponga las etiquetas y controles en un <div> con clase .Form-Group.
• Agregar clase .Control-Label a la etiqueta.
<form de rol = "form"> <div> <etiqueta for = "name"> name </label> <div> <input type = "text" id = "name" placeholder = "por favor ingrese un nombre"> </div> </div> <div> <belebelebele
Solo después de usar formulario-horizontal se puede establecer el control de entrada en DIV, y el DIV también puede usar el sistema de cuadrícula. El estilo de forma-corizontal cambia el comportamiento del grupo .Form, que actúa como filas en un ráster.
4. Casilla de verificación y radio
Estos dos controles son especiales en Bootstrap. A veces necesitan ser dispuestos horizontalmente, y a veces necesitan ser dispuestos verticalmente.
También es como la forma, y también se incluye.
• Si se requiere una pantalla en línea, establezca la clase de la etiqueta rodeada por su capa externa en la casilla de verificación.
• Si se requiere la pantalla vertical predeterminada, establezca la clase de la etiqueta rodeada por la capa externa en Heckbox.
<Form Role = "Form"> <!-CHECK-> <VIV> <Lelbel> <input type = "CheckBox" Value = ""> Banana </selebel> </div> <VIn value = ""> Banana </elabel> </div> <viv> <label> <input type = "checkBox" value = ""> Apple </label> </div> <div> <label> <input type = "checkbox" value = ""> watermelon </selet> </div> <!-Opción única-> <div> <lelebel> <input type = "name de radio =" optionsradios "Value" Value = "" Value = " Male</label></div><div><label><input type="radio" name="optionsRadios" value="option2" checked> Female</label></div><div><label><input type="radio" name="optionsRadios" value="option1" checked> Male</label></div><div><label><input type="radio" name="optionsRadios" value="option2" checked> Femenina </etiqueta> </div> </orm>
El efecto de visualización es el siguiente:
5. Controles estáticos
Los controles estáticos se refieren a aquellos que no pueden cambiar el valor. En Bootstrap, cuando necesite colocar el texto plano detrás de las etiquetas de formulario dentro de una forma horizontal, use class = "form-control-static" en <p>.
<form de rol = "form"> <div> <label> name </label> <div> <p> liu xuande </p> </div> </div> </orm>
El efecto de visualización es el siguiente:
6. TEXTO DE AYUDA DE FORMA
El texto de ayuda de la forma de arranque generalmente se refiere al indicador de entrada, generalmente seguido de un elemento HTML del bloque .help.
<form de rol = "form"> <div> <input type = "text"> <span> recordatorio especial, si no tiene nada, no lo escriba. </span> </div> </orm>
El efecto de visualización es el siguiente:
Además de estos, Bootstrap también tiene muchas columnas de estilos utilizados para controlar la altura de la entrada, si la entrada es exitosa, etc. Simplemente verifiquelas y busque las palabras clave correspondientes y registrarlas más tarde.
Lo anterior es el diseño de formulario de arranque introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!