Bootstrap弹出窗口样式

有没有办法如何从boostrap设置弹出窗口的样式？下面
DEMO：Bootstrap弹出窗口样式

<body> 
<script> $(function() { $('[data-toggle="popover"]').popover() }) </script> 
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="This should be styled">Button</button> 
</body>

http://fiddle.jshell.net/97tmrqf0/1/

我想做的事：作出这样的弹出窗口有这样的HTML：

<div class="col-sm-3 col-md-3"> 
    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> 
      </span>Výbava vozidla</span> 
     </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
     <ul class="list-group"> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>LOKÁTOR/KAMERA</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>SPORTOVNÍ SEDADLA</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>ALARM</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>UPEVN DĚT-SEDAČKY</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>TAŽNÉ ZAŘÍZENÍ ODNÍM</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>SPORTOVNÍ DIFERENC</li> 
      <li class="list-group-item"><span class="glyphicon glyphicon-ok text-success"></span>DISKY 8,5 J X 18 ALU</li> 
     </ul> 
     </div> 
    </div>       
    </div> 
</div>

来源

2015-01-14 Andurit

的酥料饼的默认模板为：

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

所以你可以添加一些CSS来定位这些元素。

来源：http://getbootstrap.com/javascript/#popovers

来源

2015-01-14 14:15:12 dan

那么，有没有办法如何使给它的HTML我的问题？ :) – Andurit

@Andurit如果将html选项设置为true，则内容将作为HTML插入而不是文本。您可以将其与模板选项结合使用来编辑整个模板。请参阅链接的文档以获取完整的选项列表。 – dan

感谢您的帮助，它现在可以工作 – Andurit

添加这些CSS来改变酥料饼的风格，这是样品

h3.popover-title { 
color: green; 
background: yellow; 
} 
.popover-content { 
color: blue; 
background: green; 
font-size: 11px; 
}

http://fiddle.jshell.net/97tmrqf0/2/

来源

2015-01-14 14:18:19

嘿，感谢评论，但你的演示链接是我的：P – Andurit

对不起，请检查这个http://fiddle.jshell.net/97tmrqf0/2/可以吗？ –

酷我看到你可以很容易地编辑CSS，但有没有办法编辑HTML以及？顺便说一句！ – Andurit

Bootstrap弹出窗口样式

回答

相关问题