引導程序彈出窗口-自定義字段

Question

bootstrap popover允許更改在popover中使用的html模板。 我想修改原始模板：

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

像這樣：

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
    <div class="popover-footer"></div>
</div>

以這種方式，我可以在javascript中的選項中顯式傳遞頁腳文本：

options = {
    title: "my title",
    content: "my content",
    footer: "my footer"
}

$(".popoverElement").popover(options);

我想要執行類似操作的原因是，我希望能夠創建一堆不同的Popover，而在單個Popover中只有一個部分（例如，頁腳）會發生變化。 但是引導程序無法提供這種可能性。 您知道我可以使用的解決方法嗎？

Answer 1

是的，它確實提供了一種通過template選項來自定義彈出模板的方法。

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

檢查此https://stackoverflow.com/a/24586543/1151408