In der täglichen Arbeit ist die Datei -Upload- und Download -Funktion ein unverzichtbarer Teil. BOOTTRAP-Front-End-Stil-Frameworks werden auch häufiger verwendet. Passen Sie jetzt einen Stil zum Herunterladen von Dateien an.
In Zukunft werden wir das Spring MVC -Framework verwenden, um den gesamten von der Datei hochgeladenen Code zu implementieren. Bleiben Sie also auf dem Laufenden.
Schauen wir uns zuerst das Bildbeispiel an: Dieses Beispiel enthält Download -Beispieldateistile und Upload -Dateistile.
Laden Sie einfach zuerst den Code hoch und erklären Sie schließlich:
<div id = "file"> <label für = ""> Datei auswählen: </label> <div> <input id = "LeFile" type = "Datei" style = "Anzeige: Keine"> <span onclick = "$ ('input [id = leFile]'). Click (); style = "cursor: pointer; Hintergrundfarbe: #e7e7e7"> <i> </i> Durchsuchen </span> <Eingabe-ID = "Photocover" type = "text"> <span style = "cursor: pointer; pointer-Events: auto;"> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div>Die wichtigsten Technologien sind: Bootstrap; Zeiger-Events von CSS3; HTML5
1. Basisdatei -Upload -Stil von HTML5
<Eingabe type = "Datei" name = "Datei">
Der Stil zeigt unterschiedliche Effekte nach verschiedenen Browsern.
2. Schriftartikonen
Sie können das in Bootstrap integrierte Glyphicons -Schriftsymbol oder fantastische Schrift -Schrift -Symbole verwenden. Für bestimmte Verwendungs -Tutorials finden Sie auf der offiziellen Website:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
Schriftart fantastisch: http://fontawesome.io/
In diesem Beispiel werden zwei Symbole verwendet, <i> <i>
Oder <i> <i>
3. CSS3: Zeiger-Events
In Bootstrap werden die Zeiger-Events von .Form-Control-Feedback auf keine gesetzt, wodurch Elemente beim Klicken auf die Schaltfläche Download-Beispiel ausgewählt werden und jetzt auf automatisch eingestellt sind.
Grammatik:
Zeiger-Events: Auto | Keine | sichtbar gefragt | sichtbares fill | Visiblestroke | sichtbar | gemalt | füllen | Schlaganfall | alle
Standardwert: Auto
Anwendbar für: alle Elemente
Erbschaft: Ja
Animation: Nein
Wert berechnen: Wert Geben Sie den Wert an
Wert:
Auto: Die gleiche Leistung wie die Objekte von Zeiger-Events ist nicht angegeben. Der gleiche Wert wie auf SVG -Inhalten sichtbar
Keine: Das Element wird niemals ein Ziel für Mausereignisse . Wenn jedoch die Eigenschaft des Zeiger-Events seines Nachkommenelements andere Werte angibt, kann das Mausereignis auf das Nachkommenselement verweisen. In diesem Fall löst das Mausereignis den Ereignishörer des übergeordneten Elements in der Erfassungs- oder Blasenordnung aus.
Andere Werte können nur auf SVG angewendet werden.
4. Die Schaltfläche zum Hochladen einer Datei ------- Verwendung des Bootstrap-Kombinationsfelds
Verwendung von .input-Gruppe und .Input-Gruppen-Addon.
Überprüfen Sie den Bootstrap -Quellcode selbst, um ein bestimmtes CSS -Rendering zu erhalten.
5. Implementierung des Download-Beispieltastes --- Siehe Form der Formular Fehlereingabestil von Bootstraps
Die Verwendung von .waS-Feedback und .Form-Kontroll-Feedback hat
Wenn Sie nicht genug gelernt haben, können Sie hier klicken, um Ihnen ein wundervolles Thema zu lernen: Bootstrap -Lern -Tutorial
Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, Bootstrap -Programme zu lernen.