Los elementos comunes de los formularios incluyen principalmente: cuadros de entrada de texto, cuadros de selección desplegable, cuadros de radio, casillas de verificación, campos de texto, botones, etc. Aquí están las diferentes versiones de arranque:
Menos: Forms.less
Sass: _forms.scss
Bootstrap solo personaliza las etiquetas de FieldSet, Legend y Label en el formulario
Fieldset {min-width: 0; relleno: 0; margen: 0; borde: 0;} leyenda {display: block; ancho: 100%; relleno: 0; margen-bottom: 20px; font-size: 21px; line-height: herhherit; color: #333; borde: 0; border-bottom: 1px sólido #E5E5E5;} bloque en línea; margen-bottom: 5px; font-weight: bold;}Además de estos elementos, también hay entrada, selección, TextARea y otros elementos. En el marco Bootstrap, el efecto se logra personalizando un nombre de clase.
1. El ancho se convierte en 100%;
2. Establezca un borde gris claro (#CCC)
3. Esquinas redondas con 4px
4. Establezca el efecto de sombra y el elemento se enfoca, los efectos de la sombra y el borde cambiarán.
5. Establezca el color de Palceholder en #999
Forma en línea
Si desea agregar una etiqueta de etiqueta antes de la entrada, hará que se muestre la ruptura de la línea de entrada; Si tiene que agregar una etiqueta de etiqueta y no desea que la línea de entrada se rompa, debe colocar la etiqueta de la etiqueta en el contenedor.form-group, por ejemplo:
<div> <label> Dirección de correo electrónico </label> </div> <div> <input type = "correo electrónico" placeHolder = "Por favor ingrese su número de correo electrónico"> </div>
Los efectos son los siguientes:
Para lograr el efecto de unir formularios, simplemente agregue el nombre de clase. Forma-Inline al elemento de formulario. El principio de implementación es:
Establezca el control de formulario en un elemento de bloque en línea (pantalla: bloqueo en línea) para mostrar el control de formulario en una línea.
ejemplo:
<Form> <VIV> <LATABA> Correo electrónico </etiqueta> <input type = "email" placeholder = "por favor ingrese el número de correo electrónico"> </div> <div> <label> contraseña </selete> <input type = "contraseña" de poseping = "por favor ingrese la contraseña"> </div> <label> <labin type = "checkbox"> Recuerde la contraseña </etiqueta> </div> <div> <botón> Ingrese el correo electrónico </botón </button> </diviv
Los efectos son los siguientes:
¿Encontró que el código claramente tiene una etiqueta de etiqueta y no se coloca en el contenedor.form-group, y la entrada no se envolverá? ¡Lo que es aún más extraño es que el contenido de la etiqueta de la etiqueta no se muestra! De hecho, si mira con cuidado, la etiqueta de la etiqueta ha agregado el nombre de clase.sr-solo, lo que significa que oculta la etiqueta. Echemos un vistazo a su código fuente:
.sr -solo {posición: absoluto; ancho: 1px; altura: 1px; relleno: 0; margen: -1px; desbordamiento: oculto; clip: rect (0, 0, 0); borde: 0;}Dado que se ha agregado la etiqueta de la etiqueta y se ha agregado el nombre de la clase. SSR para ocultar la etiqueta, ¿no es innecesario? ? ? Pero esta es exactamente una de las ventajas del marco Bootstrap. Si la etiqueta no está configurada para el control de entrada, el lector de pantalla no será reconocido correctamente, y también tiene ciertas consideraciones para las personas con discapacidad.
Forma horizontal
La implementación de efectos de forma horizontal en Bootstrap requiere las siguientes dos condiciones:
1. Use el nombre de clase. Forma-horizontal en el elemento de formulario
2. Sistema de cuadrícula con marco de arranque (detalles: explicación detallada del sistema de cuadrícula de arranque)
Use el nombre de la clase. Forma-horizontal en el elemento de formulario principalmente tiene las siguientes funciones:
1. Establezca los valores de acolchado y margen de los controles de formulario
2. Cambie la forma de expresión de .From-Group, similar a la fila del sistema de cuadrícula
Código fuente de CSS:
.Form-Horizontal .Control-Label, .Form-Horizontal .Radio, .Form-Horizontal .CheckBox, .Form-Horizontal .Radio-Inline, .Form-Horizontal .Checkbox-Inline {Padding-top: 7px; Margin-top: 0; Margen-Bottom: 0;}. {min-hight: 27px;}. Form-Horizontal .Form-Group {margin-right: -15px; margin-left: -15px;}. Form-Horizontal .Form-Control-Static {padding-top: 7px;}@media-width: 768px) {.Form-horizontal. Derecho;}}. Forma-Horizontal .Has-Feedback .Form-Control-Feedback {Top: 0; Right: 15px;}ejemplo:
<Form> <div> <label> correo electrónico </selabel> <div> <input type = "correo electrónico" placeholder = "por favor ingrese su correo electrónico"> </div> </div> <div> <label> contraseña </label> <div> <input type = "contraseña" placeholder = "Por favor, ingrese su contraseña"> </div> </div> <div> <lelebel> <input type = "Checkbox"> Recuerde su contraseña </etiqueta> </div> </div> <div> <div> <botón> Ingrese su correo electrónico </botón> </div> </form>
Los efectos son los siguientes:
Cuadro de entrada de una sola línea
Al usar la entrada en Bootstrap, también debe agregar Tipo de tipo. Si no especifica el tipo de tipo, no obtendrá el estilo correcto, porque el marco Bootstrap define estilos a través de la forma de entrada [type = "?"], Como: Tipo de texto, que corresponde a la entrada [type = "text"]
Para que los controles se vean bien en varios estilos de forma, debe agregar el nombre de la clase.
<Form Role = "Form"> <div> <input type = "correo electrónico" placeHoldeer = "Ingrese el correo electrónico"> </div> </orm>
Seleccionar el cuadro de selección de desplazamiento
La selección de múltiples líneas establece el valor del atributo múltiple a múltiples
<form de rol = "form"> <div> <ectelew> <pection> 1 </ppection> <pection> 2 </opción> <opción> 3 </opción> <pection> 4 </opción> <opción> 5 </opción> </select> </div> <div> <select> <seleccione múltiples> <pection> 1 </opción> <pection> 2 </opción> <pection> 3 </opción> <pection> 4 </opción> <pection> 5 </opción> </select> </div> </form>
TextARea de campo de texto
El campo de texto es el mismo que el método de uso original. Configurar filas puede definir su altura, configurar el cols puede definir su ancho. Si el nombre de clase .Form-Control se agrega al elemento TextAREA, no es necesario establecer el atributo COLS, porque el ancho de espacio del objetivo de estilo .Form-Control en el marco Bootstrap es 100% o automático.
<Form Role = "Form"> <div> <textarea sows = "3"> </extarea> </div> </form>
Casilla de verificación y caja de radio radio
Habrá algunos problemas menores con la casilla de verificación y la radio junto con las etiquetas de etiquetas (como problemas de alineación)
<form><div><label><input type="checkbox"> Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" checked> Like</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2">Don't like</label></div></form>
1. Ya sea casilla de verificación o radio, están envueltos en etiquetas.
2. Casilla de verificación y etiqueta de etiqueta se colocan en un contenedor llamado .checkbox
3. La radio y la etiqueta se colocan en un contenedor llamado .radio. Bootstrap utiliza principalmente los estilos .Checkbox y .radio para manejar la alineación de las casillas de verificación, los botones de radio y las etiquetas.
.radio, .Checkbox {display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px;}. Label de radio .Checkbox etiqueta {display: inline; font-weight: normal; cursor: pointer;}. Entrada [type = "CheckBox"] ,. CheckBox-Inline Enume [type = "SabaraVerificar casillas y botones de radio horizontalmente
1. Si la casilla de verificación debe organizarse horizontalmente, solo necesita agregar el nombre de clase en la etiqueta de la etiqueta.
2. Si la radio necesita disposición horizontal, simplemente agregue el nombre de clase.
Aquí está el código fuente de CSS:
.radio-inline, .checkbox-inline {display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer;}. Radio-Inline + .Radio-Inline, .Checkbox-inline + .check-enline {margin-top: 0; Margin-left-left;};} type = "Radio" name = "Sex" Value = "Option1"> Male </label> <label> <input type = "radio" name = "sex" value = "option2"> femenino </label> <label> <input type = "radio" name = "sex" value = "option3"> neutral </sel> </div>Estado de control de formulario
1. Estado de enfoque:
El estado de enfoque se implementa a través de pseudo-clase: Focus. El estado de enfoque en el control de formulario Bootstrap elimina el estilo predeterminado de esquema y agrega el efecto de sombra nuevamente. Lo siguiente es
Código fuente de CSS:
.Form-Control: Focus {Border-Color: #66Afe9; Outline: 0; -webkit-box-shadow: INSET 0 1PX 1PXRGBA (0,0,0, .075), 0 0 8PX RGBA (102, 175, 233, .6); Box-Shadow: InsuT 0 1PX 1PXRGBA (0,0,0,0, RGBA (102, 175, 233, .6);}Como se puede ver en el código fuente, para que el control tenga el efecto de estilo anterior en el estado de enfoque, debe agregar el nombre de clase al control.
<form> <div> <div> <input type = "text" placeHolder = "no es un efecto en el enfoque"> </div> <div> <input type = "text" placeHolder = "Effect in Focus"> </div> </div> </form>
El efecto de los controles de archivos, radio y casilla de verificación en enfoque también es diferente del de los controles de entrada ordinarios. El siguiente es el código fuente
Entrada [type = "file"]: focus, input [type = "radio"]: focus, input [type = "CheckBox"]: Focus {Outline: delgada Dotted; Outline: 5px Auto -Webkit-Focus-Ring-Color; Outline-Offset: -2px;}2. Desactivar el estado:
Simplemente agregue la propiedad deshabilitada en el control de formulario correspondiente, y el siguiente es el código fuente CSS:
.Form-Control [discapacitado], input [type = "Radio"] [discapacitado], input [type = "CheckBox"] [discapacitado],. Radio [discapacitado], .Radio-Inline, FieldSet [discapacitado] .Checkbox, FieldSet [DISCABILIZACIÓN] .CHECKBOX-Inline {cursor: no-eStowned;}ejemplo:
<input type = "text" placeHolder = "Form Discapedling" Desactivado>
Si FieldSet establece la propiedad deshabilitada, todo el dominio se deshabilitará
ejemplo:
<Form Role = "Form"> <FieldSet DISPABILIDAD> <VIV> <LATABLE> El cuadro de entrada está deshabilitado </etiqueta> <input type = "text" placeholder = "disable input"> </div> <div> <label> El cuadro desplegable está deshabilitado </etiqueta> <ectelew> <pection> 1 </opción> <opción> > <input type = "CheckBox"> El cuadro de opción está deshabilitado </etiqueta> </div> <botón type = "enviar"> enviar </botón> </fieldset> </form>
El efecto es el siguiente: (aparece un icono deshabilitado cuando el mouse se mueve. Aquí hay una captura de pantalla directa que no se puede ver)
3. Estado de verificación
Bootstrap proporciona los siguientes efectos:
1.HA HAGA ANTERIOR: Estado de advertencia amarillo
2. .Has-Error: estado de error rojo
3..
Cuando lo use, simplemente agregue el nombre de la clase de estado al contenedor del grupo de formulario. Los efectos son los mismos en los tres estados, pero los colores son diferentes.
ejemplo:
<Form> <Viv> <label> Estado de éxito </etiqueta> <input type = "text" placeholder = "status status"> </div> <div> <belebel> estado de error </selebel> <input type = "text" placeholder = "status de error"> </div> <div> <label> estado de advertencia </selebel> <input type = "text" status de advertencia = "estado de advertencia" </div> </div> </bor> formy>
Los efectos son los siguientes:
A veces, diferentes estados proporcionan diferentes iconos al validar el formulario. Si desea mostrar el icono en el estado correspondiente, solo necesita agregar el nombre de la clase. Tenga en cuenta que debe usarse con .has-error,.
Los pequeños iconos de Bootstrap están hechos usando @Font-Face. como:
<span class = ”Glyphicon-warning-control-confeedback”> </span>
ejemplo:
<form> <iv> <label> status de éxito </etiqueta> <input type = "text" placeholder = "stital status"> <span> </span> </div> <div> <label> estado de error </label> <input type = "text" placeholder = "status de error"> <span> </span> </div> <div> <lelebel> estado de advertencia </label> <input type = "text" holder "=" "Advertencia de advertencia de advertencia de advertencia de advertencia de advertencia Estado "> <span> </span> </div> </form>
Los efectos son los siguientes:
Formulario Información de solicitud
En general, al hacer una verificación de formulario, se requiere información rápida diferente. Use el bloque .help en el marco Bootstrap para mostrar la información de solicitud en bloques y mostrarla en la parte inferior del control.
Aquí está el código fuente de CSS:
.help-block {display: block; margen-top: 5px; margen-bottom: 10px; color: #737373;}ejemplo:
<form> <div> <label> status exitoso </label> <input type = "text" placeholder = "status exitoso"> <span> la información de entrada es correcta </span> <span> </span> </div> <div> <label> estatus de error </label> <input type = "text" stater = "estado de error"> <span> la información de entrada está incorrecta </span> <span> </sping </diviv> <shabet> warning> warning> warning> warning> <span> <span> <span> warning> warning <span> warning> warning <span> warning <span> warning <span> warning <span> warste Estado </label> <input type = "Text" PlaceHolder = "Estado de advertencia"> <span> Ingrese la información correcta </span> <span> </span> </div> </form>
Los efectos son los siguientes:
Si no desea agregar su propio código a bootstrap.css, y el diseño necesita esto, puede usar el sistema de cuadrícula de Bootstrap, por ejemplo:
<Form Role = "Form"> <div> <etiqueta for = "inputSuccess1"> Estado de éxito </label> <div> <div> <input type = "text" id = "inputSuccess1" PlaceHolder = "STACT STATO"> </div> <span> La información que ingresó es correcta </span> </div> </div> </form>
Lo anterior es el contenido relevante del componente de formulario Bootstrap introducido por el editor. ¡Espero que te sea útil!