Ausführliche Erläuterung der Bootstrap-Glyphicons-Font-Icon_Javascript-Fähigkeiten-js-Tutorial-php.cn

Ausführliche Erläuterung der Bootstrap-Glyphicons-Font-Icon_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:22:12

Original

1048 Leute haben es durchsucht

In diesem Kapitel werden Schriftsymbole (Glyphicons) erläutert und ihre Verwendung anhand einiger Beispiele erläutert. Bootstrap wird mit Glyphen in über 200 Schriftformaten geliefert. Lassen Sie uns zunächst verstehen, was ein Schriftartensymbol ist.

Lassen Sie mich zunächst vorstellen, was ein Schriftsymbol ist:

Font Icon ist eine Symbolschriftart, die in Webprojekten verwendet wird. Die Schriftartensymbole befinden sich im Schriftartenordner des heruntergeladenen Bootstrap.

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 -webkit-font-smoothing: antialiased;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -moz-osx-font-smoothing: grayscale;
}

Nach dem Login kopieren

Die

.glyphicon-Klasse deklariert einen relativen Positionsversatz von 1 Pixel vom oberen Rand, stellt ihn als Inline-Block dar, deklariert die Schriftart, gibt den Schriftstil und die Schriftstärke als normal an und setzt die Zeilenhöhe auf 1. Andernfalls verwenden Sie -webkit-font-smoothing: antialiased und -moz-osx-font-smoothing: greyscale für browserübergreifende Konsistenz.

Über -webkit-font-smoothing und -moz-osx-font-smoothing:

-webkit-font-smoothing-Attribut. Mit diesem Attribut können die Schriftarten auf der Seite geglättet werden. Nach der Verwendung sehen die Schriftarten klarer und komfortabler aus.

keine Seit Subpixel-Antialiased ------Standardwert
antialiasiert . automatisch
Erben ------ Erben Sie das übergeordnete Element
initial
-moz-osx-font-smoothing-Attribut, wobei -osx- angibt, dass es sich um eine seltene Funktionserweiterung handelt, die von Mozilla für ein bestimmtes Betriebssystem eingeführt wurde. Aufgrund der fehlenden Dokumentation lautet der derzeit bekannte Wert:

Graustufen – sehr gutes Anti-Aliasing

auto —----Standardwert

Erben ------ Vererbung

Bootstrap bietet 200 Schriftartensymbole, jedes Symbol entspricht einer Klasse. Bei der Verwendung müssen wir nur das Glyphikon und die entsprechende Klasse einschließen.

Verwendung:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset = "utf-8"> 
  <title>demo</title> 
  <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 
  <style type="text/css"> 
    body{padding: 20px;} 
  </style> 
</head> 
<body> 
  <span class = "glyphicon glyphicon-lock"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>   
</body> 
</html>

Nach dem Login kopieren

Mit der Schaltfläche verwenden:

<body> 
  <button class="btn btn-default"> 
    <span class = "glyphicon glyphicon-home"></span> 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-info"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-lg"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-sm"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
</body>

Nach dem Login kopieren

Wirkung:

Benutzerdefiniertes Schriftartensymbol Im vorherigen Beispiel haben wir tatsächlich die Größe und Farbe des Schriftsymbols angepasst, was hier näher erläutert wird.

Sie können die Größe des Schriftsymbols ändern, indem Sie die Schriftgröße oder die Größe der Schaltfläche ändern.

Durch Festlegen der Farbe können Sie die Farbe des Schriftsymbols wie folgt ändern:

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success" style="color:#FF0000;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home 
  </button> 
</body>

Nach dem Login kopieren

Wirkung:

Es ist ersichtlich, dass die Farbe des Schriftartsymbols geändert werden kann, indem die Farbe seines übergeordneten Elements oder des Bereichs selbst geändert wird.

Textschatten anwenden

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg"> 
    <span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home 
  </button> 
</body>

Nach dem Login kopieren

Weitere Informationen finden Sie in den Schriftartsymbolen und in der offiziellen Bootstrap-Dokumentation: