Die Anleitung zu Bootstrap Badge

View more Tutorials:

1- Bootstrap Badge

Badge (das Abzeichen) ist eine kleine Interface-Element. Es wird zur Dekoration eines Element verwendet. Folgend sind das einige Illustratorsphoto, wie  Badge in der Seite verwendet.
Bootstrap verwendet die Klasse  .badge für ein Tag um eine   Badge zu erstellen. Einige zusätzlichen Klassen wie  .badge-primary, .badge-secondary, .badge-danger,.. helfen bei der Erstellung der Hintergrundsfarbe vom  Badge, Sie können sie in die entsprechenden Kontext benutzen.
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link
Das Beispiel von der Verwendung  Badge um die  Link zu dekorieren:
Link with Badge
<a href="#">News <span class="badge badge-primary">5</span></a><br>
<a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
<a href="#">Updates <span class="badge badge-danger">2</span></a>
Das volle Beispiel sehen
badge-link-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Badge</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Link with Badge</h4>

         <a href="#">News <span class="badge badge-primary">5</span></a><br>
         <a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
         <a href="#">Updates <span class="badge badge-danger">2</span></a>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
Nach Default werden  Badge die Größe  Font in Höhe von 75% von der Größe  Font des Vater-Element eingestellt.
<h1>Example heading H1 <span class="badge badge-secondary">New</span></h1>
<h2>Example heading H2 <span class="badge badge-secondary">New</span></h2>
<h3>Example heading H3 <span class="badge badge-secondary">New</span></h3>
<h4>Example heading H4 <span class="badge badge-secondary">New</span></h4>
<h5>Example heading H5 <span class="badge badge-secondary">New</span></h5>
<h6>Example heading H6 <span class="badge badge-secondary">New</span></h6>
Badge wird zur Dekoration für  Button verwendet. Zum Beispiel ein  Button, der Benutzer klickt auf diesen  Button um die File herunterzuladen, Badge wird verwendet um die Gesamtzeiten, die die File durch die Benutzer heruntergeladet werden, anzuzeigen.
<button class="btn btn-primary">
  Download <span class="badge badge-light">5</span>
</button>

2- Badge (.badge-pill)

Die Verwendung der Klasse  .badge-pill macht Ihre 4  Badge -Ecke runder. Das folgende Foto bestimmt den Unterschied zwischen eine normale  Badge und eine  Badge mit der Verwendung der Klasse  .badge-pill:
.badge .badge-pill
<h1>
   News
   <span class="badge badge-primary">100</span>
</h1>
<h1>
   Comments
   <span class="badge badge-pill badge-primary">20K</span>
</h1>

View more Tutorials: