<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="badger-left" data-badger="关注我的微博"> Block with badger 1 </div> <div class="badger-left badger-info" data-badger="TWITTER && FACEBOOK"> Block with badger 2 </div> <div class="badger-left badger-danger" data-badger="Badger danger (left)"> Block with badger 3 </div> <div class="badger-right badger-warning" data-badger="Badger warning (right)"> Block with badger 4 </div> <div class="badger-left badger-success" data-badger="Badger success (left)"> Block with badger 5 </div> <div class="badger-left badger-inverse" data-badger="Badger inverse (right)"> Block with badger 6 </div> <div class="badger-right badger-show" data-badger="Badger inverse (right)"> Block with badger 6 </div> </div> </div>

html, body { font-family: Arial, 微软雅黑, Verdana, Geneva, Tahoma, sans-serif, 宋体; } /* Badger ------------------------- */ [class*="badger"] { position: relative; margin: 5px 0; padding: 35px 19px 20px 8px; background: #fff; border-top: 2px solid #f75353; } [class*="badgerb"] { position: relative; margin: 15px 0; padding: 39px 19px 14px; background: #fff; border-top: 2px solid #222; } [class*="badger"]:after { content: attr(data-badger); position: absolute; top: 0; padding: 3px 7px; font-size: 12px; font-weight: bold; background: #f75353; color: #fff; } .badger-left:after { left: 0; } .badger-right:after { right: 0; } .badger-danger:after { background: #f75353; } .badger-warning:after { background: #f0ad4e; } .badger-success:after { background: #5cb85c; } .badger-info:after { background: #5bc0de; } .badger-inverse:after { background: #222; } .badger-show:after { background: #0ea8f0; }