Dans le travail quotidien, la fonction de téléchargement et de téléchargement de fichiers est une partie indispensable. Les cadres de style frontal bootstrap sont également utilisés plus souvent. Désormais, basé sur les modèles de style puissants de Bootstrap, personnalisez un style de téléchargement de fichiers.
À l'avenir, nous utiliserons le cadre Spring MVC pour implémenter tout le code téléchargé par le fichier, alors restez à l'écoute.
Examinons d'abord l'exemple d'image: cet exemple comprend le téléchargement des exemples de styles de fichiers et téléchargez des styles de fichiers.
Téléchargez simplement le code d'abord et enfin expliquez:
<div id = "file"> <label for = ""> SELECT Fichier: </ Label> <div> <Input id = "lefile" type = "file" style = "affiche: aucun"> <span onclick = "$ ('input [id = lefile]'). Click ();" Style = "Cursor: pointeur; Background-Color: # e7e7e7"> <i> </i> Browse </span> <input id = "Photover" type = "Text"> <span style = "Cursor: Pointer; Pointer-events: auto;"> </span> </div> </div>Les principales technologies impliquées sont: bootstrap; Événements de pointeur de CSS3; html5
1. Style de téléchargement de fichiers de base de HTML5
<input type = "file" name = "file">
Le style affichera différents effets en fonction des différents navigateurs.
2. Icônes de police
Vous pouvez utiliser l'icône de police Glyphicons intégrée dans Bootstrap ou des icônes de police impressionnantes. Pour des tutoriels spécifiques d'utilisation, veuillez vous référer au site officiel:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
Font génial: http://fontawesome.io/
Dans cet exemple, deux icônes sont utilisées, <i> <i>
Ou <i> <i>
3. CSS3: Events de pointeur
Dans Bootstrap, les événements de pointeur de .Form-Control-Feedback sont définis sur None, ce qui entraîne la sélection des éléments lors de la sélection du bouton de téléchargement du bouton de téléchargement, et sont désormais définis sur Auto.
grammaire:
Pointer-Events: Auto | Aucun | Visiblepained | VisibleFill | Visiblestroke | Visible | peint | Remplir | AVC | tous
Valeur par défaut: Auto
Applicable à: Tous les éléments
Héritage: oui
Animation: non
Calculer la valeur: spécifier la valeur
Valeur:
Auto: la même performance que la propriété Pointer-Events n'est pas spécifiée. La même valeur que visiblepained sur le contenu SVG
Aucun: l'élément ne deviendra jamais une cible pour les événements de souris . Cependant, lorsque la propriété Pointer-Events de son élément descendant spécifie d'autres valeurs, l'événement de la souris peut pointer vers l'élément descendant, auquel cas l'événement de la souris déclenchera l'éditeur d'événement de l'élément parent à l'ordre de capture ou de bouillonnement.
D'autres valeurs ne peuvent être appliquées qu'à SVG.
4. Le bouton pour télécharger un fichier ------- Utilisation de la boîte combinée bootstrap
Utilisation du groupe .input-groupe et .input-group-addon.
Pour un rendu CSS spécifique, consultez vous-même le code source bootstrap par vous-même.
5. Implémentation de Télécharger Exemple de bouton --- Reportez-vous au style d'invite d'erreur de formulaire de bootstrap
L'utilisation de.
Si vous n'avez pas assez appris, vous pouvez cliquer ici pour apprendre et ensuite vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation de bootstrap.