bootstrap与Jquery UI 按钮样式冲突的解决办法

参考： http://getbootstrap.com/javascript/

今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover

结果, 弹框的button 就变成这个样子了.

网上查了下, 需要在JS开始的地方 添加两行代码.

bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;

添加完, 刷新页面就正常了

本文介绍到这里，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap实现带关闭按钮功能

    BootStrap实现带关闭按钮功能

    说明 通过使用一个象征关闭的图标,可以让模态框和警告框消失 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • BootStrap中按钮点击后被禁用按钮的最佳实现方法

    Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示． 为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true); // Disables visual

  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景 一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮</title> <link rel=&qu

  • Bootstrap中点击按钮后变灰并显示加载中实例代码

    Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示． 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

  • 第三章之Bootstrap 表格与按钮功能

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果. 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用. 1.基本格式 //实现基本的表格样式 <table class="table"> 注:

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • BootStrap给table表格的每一行添加一个按钮事件

    1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate', title: '操作', width: '80px', events: operateEvents, formatter: operateFormatter } 2.写一个函数 function operateFormatter(value, row, index) { return [ '<input type="submit&qu

  • bootstrap与Jquery UI 按钮样式冲突的解决办法

    bootstrap与Jquery UI 按钮样式冲突的解决办法

    参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了

  • bootstrap和jQuery.Gantt的css冲突 如何解决

    bootstrap和jQuery.Gantt的css冲突 如何解决

    bootstrap是广泛使用的一个前端框架,而jQuery.Gantt在目前也是一个很好用的用于绘制甘特图的插件. 这次在同时使用它们时,发现甘特图显示异常,如图 不加载bootstrap.css,甘特图就不会出问题,很容易就定位出现bootstrap的css冲突问题. 但是要实际定位到具体是哪个样式所导致的却花了一些功夫. 1.先看了甘特图里与bootstrap的重复样式,有一个.row,于是我把gantt插件的row全部修改成了ganttrow,发现没效果. 2.再是看了bootstrap中

  • BootStrap Table 分页后重新搜索问题的解决办法

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot

  • Android ViewPager的事件冲突的解决办法

    Android ViewPager的事件冲突的解决办法 当我昨天做viewpager内图片的滑动时,发现图片没有滑动,反而是viewpager滑动了,后来在网上查了资料,解决的事件冲突的问题. @Override public boolean dispatchTouchEvent(MotionEvent ev) { //处理与Viewpager的事件冲突 if (mCurArrayMode==1){ getParent().requestDisallowInterceptTouchEvent(t

  • IOS中多手势之间的冲突和解决办法

    IOS中多手势之间的冲突和解决办法 UIImageView默认是不支持交互的,也就是userInteractionEnabled=NO ,因此要接收触摸事件(手势识别),必须设置userInteractionEnabled=YES(在iOS中UILabel.UIImageView的userInteractionEnabled默认都是NO,UIButton.UITextField.UIScrollView.UITableView等默认都是YES). 在iOS中,如果一个手势A的识别部分是另一个手势

  • Ubuntu 18.04中截图工具shutter的编辑按钮不可用的解决办法

    Ubuntu 18.04中截图工具shutter的编辑按钮不可用的解决办法

    Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在图片上做一些标记和文字标注等,使用起来很方便.在Ubuntu 16.04上,该软件运行一切正常,当将操作系统升级到18.04之后,启动Shutter后你会发现原先的编辑按钮不可用了.点击编辑按钮,提示说缺少libgoo-canvas-perl库.看来我们不得不手动将该软件所依赖的库装一遍了. 按照以

  • Bootstrap.css与layDate日期选择样式起冲突的解决办法

    Bootstrap.css与layDate日期选择样式起冲突的解决办法

    问题如图: 给大家看下正常的layDate年份选择图片: 一开始想到的,以为是自己没有将layer.css导入,或者layDate.css没有导入,出现的这个问题,结果发现只要导入layer.css,会自动导入layDate.css的,所以问题不在这里. 然后通过火狐浏览器去查看样式,结果问题出在了BootStrap.css上 * {box-sizing:border-box;}重置了浏览器的盒子模型. 在网上搜索了一会,发现很多博客的解决办法是这样的: 是加上以下样式: .laydate_b

  • 关于Bootstrap弹出框无法调用问题的解决办法

    关于Bootstrap弹出框无法调用问题的解决办法

    问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo

  • 加载jQuery后$冲突的解决办法

    加载jQuery后$冲突的解决办法

    网站开发中的javasript部分,现在的开发人员很少有再去手工写document.getElementById()的了吧,那还不得累死,你还真别说,getElementById还真不好写,字母还挺多又区分大小写,一不留神就写错了.因此一下诸如用$来实现document.getElemetnById()就常见了. 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

  • 详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: function getData1(){ var result; $.ajax({ url : 'p.php', async : false, success: functi

随机推荐