【分享】bootstrap中实现消息提示样式

原创文章,转载请注明: 转载自勤奋的小青蛙
本文链接地址: 【分享】bootstrap中实现消息提示样式

如何实现如下图的消息提示呢?

QQ截图20170112123315

很简单,代码如下:

<div class="container">
  <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
    <span class="glyphicon glyphicon-comment"></span>
  </button>
  <span class="badge badge-notify">4</span>
</div>

css样式:

/* CSS used here will be applied after bootstrap.css */
.badge-notify{
   background:red;
   position:relative;
   top: -20px;
   left: -35px;
  }

可以在下面网站去演示:

http://www.bootply.com/7teIvGLIzY

QQ截图20170112123218

原创文章,转载请注明: 转载自勤奋的小青蛙
本文链接地址: 【分享】bootstrap中实现消息提示样式

文章的脚注信息由WordPress的wp-posturl插件自动生成



|2|left
打赏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: