Bootstrap proporciona tres diseños de forma: forma vertical, forma en línea y forma horizontal
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 class.form-Inline a la etiqueta de formulario
<form de rol = "form"> <div> <etiqueta for = "name"> name </selet> <input type = "text" id = "name" placeholder = "por favor ingrese un nombre"> </div> <div> <belebele- <label for = "archivo de entrada"> file input </etiqueta> <input type = "file" id = "inputfile"> </viv> <iv> <belebel> <label> <put type = "checkbox"> por favor </etiqueta </etiquetado </botón </boube </boube </boube </boube </boube </boube </boube </boube </boube </boube </boube </botin </boube </botin </bubador 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 Role = "Form"> <div> <etiqueta for = "FirstName"> Name </label> <div> <input type = "text" id = "firstName" PlaceHolder = "Ingrese un nombre de primer nombre"> </div> </div> <div> <label de la etiqueta de = "LastName"> LATOT> <Div> <input type = "Text" Id = "LastName" Place HOLDER = "POR FAVOR A LING NAME" ENTRE A FINT Nombre ". <Div> <Viv> <label> <input type = "checkbox"> Recuérdame </label> </div> </div> </div> <div> <div> <button type = "enviar"> login </boton> </div> </div> </form>
El efecto de visualización es el siguiente:
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.