Bootstrap popover风格

时间:2015-01-14 14:12:16

标签: javascript jquery css twitter-bootstrap

有没有办法如何从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>

2 个答案:

答案 0 :(得分:4)

弹出窗口的默认模板是:

<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

答案 1 :(得分:1)

添加这些css来改变popover的样式,这是样本

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

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