Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Puntos clave para el aprendizaje:
1. Forma
2. Fotos
En esta lección, aprendemos principalmente sobre formas de arranque y funciones de imagen, y mostramos varios efectos ricos a través de la definición CSS incorporada.
uno. Forma
Bootstrap proporciona algunos estilos de formulario ricos para que los desarrolladores lo usen.
1. Formato básico
// Implementar el estilo de formulario básico <Form> <div> <label> correo electrónico </etiqueta> <input type = "correo electrónico" placeholder = "Ingrese su correo electrónico"> </div> <div> <label> contraseña </label> <input type = "contraseña" placeholder = "Ingrese su contraseña"> </div> </form>
Nota: El estilo correcto solo se puede dar si el tipo de tipo de cuadro de entrada está configurado correctamente. Los controles de cuadro de entrada compatibles incluyen: texto, contraseña, fecha y hora, fecha de fecha, fecha, mes, hora, hora, semana, número, correo electrónico, url, búsqueda, tel y color.
2. Forma en línea
// Deje que la forma se alinee y flote, y se comporte como una estructura de bloque en línea de bloque en línea <Form>
Nota: Cuando es inferior a 768px, el estilo exclusivo será restaurado.
3. Agrupación de formulario
// Agregar fragmentos antes y después <div> <iv> ￥ </div> <input type = "text"> <div> .00 </div> </div>
4. Disposición horizontal
// Mantenga los elementos en el formulario organizado horizontalmente <form> <div> <label> correo electrónico </label> <div> <input type = "email" placeHointer = "Ingrese su correo electrónico"> </div> </div> </form>
Nota: El sistema de trama Col-SM se usa aquí, y los siguientes capítulos se centrarán en explicarlo, mientras que la etiqueta de control representa la sincronización con el estilo del elemento principal.
5. Casillas de verificación y casillas de radio
// Establecer la casilla de verificación, en una línea <div> <label> <input type = "checkbox"> Sports </label> </div> <div> <label> <input type = "checkbox"> music </label> </div> // type = "CheckBox"> Sports </label> <label> <input type = "CheckBox" DiABLED> Música </label> // Establecer el cuadro de radio <iv> <label> <input type = "radio" name = "sex" discapacitado> masculino </label> </div>
6. Lista desplegable
// Establezca la lista desplegable <Eectar> <opción> 1 </opción> <pection> 2 </opción> <pection> 3 </opción> <opción> 4 </opción> <opción> 5 </opción> </select>
7. Verifique el estado
// Establecer en el estado de error <Div>
Nota: Hay otros estados de la siguiente manera:
Estilo Descripción HA-Error Estado de error HA-Success Estado de éxito tiene estado de advertencia de advertencia // Sincronización de la etiqueta de etiqueta Estado correspondiente <label> Entrada con éxito </etiqueta>
8. Agregue íconos adicionales
// icono de texto incorporado en el lado derecho del cuadro de texto <iv> <label> correo electrónico </label> <input type = "correo electrónico"> <span> </span> </div>
Nota: Además de Glyphicon-Ok, hay varias tablas a continuación:
Descripción del estilo Glyphicon-OK Estado del éxito Glyphicon-Warning-SIGN ESTADO DE ADVERTENCIA Glyphicon-Remove Estado de error
9. Controle el tamaño
// de grande a pequeño <input type = "contraseña"> <input type = "contraseña"> <input type = "contraseña">
Nota: También puede establecer el elemento principal de group-LG y formulario-grupo-SM para ajustar.
dos. imagen
Bootstrap proporciona algunos estilos de imágenes ricas para que los desarrolladores lo usen.
1. Forma de imagen
// tres formas <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // imagen receptiva <img src = "img/pic.png">
Lo anterior es el contenido relacionado con los formularios e imágenes de Bootstrap presentados por el editor. ¡Espero que sea útil para todos!