如何让Twitter Bootstrap与prototype.js一起使用？

Question

看看这段代码http://jsfiddle.net/u6N6T/3/.手风琴正常工作.

但是在加载prototype.js时会破坏它,请参阅http://jsfiddle.net/jWZBD/8/.

我按照http://api.jquery.com/jQuery.noConflict/来使JQuery与原型一起工作,但即使我将bootstrap.js包装在"jQuery(document).ready(function($)中,手风琴也无法正常工作){});".

是否有人知道在加载原型时使Bootstrap工作的方法？或者我必须将所有现有的基于原型的javascripts转换为JQuery？

Answer 1

有同样的问题.我无法解决它,但我找到了解决方法.

首先,使用$.noConflict()和执行ShaunOReilly说并替换$Bootstrap.js中的所有字符jQuery.但请注意,引导程序在开始时有很多以$命名的变量 - 这些变量不是对jQuery的引用,而是变量名称的一部分.您无需更改它们.我发现,搜索和替换的情况下$.,$(和$)的伎俩.

接下来,不要加载bootstrap-transition插件.如果要在一个脚本中加载完整的lib,则进入并删除转换函数(它位于bootstrap.js v2.3.0顶部).您将丢失过渡动画,但崩溃结构仍然有效.看一下这个小提琴的例子.

这将修复用户交互的切换行为,但自动切换仍将被破坏 - 例如在页面调整大小时显示/隐藏导航菜单.要解决这些问题,只需实现自己的事件监听器并直接调用您需要的任何引导函数.请参阅api以供参考.

例如,为了解决页面调整大小的导航栏问题,我使用了以下代码:

window.onresize = function(event) {
   var nav = jQuery(".collapse");
   if (jQuery(window).width() > 940) nav.collapse('show');
   else nav.collapse('hide');
}