Este artículo introducirá principalmente las habilidades de usar formularios de arranque.
1. Forma básica de Bootstrap
Los elementos comunes en los formularios incluyen principalmente: cuadros de entrada de texto, cuadros de selección desplegable, botones de radio, botones de verificación, campos de texto y botones, etc.
Primero veamos una forma básica:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Forms básicos </title> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <forma role = "form"> <div> <lelebele- "Ejemplo de Ejemper </div> <div> <etiqueta for = "ejemploinputPassword1"> contraseña: </etiqueta> <input type = "contraseña" id = "EjemploInputPassword1" PlaceHolder = "Ingrese su contraseña"> </div> <div> <label> <put type = "checkbox"> Recuerde la contraseña de la contraseña </sel etiqueta> </div>
Las representaciones son las siguientes:
También podemos lograr diferentes efectos agregando diferentes nombres de clase a la forma. Las reglas de forma específicas se muestran en la siguiente tabla:
Por ejemplo:
<Form Role = "Form"> ... </form>
2. Control de formulario de mochila
1) Entrada de cuadro de entrada
<form de rol = "form"> <div> <!-El tipo de tipo debe agregarse. Si no se especifica el tipo de tipo, no se obtendrá el estilo correcto -> <input type = "email" placeHoldeer = "Ingrese el correo electrónico"> </div> </form>
2) Caja de selección de desplazamiento Seleccionar
<form de rol = "form"> <div> <!-Cuadro de selección desplegable de una sola línea-> <select> <pection> 1 </ppection> <pection> 2 </opción> </select> </div> <div> <!-Box de selección múltiple-> <select múltiples> <opción> 1 </opción> <opción> 2 </section> </select> </div> </form>
3) Campo de texto TextARea
El campo de texto es el mismo que el método de uso original, la configuración de filas puede definir su altura y la configuración de Cols puede establecer su ancho. Pero si el nombre de clase "formulario" se agrega al elemento TextAREA, no es necesario establecer el atributo COLS. Porque el control de formulario de estilo "Control de forma" en el marco Bootstrap es 100% o automático.
<Form Role = "Form"> <Viv> <!-Rows = "3" Establezca la altura tres líneas-> <Textarea Rows = "3"> </extarea> </div> </orm>
4) casilla de verificación
Arreglo vertical:
<form de rol = "form"> <div> <label> <input type = "checkbox" value = ""> Checkbox </label> </div> </orm>
Disposición horizontal:
<form de rol = "form"> <div> <label> <input type = "checkbox" value = "option1"> checkbox1 </label> <label> <input type = "checkbox" value = "option2"> checkbox2 </label> </div> </orm>
5) Radio de botón de selección única
Arreglo vertical:
<form de rol = "form"> <div> <label> <input type = "radio" name = "optionRadios" id = "optionRadios1" value = "love" checked> a </label> </div> <div> <!-si es checkbox o radio, están envueltos en la etiqueta-> <etiqueta type = "radio" name = "optionradios" id = "optionrradios2 value" value "valle" ohate "odate" odate "beate" bye "behil" bye "/"/"/" odate ". </div> </form>
Disposición horizontal:
<form de rol = "form"> <viv> <label> <input type = "radio" valor = "opcion1" name = "sex"> a </label> <label> <input type = "radio" valor = "opción2" name = "sex"> b </selebit> </div> </orm>
Nota: la casilla de verificación y la etiqueta se colocan en un contenedor llamado ".Checkbox"; La radio y la etiqueta se colocan en un contenedor llamado ".radio".
3. Estado de control de formulario de bootstrap
1) Estado de enfoque
El estado de enfoque se logra agregando el control de forma de nombre de clase a la entrada. El estado de enfoque del control de formulario en el marco Bootstrap elimina el estilo predeterminado del esquema y agrega el efecto de sombra nuevamente.
<!-Forma-Horizontal logra el efecto de formulario horizontal-> <form role = "form"> <div> <div> <input type = "text" PlaceHolder = "Focus Status"> </div> </div> </form>
2) Desactivar el estado
Simplemente agregue "deshabilitado" al control de formulario que debe deshabilitarse:
<Input type = "text" placeHolder = "El formulario está deshabilitado, no se puede ingresar" deshabilitado>
3) Estado de verificación
Para la verificación de formulario, también debe proporcionar un estilo de estado de verificación. Estos efectos también se proporcionan en Bootstrap:
Al usarlo, solo necesita agregar el nombre de la clase de estado correspondiente al contenedor del grupo de formulario.
<form de rol = "form"> <div> <etiqueta for = "inputwarning1"> Estado de advertencia </label> <input type = "text" id = "inputwarning1" placeHolder = "estado de advertencia"> </div> <div> <leltice for = "inputError1"> Estado de error </label> <input type = "text" id = "inputerrorror1" Place Holderer = "Error Status"> <Sciv "divir for = "inputSuccess1"> Estado de éxito </label> <input type = "text" id = "inputSuccess1" PlaceHolder = "Success"> </div> </form>
Las representaciones son las siguientes:
Si desea que el formulario muestre el icono en el estado correspondiente, solo necesita agregar el nombre de clase "HA-Feedback" en el estado correspondiente (el nombre de esta clase debe ir acompañado de "Ha-error", "Havening" y "HA-Success").
4. Bootstrap Form-Button
1) Botones de estilo personalizado
<button type = "botón"> botón básico </boton> <button type = "botón"> botón predeterminado </botón> <botón type = "botón"> botón principal </botón> <botón type = "botón"> botón de éxito </botón> <botón type = "botón"> botón de información </botón> <botón type = "botón"> Button "> ADVERTEN
Las representaciones son las siguientes:
2) El botón Bootstrap admite varias etiquetas, y los botones hechos por otras etiquetas son los siguientes:
<botón type = "botón"> botón botón botón </boton> <input type = "subt" value = "button de etiqueta de entrada"/> <pan> Botón de etiqueta de span </span> <div> Div Botón de etiqueta </div> <a href = "##"> un botón de etiqueta </a>
3) Tamaño del botón
Controle el tamaño del botón agregando el nombre de clase al botón Base ".BTN".
<botón type = "botón"> botón normal </boton> <botón type = "botón"> botón grande </botón> <botón type = "botón"> botón pequeño </botón>
4) Botón de bloque (más utilizado en terminales móviles)
Botón de bloque: el ancho del botón llena todo el contenedor principal (ancho: 100%) y no tendrá ningún valor de acolchado y margen.
Bootstrap proporciona un nombre de clase "BTN-Block". El botón puede usar este nombre de clase para implementar un botón de bloque (para más detalles, consulte el archivo bootstrap.css línea 2340 a la línea 2353)
<botón type = "botón"> botón grande </boton> <button type = "botón"> botón normal </botón> <botón type = "botón"> botón pequeño </botón>
Las representaciones son las siguientes:
5. Bootstrap Form-Button Status
En Bootstrap, los efectos de estado de los botones se dividen principalmente en dos tipos: estado activo y estado deshabilitado.
1) Estado activo: principalmente incluye varios tipos de estado de suspensión de botones (: desplazamiento), estado de clic (: activo) y estado de enfoque (: foco).
2) Desactivar el estado
Hay dos formas de deshabilitar el botón:
Método 1: Agregar atributo deshabilitado en la etiqueta
Método 2: Agregue el nombre de clase "Desactivado" a la etiqueta del elemento
Las principales diferencias entre los dos son:
El estilo ".disable" no prohíbe el comportamiento predeterminado del botón. El método de agregar el atributo "deshabilitado" a la etiqueta del elemento puede prohibir el comportamiento predeterminado del elemento.
6. Imagen de mochila
En Bootstrap, se proporcionan los siguientes estilos para el estilo de las imágenes:
Cómo usar: simplemente agregue el nombre de clase correspondiente a la etiqueta IMG, como sigue:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143225"> <img src = "http://img.blog.csdn.net/20160726151432225">
El efecto de ejecución es el siguiente o vea la ventana de resultados a la derecha:
7. icono de mochila
Bootstrap proporciona 200 iconos diferentes, como sigue:
Cómo usar: simplemente agregue el nombre de clase de icono correspondiente a la etiqueta, como sigue:
<span> </span>
<span> </span>
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Serie de artículos:
La primera vez que entré en contacto con el diseño básico mágico de Bootstrap //www.vevb.com/article/89278.htm
La primera vez que entré en contacto con el sistema mágico de cuadrícula Bootstrap //www.vevb.com/article/89333.htm
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.