Forma
Forma básica
Para la entrada, TextARea y Seleccione en el formulario, generalmente agrego la clase "Control de la forma", que establece el ancho predeterminado del elemento al 100% (no absoluto, como el formulario en línea mencionado a continuación). Y cada elemento (incluida la etiqueta y el elemento a ingresar) se agregará con un "grupo de formulario". Tiene solo un estilo. Botón de margen: 15px.
<Form Action = ""> <div> <etiqueta for = ""> nombre de usuario: </selebel> <input type = "text"/> </div> <div> <label for = ""> contraseña: </etiqueta> <input type = "contraseña"/> </div> </form>
Forma en línea
Agregando "formulario en línea" al elemento más externo (el elemento principal del grupo de formulario). Indica que todos los elementos de formulario se muestran en una línea (con un ancho suficiente). Y ".Form-Inline .Form-Group" se muestra como un bloque en línea. Y el ancho de ".Form-Inline .Form-Control" es automático. Esto asegura que se muestre en una línea.
<Form Action = ""> <div> <etiqueta for = ""> nombre de usuario: </selebel> <input type = "text"/> </div> <div> <label for = ""> contraseña: </etiqueta> <input type = "contraseña"/> </div> </form>
Forma horizontal
A diferencia de las formas normales y en línea. Si desea mostrar elementos de etiqueta y formulario de entrada en una línea, debe usar "formulario-horizontal". Este tipo de "grupo de forma" articular es equivalente a la "fila" en el sistema de cuadrícula. Entonces, sus subclases tienen "col-md-*", y la etiqueta "control de control"-". Si no agrega esto, la etiqueta y la entrada parecerán incompatibles.
<Form Action = ""> <Div> <Label for = ""> UserName: </label> <div> <input type = "text"/> </div> </div> <div> <label for = ""> contraseña: </label> <div> <input type = "contraseña"/> </div> </form> </form>
Tamaño de formulario
Los que controlan el tamaño de entrada son "Entrada-SM" y "Entrada-LG", que hacen que el cuadro de entrada de entrada se vea más pequeño o más grande de lo normal. Correspondiente a esto es el tamaño del texto en la etiqueta. Debe agregar "formulario-grupo-SM" y "Form-Group-LG" al "grupo de formulario" Parent en el mismo tiempo. Como en el cuadro de entrada de contraseña de una demostración anterior.
Caja de entrada
En HTML5, el tipo en la etiqueta de cuadro de entrada es compatible con más tipos. Hay texto, contraseña, DatateMe, DatateMe-Local, fecha, mes, hora, semana, número, correo electrónico, URL, búsqueda, tel y color. El estilo correcto solo se puede mostrar en la etiqueta <put> si se asigna un tipo específico. Algunos elementos solo pueden mostrar sus efectos en su teléfono.
cuadro desplegable Seleccionar
Similar al cuadro de entrada. Simplemente cambió la entrada para seleccionar y agregó la clase "Control de formulario".
<form de acción = ""> <div> <etiqueta for = ""> Seleccione: </etlabe> <div> <select name = "" id = ""> <opción valor = "" html </opción> <opción valor = ""> css </opción> <opción valor = ""> javascript </opción> <opción valor = "> java </ppection> <opción Valor ="> "/" Php </option value = ""> NodeJS </option> </select> </div> </orm>
Col-MD-Pull-* es el desplazamiento izquierdo.
Campo de texto
Similar a lo anterior.
<form de acción = ""> <div> <etiqueta for = ""> textarea: </label> <div> <textarea name = "" id = "" Rows = "3"> Hello </Textarea> </div> </div> </form>
Múltiples y cajas de radio
Para que la radio y los elementos de casilla de verificación aparezcan en una fila y se alineen con la etiqueta. Bootstrap ofrece dos opciones. Uno:
<div> <etiqueta for = ""> <input type = "radio" name = "sex"/> macho <input type = "radio" name = "sex"/> femenino <input type = "radio" name = "sex"/> confidencial </selabel> <etiqueta for = ""> <input type = "checkbox"/> html <input type = "checkbox"/> css <input type = "checkbox"/jaVInscript <JAVISTRIT
La etiqueta en sí es bloque en línea. Pero .radio, .Checkbox en sí está bloqueado.
Por lo tanto, envuelva múltiples casillas de radio o verificación con una etiqueta, que parecerá poco profesional (jaja). Además, muchos también son muy antiestéticos. Entonces, la segunda forma de escribir está aquí.
<div> <etiqueta for = ""> <input type = "Radio" name = "Sex"/> macho </label> <etiqueta for = ""> <input type = "radio" name = "sex"/> femenino </label> <etiqueta for = ""> <input type = "radio" name = "sex"/> confidencial </label> <br/> <lelebelebelebel para = "> <input type =" checkbox "/> html for = ""> <input type = "CheckBox"/> CSS </etiqueta> <etiqueta for = ""> <input type = "checkBox"/> javaScript </label> </div>
Verificación de forma
HA-TUCES: éxito, verde.
tiene advertencia: advertencia, amarillo.
HAS-Error: Error, rojo.
Simplemente agregue el estilo correspondiente al "grupo de formulario". Para una mejor verificación, podemos continuar agregando "HA-Feedback". Luego agregue "Formulario-Control-Feedback" al nivel del elemento después de la entrada ("formulario-control"). La semántica es clara y clara. El código es el siguiente:
<form de acción = ""> <div> <etiqueta for = ""> nombre de usuario: </label> <div> <input type = "text"/> <span> </span> </div> </div> <div> <label for = ""> contraseña: </selete> <div> <put type = "text"/> <span> </div> </iv> <iv> <belebel: <1/nabo: </tope <pan> <pan> <pan> <pan> type = "text"/> <span> </span> </span> </form>
Botón
Estilo multibutón y botón
Hay varios estilos de botones en Bootstrap. Botón, A, Ingrese, Span, Div, etc. puede convertirse en botones siempre que tenga "estilo BTN BTN". Sin embargo, para una mejor compatibilidad y legibilidad, es mejor no usar de esta manera, intente usar etiquetas de botones.
<botón> botón </boton> <botón> botón </boton> <botón> botón </botón> <botón> botón </boton> <botón> botón </boton> <botón> botón </botón> <!-Btn-Block hace que el botón sea exclusivo de uno a uno fila-> <botón> botón </botón> <botón> botón </boton> <botón> botón </boton> <botón> botón </botón> <botón> botón </botón> <botón> botón </botón> <botón> botón </botón> <botón> botón </botón> <botón> botón> botón> <botón> botón </botón>>
Tamaño del botón
Como se mencionó anteriormente, use "BTN-XS", "BTN-SM", "BTN-LG" para establecer el tamaño del botón.
Estado del botón
Como se mencionó anteriormente, los efectivos son "activos" y "enfoque".
imagen
Responsiva de IMG: imágenes receptivas, principalmente dirigidas al diseño receptivo.
IMG Rounded: esquinas redondeadas.
IMG-Circle: redondo.
IMG-THUGHINAIL: Miniatura, representada por un borde agregado a la capa externa.
icono
BootStart tiene muchos pequeños iconos incorporados. El método de uso es el siguiente. De hecho, se ha utilizado en el "formulario de formulario de forma" anterior. Entre ellos, "Glyphicon" es imprescindible.
<span> </span>
Grupo de cuadro de entrada
El grupo de cuadro de entrada es un "grupo de entrada". Necesitamos agregar algunos sufijos (como sufijos de correo electrónico) y prefijos (símbolos de dinero ￥, $, etc.) para usar "Input-Group-Addon" o "Input-Group-BTN". Semántica simple y clara. como sigue:
< type = "text"/> </div> <!-Opción múltiple-> <viv> <span> <input type = "checkbox"/> </span> <input type = "text"/> </div> <!-Taobao Group de casilla de entrada-> <Div> <Div> <Botton Data-Toggle = "Discutivo"> Seleccione <Apan> </span> </botin> <li> <li> <a aza href = "javascript: void (0)"> bebé </a> </li> <li> <a href = "javascript: void (0)"> taller </a> </li> </ul> </div> <input type = "text"/> <span> <botte> Search </boton> </span> </iv>
resumen
"Forma-horizontal" y "en línea de forma" son las etiquetas más exteriores del grupo de formulario.
Un grupo de formulario toma "grupo de formulario" como elemento principal. Los similares son el "grupo de entrada" y el "grupo de botones" que se pueden usar en el futuro. Todos pueden ser dimensionados.
"Form-Group-Lg", "Input-Lg", "Input-Group-Lg", "Btn-Lg", etc.
El estilo de verificación tiene "er-error", "ha éxito", "tiene advertencia". "HA-FEEDBACK" se puede agregar al mismo elemento. Para hacer que la verificación sea más completa.
Se pueden establecer muchos estilos para botones y tamaños.
Cuatro estilos comunes para fotos.
Bootstarp tiene muchos íconos incorporados.
El grupo de cuadro de entrada comienza con "grupo de entrada", y los elementos infantiles incluyen "Input-Group-Addon", "Input-Group-BTN", etc.
Lo anterior es una colección completa de formularios en Bootstrap 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!