Bootstrap ofrece tres diseños de forma: forma vertical, forma en línea y forma horizontal. Déjame presentarte uno por uno. Los amigos interesados aprenderán juntos.
Crear una forma vertical o básica:
• ・ Agregar rol = "Formulario" al elemento <form> principal.
• ・ Ponga las etiquetas y controles en un <div> con clase .Form-Group. Esto es necesario para obtener el mejor espacio.
• ・ Agregue la clase .Form-Control 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 = "inputfile"> File input </lelge> <input type = "file" id = "inputfile"> <p> Este es un ejemplo de texto de ayuda de ayuda de nivel de bloque. </p> </div> <div> <label> <input type = "checkbox"> Por favor verifique </label> </div> <button type = "enviar"> Enviar </botón> </orm>
Forma en línea:
Todos los elementos en la forma en línea están alineados a la izquierda y las etiquetas están una al lado de la otra. Para crear un formulario en línea, debe agregar clase a la etiqueta de formulario.
.Form-enline
<form de rol = "form"> <div> <etiqueta for = "name"> name </selet> <input type = "text" id = "name" placeholder = "por favor ingrese un nombre"> </div> <div> <label para = "Enumerfile"> File Input </Label> <Interput type = "File" Id = "InputFile"> </iven> <Viv> <Lelter> <Lelty <input type = "Checkbox> por favor: compé type = "enviar"> Enviar </boton> </form>
El efecto de visualización es el siguiente:
Nota: Por defecto, la entrada, la selección y la textura en Bootstrap tienen 100% de ancho. Al usar formularios en línea, debe establecer un ancho en el control del formulario.
Forma horizontal: diferente de las otras dos formas, debe seguir los siguientes pasos para crear una forma horizontal.
• 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.
Por ejemplo:
<form de rol = "form"> <div> <etiqueta for = "firstName"> name </selet> <div> <input type = "text" id = "firstName" PlaceHolder = "Ingrese un nombre de primer nombre"> </div> </div> <div> <etiqueta for = "LastName"> Last </Label> <Div> <Input type = "Text" Id = "LastName" Placeholder = "Por favor, ingrese un último lugar por favor, ingrese un último lugar por favor ingrese un último lugar por favor ingrese un último lugar por favor ingrese un último Nombre "> </div> </div> <div> <label> <input type =" CheckBox "> Recuerda ME </sely> </div> </div> <div> <div> <button type =" enviar "> Login </boton> </div> </div> </form>
Lo anterior es la descripción completa del Séptimo Bootstrap Form Form de diseño Código de ejemplo Explicación detallada (tres diseños de formularios) presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!