Bootstrap - 如何構建消息通知？

Question

我使用Bootstrap 3.3.7，我需要從新消息通知用戶。我試圖找到小部件或插件，但沒有找到任何！

喜歡這個：

感謝

Answer 1

引導Glyphicon +引導+徽章小自定義CSS應該做的伎倆。使用全屏片段選項查看結果 - 對於需要添加額外CSS的響應式佈局。

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 -->