Bootstrap - 如何构建消息通知？

Question

我使用Bootstrap 3.3.7，我需要通过新消息通知用户。我试图找到小部件或插件，但没找到任何！

像这样：

由于

Answer 1

Bootstrap Glyphicon + Bootstrap Badge +小型自定义css应该可以解决问题。使用全屏代码段选项查看结果 - 对于响应式布局，您需要添加额外的CSS。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;