如何款式Popover Twitter Bootstrap

Question

我有4-5不同的彈出。如何爲每個popover設置自己的樣式。如果每個Popover有不同的寬度？可能嗎 ？ 當我設置例如寬度：200px時，所有popovers都有類.popover。他們都成爲200個像素。我不知道如何給他們不同的寬度或高度的任何想法，請

Answer 1

您可以通過添加額外的類來你想要的風格不同的元素，如實現popovers的定製：

<div class="popover"> 
    Normal popover 
</div> 
<div class="popover popover-wide"> 
    Wide popover 
</div> 
<div class="popover popover-extra-wide"> 
    This is a very wide popover 
</div> 

然後，您可以創建提供這些屬性的CSS樣式。值得花一些時間看看CSS specificity，所以你很清楚哪些CSS規則會勝出。

我們希望這個例子中的規則是，當popover和popover-wide都存在，這是我們通過與.加入他們實現只適用：

.popover.popover-wide { 
    width: 250px; 
} 

.popover.popover-extra-wide { 
    width: 400px; 
} 

你可以使用的ID達到同樣的效果，但使用類是更好的形式，因爲它們是可重用的（id屬性在文檔中必須是唯一的）。選擇用於描述用途的類的有用名稱也是一種很好的形式，因此您可以選擇將它們稱爲popover-intrusive或popover-subtle，但這很好且主觀:)