背景
众所周知,bootstrap 的 popover 需要把内容放到 data-content
属性里,用引号包裹,在里面加入 html 元素时会出现引号冲突问题。
解决方案
但还好 html 支持单双引号,故可以在 data-content
属性里使用单引号 '
,在内部 html 代码里使用双引号 "
。
以下是一个样例。
<button type="button" class="btn btn-outline-info" data-toggle="popover" data-placement="bottom" data-html="true" data-content='
<div class="container">
<a href="**.txt" class="btn btn-outline-info btn-sm btn-block">
<span class="oi oi-cloud-download" title="cloud-download" aria-hidden="true"></span>
下载
</a>
<p style="margin:0;">或者通过联系方式交换你的公钥</p>
<p style="margin:0;"><code>指纹: xxxxx</code></p>
</div>
'>
<span class="oi oi-key" title="key" aria-hidden="true"></span> GPG Key
</button>