boostrap自定义弹出框的样式和内容

效果图

html部分

 <div >
     <span data-container="body" data-toggle="popover" data-placement="bottom">查看关联的设备</span>
    </div>
    <div id="popover-content" class="popover-content" style="display: none">
        <div>
            <span class="inlineBlock web-right" style="width: 50px;">设备:</span>
            <span>电 表</span>
        </div>
        <div>
            <span class="inlineBlock web-right" style="width: 50px;">ID:</span>
            <span>TY-456</span>
        </div>
    </div>
</div>

js部分

  $(function () {   //这也是应用弹出框的地方
     $('[data-toggle="popover"]').popover({
           html:true,
           content:function () {
               return $('#popover-content').html()
           }
       })
   })

官网的要求

所以直接在这个基础上面加自定义的内容即可