Exemples de comment créer une barre de navigation avec un compteur de notification à l'aide de bootstrap 4
Table des matières
Exemple 1
Code
<span class="badge badge-pill badge-warning" style="float:right;margin-bottom:-15px;margin-right:-18px;font-size:10px">123</span><a class="nav-link" href="/News/">News <span class="sr-only">(current)</span></a>
Code complet
<!DOCTYPE html><html lang="en"><head><title>Test</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head><body><nav class="navbar navbar-expand-lg navbar-default fixed-top navbar-dark" style="background-color: #3c3d41;" id="mainNav"><div class="container"><a class="navbar-brand" href="/" style="color:white">Hello World</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><span class="badge badge-pill badge-warning" style="float:right;margin-bottom:-15px;margin-right:-18px;font-size:10px">123</span><a class="nav-link" href="/News/">News <span class="sr-only">(current)</span></a></li></ul></div></div></nav></body></html>
Exemple 2
Changer la couleur:
badge-danger
badge-info
