Abzeichen sind kleine und einfache Komponenten, die dazu dienen, dem Benutzer wichtige Benachrichtigungen anzuzeigen, z. B. die Anzahl der empfangenen Nachrichten, ungelesene Nachrichten, die Anzahl der Freundschaftsanfragen, die Anzahl der im Posteingang der E-Mail-Adresse gefundenen E-Mails usw. Abzeichen sind die kleinen nummerierten Symbole, die angezeigt werden in den Mail- und SMS-Apps, wenn wir neue Nachrichten haben. Abzeichen sehen aus wie Etiketten, der kleine Unterschied besteht jedoch darin, dass die Ecken der Abzeichen stärker abgerundet sind. Diese werden häufig in Netzwerk-Websites und E-Mails von Kunden verwendet.
lesen Sie auch:
- Bootstrap-Setup
- Bootstrap-Typografie
Bootstrap bietet Abzeichen Klasse, die im Span-Element verwendet wird, um ungelesene Nachrichten anzuzeigen, wie im folgenden Beispiel gezeigt. Wenn Sie Fragen zu Bootstrap-Abzeichen haben, schreiben Sie diese bitte in den Kommentarbereich.
Beispiel für Bootstrap-Abzeichen
<!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>Bootstrap Badges</h2> <ul ><br> <li><a href="#">Compose</a></li> <li ><a href="#">Inbox<span >12</span></a></li> <li><a href="#">Sent Mail</a></li> <li><a href="#">Drafts<span >8</span></a></li> <li><a href="#">Trash</a></li> </ul> </div> </body> </html>
- Führen Sie die Beispieldemo für Bootstrap Badges aus
Aktive Navigationszustände
Es ist möglich, Badges in den aktiven Zuständen der Pillennavigation zu platzieren, indem man die Badge-Klasse innerhalb des Span-Elements für aktive Links verwendet, wie im folgenden Beispiel gezeigt:
<!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>Active State in Pill</h2> <ul > <li><a href="#">Compose</a></li> <li ><a href="#">Inbox<span >12</span></a></li> <li><a href="#">Sent Mail</a></li> <li><a href="#">Drafts<span >12</span></a></li> <li><a href="#">Trash</a></li> </ul><br> <h2>Active State in Navigations</h2> <ul > <li><a href="#">Compose</a></li> <li ><a href="#">Inbox<span >12</span></a></li> <li><a href="#">Sent Mail</a></li> <li><a href="#">Drafts<span >8</span></a></li> <li><a href="#">Trash</a></li> </ul> </div> </body> </html>
Das obige Skript zeigt die Abzeichen in den aktiven Zuständen der Pillen-Navigationen an. Wir können das Abzeichen auf der rechten Seite der Seite anzeigen, indem wir die Klasse .pull-right innerhalb der Abzeichenklasse verwenden.
- Führen Sie die Beispieldemo „Bootstrap Active Nav States“ aus
