Twitter 引导菜单不起作用答案

【问题标题】：Twitter-Bootstrap Menu Not WorkingTwitter 引导菜单不起作用
【发布时间】：2013-04-12 17:52:19
【问题描述】：

我第一次尝试使用 Twitter-Bootstrap 在 Joomla 3.0 中编写自定义模板。

[edit]删除了网站链接[/edit]

我所做的就是让模板的菜单正常工作。仅限首页。请忘记内页。

我认为这是因为模板似乎无法访问 javascript 文件。

在调整窗口大小时让模板菜单正常工作的任何建议将不胜感激。

我试过用这个：

    <?php
    defined('_JEXEC') or die;
    $doc = JFactory::getDocument();
    $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/jquery.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-transition.js',   'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-alert.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-modal.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-dropdown.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-scrollspy.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-tab.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-tooltip.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-popover.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-button.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-collapse.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-carousel.js', 'text/javascript');
    $doc->addScript('/templates/' . $this->template . '/js/bootstrap-typeahead.js', 'text/javascript');
    ?>

我已经试过了：

<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-transition.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-alert.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-modal.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-dropdown.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-scrollspy.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-tab.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-tooltip.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-popover.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-button.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-collapse.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-carousel.js" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-typeahead.js" />

【问题讨论】：

标签： twitter-bootstrap joomla

【解决方案1】：

有一个错误，你可以在 chrome/firefox 控制台中看到

Uncaught ReferenceError: jQuery is not defined

您可能没有包含 jquery。

还有

<link href="....

适用于 CSS 而不是 Javascript

【讨论】：

我确实包含了 jQuery。看看上面的例子。它在两者中。问题是它没有读取 javascript 文件，我认为。我不知道如何让它阅读它。
用
根据您的编辑，好的，它适用于 css。那么看第一个例子。那是为javascript，我想。这也行不通。以正确的方式包含 javascripts 文件以便模板读取它的正确方法是什么？
你的意思是这样的：
@davidkonrad - 不用担心。现在我的 js 文件正在被读取，我很高兴。 =）无论如何，我明白了......但我们基本上都在同一条船上。这就是我如此喜欢堆栈溢出的原因之一……我觉得我几乎总是可以在这里提问。请注意，并非总是如此。 =) b/c 有时我很害羞，不敢问我觉得我应该已经理解的问题。真的，如果我不问我的问题，一天结束时唯一受到影响的人就是我。所以……耸了耸肩。希望你剩下的时间会更好。 =)

【解决方案2】：

鉴于您使用的是 Joomla 3.0，加载 Bootstrap 框架的最佳方式如下：

JHtml::_('bootstrap.framework');

它使用更少的代码行，使用 Joomla 3.0 编码标准，并确保 jQuery 在 noConflict 模式下加载。

【讨论】：

你的意思是这样的：
@oyvey - 是的。添加它的最佳位置是模板文件夹中的 index.php ;)
而且我根本不需要包含 jquery 文件？或者它只是确保我在模板中的任何 jquery 文件都不会发生冲突？
我明白了！这意味着我的 jquery 文件包含是多余的！包括该声明还有什么意思？希望你不介意我问。
我基本上加载了 Bootstrap 框架（所有文件）和 jQuery 框架，这样您就不必单独导入每一个。它还以 noConflict 模式加载 jQuery，这样它就不会与其他库或扩展发生冲突，方法是将 $. 替换为 jQuery.