bootstrap彈出窗口 - 自定義字段

Question

bootstrap 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); 

我想要做這樣的事情的原因是，我希望能夠創建一大堆不同的彈出窗口，只有一部分（如頁腳）可以跨單個的彈出窗口進行更改。 但bootstrap不提供這種可能性。你知道我可以使用的解決方法嗎？

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