ブートストラップ - メッセージ通知を作成するにはどうすればよいですか？

Question

Iブートストラップ3.3.7を使用して、新しいメッセージからユーザーに通知する必要があります。私はウィジェットやプラグインを見つけようとしますが、見つけません！このよう

：

おかげでトリックを行う必要があります

Answer 1

ブートストラップGlyphicon +ブートストラップバッジ+小さなカスタムCSS。結果を表示するにはフルスクリーンのスニペットオプションを使用します。応答の速いレイアウトの場合は、余分なCSSを追加する必要があります。あなたのanswareため

body { 
 
    padding-top: 50px; 
 
} 
 

 
.badge { 
 
    font-size: 9px !important; 
 
    line-height: 0.9 !important; 
 
    padding: 4px 4px !important; 
 
    position: absolute; 
 
    right: 4px !important; 
 
    text-align: center; 
 
    top: 9px !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#"> <i class="glyphicon glyphicon-envelope"></i> <span class="badge">42</span></a></li> 
 
     </ul> 
 
    </div><!--/.nav-collapse --> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div class="text-center"> 
 
    <h1>Bootstrap starter template</h1> 
 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
 
    </div> 
 

 
</div><!-- /.container -->