有没有办法如何从bootstrap设置popover窗口的样式?
下面的演示:
<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>
答案 0 :(得分:4)
弹出窗口的默认模板是:
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
所以你可以添加一些针对这些元素的CSS。
答案 1 :(得分:1)
添加这些css来改变popover的样式,这是样本
h3.popover-title {
color: green;
background: yellow;
}
.popover-content {
color: blue;
background: green;
font-size: 11px;
}