Bootstrap-Komponenten

In diesem Kapitel wird die Verwendung von Bootstrap-Glyphicons (Komponenten) erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse von Bootstrap-Glyphicons (Komponenten). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung Ergebnis
<i class = "Glyphicon Glyphicon-Asterisk custom"> </ i>
<i class = "glyphicon glyphicon-plus custom"> </ i>
<i class = "glyphicon glyphicon-euro custom"> </ i>
<i class = "Glyphicon Glyphicon-minus custom"> </ i>
<i class = "Glyphicon Glyphicon-Cloud Custom"> </ i>
<i class = "Glyphicon Glyphicon-Envelope Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pencil custom"> </ i>
<i class = "Glyphicon Glyphicon-Glass Custom"> </ i>
<i class = "glyphicon glyphicon-music custom"> </ i>
<i class = "Glyphicon Glyphicon-Search Custom"> </ i>
<i class = "Glyphicon Glyphicon-Heart Custom"> </ i>
<i class = "Glyphicon Glyphicon-Star Custom"> </ i>
<i class = "Glyphicon Glyphicon-Star-Empty Custom"> </ i>
<i class = "Glyphicon Glyphicon-Benutzer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Film Custom"> </ i>
<i class = "Glyphicon Glyphicon-th-Large Custom"> </ i>
<i class = "Glyphicon Glyphicon-th custom"> </ i>
<i class = "Glyphicon Glyphicon-th-List custom"> </ i>
<i class = "glyphicon glyphicon-ok custom"> </ i>
<i class = "Glyphicon Glyphicon-Remove Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zoom-In Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zoom-Out Custom"> </ i>
<i class = "Glyphicon Glyphicon-Off Custom"> </ i>
<i class = "Glyphicon Glyphicon-Signal Custom"> </ i>
<i class = "glyphicon glyphicon-cog custom"> </ i>
<i class = "Glyphicon Glyphicon-Trash Custom"> </ i>
<i class = "Glyphicon Glyphicon-Home Custom"> </ i>
<i class = "Glyphicon Glyphicon-Datei benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Time Custom"> </ i>
<i class = "Glyphicon Glyphicon-Road Custom"> </ i>
<i class = "glyphicon glyphicon-download-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Download benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Upload benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Posteingang benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Play-Circle Custom"> </ i>
<i class = "Glyphicon Glyphicon-Repeat Custom"> </ i>
<i class = "Glyphicon Glyphicon-Refresh Custom"> </ i>
<i class = "glyphicon glyphicon-list-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Lock custom"> </ i>
<i class = "Glyphicon Glyphicon-Flag benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kopfhörer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Off Custom"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Up Custom"> </ i>
<i class = "glyphicon glyphicon-qrcode custom"> </ i>
<i class = "Glyphicon Glyphicon-Barcode benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tag benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tags benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-book custom"> </ i>
<i class = "Glyphicon Glyphicon-Lesezeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Print Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kamera benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-font custom"> </ i>
<i class = "Glyphicon Glyphicon-Bold Custom"> </ i>
<i class = "Glyphicon Glyphicon-Italic Custom"> </ i>
<i class = "Glyphicon Glyphicon-Texthöhe benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Text-Breite benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Align-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Center Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Justize Custom"> </ i>
<i class = "Glyphicon Glyphicon-List custom"> </ i>
<i class = "Glyphicon Glyphicon-Indent-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Indent-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Facetime-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Bild benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Map-Marker benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Adjust Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tint Custom"> </ i>
<i class = "Glyphicon Glyphicon-Edit Custom"> </ i>
<i class = "Glyphicon Glyphicon-Share Custom"> </ i>
<i class = "Glyphicon Glyphicon-Check Custom"> </ i>
<i class = "Glyphicon Glyphicon-Move Custom"> </ i>
<i class = "Glyphicon Glyphicon-Step-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fast-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Play Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pause benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Stop Custom"> </ i>
<i class = "Glyphicon Glyphicon-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fast-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Step-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eject Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Plus-Zeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Minuszeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Remove-Sign Custom"> </ i>
<i class = "glyphicon glyphicon-ok-sign custom"> </ i>
<i class = "Glyphicon Glyphicon-Frage-Zeichen benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-info-sign custom"> </ i>
<i class = "Glyphicon Glyphicon-Screenshot benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Remove-Circle Custom"> </ i>
<i class = "glyphicon glyphicon-ok-circle custom"> </ i>
<i class = "Glyphicon Glyphicon-Ban-Circle Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil-links benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil-rechts benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil nach oben benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil nach unten benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-share-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Full Custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Small Custom"> </ i>
<i class = "Glyphicon Glyphicon-Ausrufezeichen benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-gift custom"> </ i>
<i class = "Glyphicon Glyphicon-Leaf Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fire Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eye-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eye-Close Custom"> </ i>
<i class = "Glyphicon Glyphicon-Warnzeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Plane Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kalender benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Random Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kommentar benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Magnet Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Down Custom"> </ i>
<i class = "glyphicon glyphicon-retweet custom"> </ i>
<i class = "Glyphicon Glyphicon-Warenkorb benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Ordner schließen Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Ordner öffnen Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Vertical Custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Horizontal Custom"> </ i>
<i class = "glyphicon glyphicon-hdd custom"> </ i>
<i class = "glyphicon glyphicon-bullhorn custom"> </ i>
<i class = "Glyphicon Glyphicon-Bell Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zertifikat benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Thumbs-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Thumbs-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-rechts benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-links benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-nach oben Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-nach unten benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Globe Custom"> </ i>
<i class = "Glyphicon Glyphicon-Wrench Custom"> </ i>
<i class = "Glyphicon Glyphicon-Aufgaben benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Filter benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Aktentasche benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Vollbild-Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Dashboard benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Büroklammer benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-heart-empty custom"> </ i>
<i class = "Glyphicon Glyphicon-Link custom"> </ i>
<i class = "Glyphicon Glyphicon-Phone Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pushpin Custom"> </ i>
<i class = "glyphicon glyphicon-usd custom"> </ i>
<i class = "glyphicon glyphicon-gbp custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Alphabet alphabet"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Alphabet-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Order Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Order-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Attribute custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Attribute-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-ungeprüftes Custom"> </ i>
<i class = "Glyphicon Glyphicon-expand custom"> </ i>
<i class = "Glyphicon Glyphicon-Collapse-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Collapse-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Log-In Custom"> </ i>
<i class = "Glyphicon Glyphicon-Flash Custom"> </ i>
<i class = "Glyphicon Glyphicon-Log-Out Custom"> </ i>
<i class = "Glyphicon Glyphicon-New-Window Custom"> </ i>
<i class = "Glyphicon Glyphicon-Record Custom"> </ i>
<i class = "Glyphicon Glyphicon-Save Custom"> </ i>
<i class = "Glyphicon Glyphicon-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-gespeicherte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Import benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Export benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-send custom"> </ i>
<i class = "Glyphicon Glyphicon-Diskette benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-gespeicherte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Remove Custom"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Save Custom"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kreditkarte benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Transfer Custom"> </ i>
<i class = "Glyphicon Glyphicon-Besteck benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Header benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-komprimierte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Kopfhörer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Phone Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tower benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-stats custom"> </ i>
<i class = "Glyphicon Glyphicon-SD-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-HD-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Untertitel benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Sound-Stereo Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sound-Dolby Custom"> </ i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </ i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </ i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </ i>
<i class = "Glyphicon Glyphicon-Copyright-Mark Custom"> </ i>
<i class = "Glyphicon Glyphicon-Registrierungsmarke benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Cloud-Download benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Cloud-Upload benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tree-Conifer Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tree-Laubbaum-Brauch"> </ i>