Los controles de formulario compatibles con Bootstrap son los siguientes:
Bootstrap admite los controles de formulario más comunes, principalmente entrada, TextARea, casilla de verificación, radio y selección.
Caja de entrada
El campo de texto de forma más común es la entrada del cuadro de entrada. El usuario puede ingresar la mayoría de los datos de formulario necesarios en él. Bootstrap proporciona soporte para todos los tipos de entrada HTML5 nativos, que incluyen: texto, contraseña, fecha y hora de fecha y hora, fecha, mes, mes, hora, semana, número, correo electrónico, url, búsqueda, teles y color. Se requieren declaraciones de tipo apropiadas para que la entrada pueda tener un estilo completamente.
<! Doctype html> <html> <fead> <title> Bootstrap Instance - Box de entrada </title> <Link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <Scrito src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </secret src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </thead> <body> <formule rol = "form"> <div> <label for = "nombre"> etiqueta </etiqueta> <input type = "text" de posición = "Entrada de texto"> </div> </form de formular
Los resultados son los siguientes:
Textea
Cuando necesite hacer varias líneas de entrada, puede usar el cuadro de texto TextAREA. La propiedad de las filas se puede cambiar si es necesario.
<! Doctype html> <html> <fead> <title> Bootstrap Instance - Text Box </title> <link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </secret src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "form"> <div> <label for = "name"> box de texto </etlabea <xteatea ROWS = "3"> </textarea> </div> </form> </body> </html>
Los resultados son los siguientes:
Casilla de verificación ((casilla de verificación) y cuadro de radio (radio)
Las casillas de verificación y los botones de radio se utilizan para permitir a los usuarios seleccionar de una serie de opciones preestablecidas.
Al crear un formulario, use la casilla de verificación si desea que el usuario seleccione varias opciones de la lista. Si restringe a los usuarios seleccionar solo una opción, use la radio.
Use la clase .checkbox-in o .radio-enline para una serie de casillas de verificación y casillas de radio para controlarlos para que aparezcan en la misma línea.
El siguiente ejemplo demuestra estos dos tipos (predeterminados y en línea):
<! Doctype html> <html> <ade> <title> instancia de bootstrap - casillas de verificación y botones de radio </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <<> <> <<> <<ringsss " src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </secret src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <label for = "nombre"> Instancias de casillas de verificación predeterminadas y botones de radio </label> <div> <lelebel> <input type = "Value =" 1 </etiqueta> </div> <div> <label> <input type = "checkbox" value = ""> opción 2 </selabel> </div> <div> <label> <input type = "radio" name = "optionradios" id = "optionradios1" valor = "opción1" comprobado> opción 1 </etiqueta> <div> <div> <label <label> <put type = "name =" name = "options" Ids "Id =" Idi. value="option2">Option 2 - Selecting it will deselect option 1</label></div><label for="name">Inlined checkbox and radio button instance</label><div><label><input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1</label><label><input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2 </etiqueta> <label> <input type = "checkbox" id = "inlinecheckbox3" valor = "opción3"> opción 3 </label> <label> <input type = "radio" name = "optionradiosinline" id = "optionSradiosinLine" id = "optionRaRadiosinline" id = "optionRadios4" value = "option2"> opción 2 </label> </divivil <div)
Los resultados son los siguientes:
Casillas de verificación y botones de radio
Use el cuadro de selección cuando desea que el usuario seleccione de varias opciones, pero solo se puede seleccionar una opción de forma predeterminada.
Use la opción de lista de visualización <Select>, que generalmente es una lista de selección que es familiar para los usuarios, como el estado o el número.
Use múltiples = "múltiples" para permitir a los usuarios seleccionar múltiples opciones.
El siguiente ejemplo demuestra estos dos tipos (seleccione y múltiples):
<! Doctype html> <html> <fead> <title> Bootstrap Instance - Seleccione Box </title> <Link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootstrap.min.js"> </script> </script> <boder> <form role = "form"> <div> <etiqueta for = "name"> seleccione Lista </selabel> <ecteleñe> <opción> 1 </p los opción> <opción> 2 </opción> <pection> 3 </ppection> <pection> 4 </ppection> <pection> 5 </opción> </select> <etiqueta for = "name"> Lista de selección de múltiples selecciones </etiqueta> <select <etect select <ect select múltiples> <opción> 1 </opción> <pection> 2 </opción> <opción> 3 </ppection> <pection> 4 </opción> <opción> 5 </opción> </select> </div> </form> </body> </html>
Los resultados son los siguientes:
Controles estáticos
Cuando necesite colocar el texto plano detrás de una etiqueta de formulario dentro de una forma horizontal, use la clase .Form-Control-static en <P>.
<! Doctype html> <html> <fead> <title> Bootstrap Instance - Control estático </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <crito src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootstrap.min.js"> </script> </script> <boder> <form role = "form"> <iv> <label> correo electrónico </elabel> <div> <p> [email protected] </p> </div> </div> <div> <label for = "inputpassword"> contraseña </label> <div> <put type = "contraseña" id = "inputPassword" PlaceHolder = "Por favor, ingrese contraseña"> </div> </div> </form> </body> </html>
Los resultados son los siguientes:
Estado de control de formulario
Además del estado: Focus (es decir, el usuario hace clic en entrada o usa la tecla de tabulación para enfocarse en la entrada), Bootstrap define estilos para cuadros de entrada deshabilitados y proporciona una clase para la validación de formulario.
Enfoque del marco de entrada
Cuando la entrada de entrada recibe: Focus, se elimina el esquema del cuadro de entrada y se aplica Shadow de caja.
Entrada de cuadro de entrada desactivado
Si desea deshabilitar una entrada de cuadro de entrada, simplemente agregue el atributo deshabilitado, que no solo deshabilita el cuadro de entrada, sino que también cambia el estilo del cuadro de entrada y el estilo del puntero del mouse cuando el puntero del mouse se cierne sobre el elemento.
Fieldset discapacitado Fieldset
Agregue el atributo discapacitado a <ScieldSet> para deshabilitar todos los controles dentro de <ScieldSet>.
Estado de verificación
Bootstrap contiene estilos de verificación para errores, advertencias y mensajes de éxito. Simplemente agregue la clase apropiada (.Has-Warning, .Hass-error o .has-success) al elemento principal para usar el estado de verificación.
<! DocType html> <html> <fead> <title> Bootstrap Instance - Estado de control de formulario </title> <link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <cript src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </secret src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "form"> <div> <label> foco </etiqueta> <div> <input id = "focusedinput" type = "value =" este box de entrada tiene Enfoque ... "> </div> </div> <div> <etiqueta for =" inputPassword "> Disable </label> <div> <input ID =" DisabledInput "type =" Text "PlaceHolder =" Este cuadro de entrada prohíbe la entrada ... "deshabilitado> </div> </div> <scieldset discapacitado> <diV> <lelebel para =" desactivado en la entrada "> Input (FieldSet de FieldSet> <BInr> <lelebel para =" DISCABILIDAD desactivado) </selabel> <viv> <input type = "text" id = "DisabledTextInput" PlaceHolder = "Disabled"> </div> <viv> <lelse etiqueta for = "DisabledSelect"> Menú de selección de selección (FieldSet) </labor> <div> <Select Id = "DisabilitySelectEndelect"> <pection> Disable Selección </section> for = "inputSuccess"> Ingrese exitoso </label> <div> <input type = "text" id = "inputSuccess"> </div> </div> <div> <label for = "inputwarning"> Interview Warning </label> <viv> <input type = "text" id = "inputwarning"> </div> </div> <iv> <label para = "inputorRor"> Errete </Eteleting <1 input> Etiqueta de inputing " type = "text" id = "inputError"> </div> </form> </body> </html>
Los resultados son los siguientes:
Tamaño de control de forma
Puede usar clase .input-lg y .col-lg-* para establecer la altura y el ancho del formulario, respectivamente. El siguiente ejemplo demuestra esto:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Forma de control Size </title> <link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <cript src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </secret src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <formy rol = "form"> <div> <put type = "text" de text " Entrada "> </div> <viv> <input type =" Text "PlaceHolder =". Input-Sm "> </div> <viM> valor = "">. Entrada-SM </opción> </select> </div> <div> <div> <input type = "text" placeHolder = ". col-lg-2"> </div> <div> <input type = "text" placeHolder = ". col-lg-3"> </div> <div> <input type = "text" PlaceHolder = ". Col-LG-4"> </div> </div> </form> </body> </html>
Los resultados son los siguientes:
El editor de Wulin.com le recomienda temas relacionados:
Habilidades de operación de componentes de arranque
Resumen de conocimiento relacionado con bootstrap
Los anteriores son los controles de formulario compatibles con Bootstrap. Todos lo entienden. Si tiene alguna pregunta, déjame un mensaje. El editor responderá a todos a tiempo. Al mismo tiempo, me gustaría agradecer a todos por su apoyo al sitio web de Wulin.com.