Bootstrap-Labels

Etikett stellt eine Beschriftung für ein Element in einer Benutzeroberfläche dar. Es wird verwendet, um einem Formularsteuerelement Beschriftungen wie wichtige Notizen, Warnmeldungen usw. hinzuzufügen. Wir können auch auffällige Beschriftungen erstellen und Text mit Inline-Beschriftungen kommentieren. Wenn wir einen wichtigen Hinweis zu seinem jeweiligen Konzept angeben möchten, können wir die Inline-Beschriftung in Bootstrap verwenden.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Beispiel für ein Bootstrap-Label

Bootstrap stellt eine Klasse namens bereit .Etikett um Beschriftungen auf der Webseite anzuzeigen und kann innerhalb des Span-Elements verwendet werden, wie im folgenden Beispiel gezeigt. Wenn Sie Fragen zu Bootstrap-Labels haben, schreiben Sie diese bitte in den Kommentarbereich.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Label Example</h2>
<div  >
   <h1>Bootstrap<span  >label</span></h1>
   <h2>Bootstrap<span  >label</span></h2>
   <h3>Bootstrap<span  >label</span></h3>
   <h4>Bootstrap<span  >label</span></h4>
   <h5>Bootstrap<span  >label</span></h5>
   <h6>Bootstrap<span  >label</span></h6>
</div>
</body>
</html>

Das obige Skript definiert die Label-Klasse, um Labels von h1 bis h6 anzuzeigen, wie im div-Element angegeben.

  • Führen Sie eine Bootstrap-Label-Beispieldemo aus

Beispiel für ein Bootstrap-Label

Beschriftungen mit Modifikatorklassen

In Bootstrap können wir verschiedene Arten von Variationen erhalten, um das Erscheinungsbild der Inline-Labels zu ändern. Diese können wie folgt aufgelistet werden:

  • Label-Standard
  • label-primär
  • Label-Erfolg
  • Label-Info
  • Etikettenwarnung
  • Etikett-Gefahr

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Labels with Modifier Classes</h2><br>
   <span  >Default</span></h1>
   <span  >Primary</span></h2>
   <span  >Success</span></h3>
   <span  >Info</span></h4>
   <span  >Warning</span></h5>
   <span  >Danger</span></h6>
</div>
</body>
</html>
  • Führen Sie eine Beispieldemo für Bootstrap-Labels-Modifikatorklassen aus

Beispiel für Modifikatorklassen für Bootstrap-Beschriftungen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen