如何对Popover Twitter Bootstrap进行样式设计

Question

我有4-5种不同的爆米花。如何为每个弹出框设置自己的样式。如果每个波波夫有不同的宽度？有可能吗？当我设置宽度:200 of时，所有的弹出窗口都有类.popover。他们都变成了200 or .I不知道如何给他们不同的宽度或高度，请有什么想法

Answer 1

您可以通过向您希望以不同样式设计的元素添加一个额外的类来实现对弹出的自定义，例如：

<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特异性是值得的，所以您可以很好地理解哪些CSS规则会占上风。

本例所需的规则仅在popover和popover-wide存在时应用，我们通过将它们与.连接来实现这一点。

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

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

使用id可以达到同样的效果，但是使用类更好，因为它们是可重用的(id属性在文档中必须是唯一的)。为描述它们的用途的类选择有用的名称也是很好的形式，所以您可以选择将它们称为popover-intrusive或popover-subtle，但这是很好的和主观的:)