大佬教程收集整理的这篇文章主要介绍了angularjs – Bootstrap UI:如何更改popover的背景颜色,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当我将相同的方法应用于Bootstrap UI popover时,它只@L_673_4@一个很小的空白弹出窗口.到目前为止,我所做的就是改变
<a class="btn btn-priMary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>
至
<a class="btn btn-priMary popover-container" popover-placement="right" popover-template="'partials/loglevel-template.html'" popover-trigger="click">Log level</a>
日志等级,template.html
<div class="popover1"> <div class="arrow"></div> <div class="popover-content"> <p>some content</p> </div> </div>
当我删除它运行的popover1类时,所以没有功能问题只是让弹出窗口@L_673_4@.
我更喜欢使用Bootstrap UI popovers,因为你不必在jQuery中使用任何硬编码模板tomfoolery(事实上你根本不需要编写任何jQuery).我只是无法弄清楚如何更改Bootstrap UI popovers的背景颜色.在我走下兔洞之前,我想知道是否有其他人已经实现了这一点,或者是否有一个简单的修复(也许Bootstrap UI popovers使用一组不同于vanilla popovers的类).如果这是一个覆盖一些CSS类的问题,那将是梦想.
angular.module('ui.bootstrap.demo',['ngAnimate','ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl',function ($scope,$scE) { $scope.dynamicPopover = { content: 'Hello,World!',templateUrl: 'myPopoverTemplate.html',title: 'title' }; });
.trigger-popover-button { margin: 25% 0 0 10%; } .custom-dynamic-popover-class { color: red; } .custom-dynamic-popover-class > .popover-inner > .popover-title { BACkground: yellow; } .custom-dynamic-popover-class > .popover-inner > .popover-content { BACkground: blue; }
<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="PopoverDemoCtrl"> <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.titlE}}" popover-class="custom-dynamic-popover-class" type="button" class="btn btn-default trigger-popover-button"> Popover With Template </button> <script type="text/ng-template" id="myPopoverTemplate.html"> <div>{{dynamicPopover.content}}</div> <div class="form-group"> <label>Popup title:</label> <input type="text" ng-model="dynamicPopover.title" class="form-control"> </div> </script> </div> </body> </html>
以上是大佬教程为你收集整理的angularjs – Bootstrap UI:如何更改popover的背景颜色全部内容,希望文章能够帮你解决angularjs – Bootstrap UI:如何更改popover的背景颜色所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。