En el trabajo diario, la función de carga y descarga de archivos es una parte indispensable. Los marcos de estilo front-end de Bootstrap también se usan con mayor frecuencia. Ahora, basado en las potentes plantillas de estilo de Bootstrap, personalice un estilo para descargar archivos.
En el futuro, utilizaremos el marco Spring MVC para implementar todo el código cargado por el archivo, así que estad atentos.
Veamos el ejemplo de la imagen primero: este ejemplo incluye los estilos de archivo de muestra y los estilos de archivo de carga.
Simplemente cargue el código primero y finalmente explique:
<div id = "file"> <etiqueta for = ""> Seleccionar archivo: </label> <div> <input id = "lefile" type = "file" style = "visual style = "cursor: pointer; background-color: #e7e7e7"> <i> </i> browse </span> <input id = "Photocover" type = "text"> <span style = "cursor: pointer; pointer-events: auto;"> </span> </div> </div> </div>
Las principales tecnologías involucradas son: Bootstrap; Pointer-Events de CSS3; html5
1. Estilo de carga básica de archivo de HTML5
<input type = "file" name = "file">
El estilo mostrará diferentes efectos según diferentes navegadores.
2. Iconos de fuentes
Puede usar el icono de fuente Glyphicons incorporado Bootstrap o Font Awesome Font Icons. Para obtener tutoriales de uso específicos, consulte el sitio web oficial:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
Font impresionante: http://fontawesome.io/
En este ejemplo, se usan dos iconos, <i> <i>
O <i> <i>
3. CSS3: Pointer-Events
En Bootstrap, los eventos de puntero de .Form-Control-Feedback se establecen en Ninguno, lo que hace que los elementos se seleccionen al hacer clic en el botón Descargar la muestra, y ahora se configuran en Auto.
gramática:
Pointer-Events: Auto | ninguno | VisiblePainted | Visiblefill | Visiblestroke | visible | Pintado | llenar | accidente cerebrovascular | todo
Valor predeterminado: Auto
Aplicable a: todos los elementos
Herencia: si
Animación: No
Calcular valor: especificar el valor
Valor:
Auto: no se especifica el mismo rendimiento que la propiedad Pointer-Events. El mismo valor que VisiblePainted en el contenido de SVG
Ninguno: El elemento nunca se convertirá en un objetivo para los eventos del mouse . Sin embargo, cuando la propiedad de eventos de puntero de su elemento descendiente especifica otros valores, el evento del mouse puede señalar el elemento descendiente, en cuyo caso el evento del mouse desencadenará el oyente del evento del elemento principal en el orden de captura o burbujeante.
Otros valores solo se pueden aplicar a SVG.
4. El botón para cargar un archivo ------- Uso del cuadro combinado de Bootstrap
Uso del grupo .input y .input-group-addon.
Para la representación específica de CSS, consulte el código fuente de Bootstrap por sí mismo.
5. Implementación del botón de muestra de descarga --- Consulte el estilo de error de error de Bootstrap
El uso de .has-feedback y .Form-Control-Feedback
Si no ha aprendido lo suficiente, puede hacer clic aquí para aprender y luego adjuntarle un tema maravilloso: Tutorial de aprendizaje de bootstrap
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de bootstrap.