And*_*rit 2 javascript css jquery twitter-bootstrap
有没有办法如何从 boostrap 设置弹出窗口的样式?
演示如下:
<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>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
弹出框的默认模板是:
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
所以你可以添加一些针对这些元素的 CSS。
来源:http : //getbootstrap.com/javascript/#popovers
| 归档时间: |
|
| 查看次数: |
4111 次 |
| 最近记录: |