如何在10月CMS中使用Popper

Question

我是这里的新手，还是初学者，所以我希望我的问题不会太愚蠢！ 我目前正在使用October CMS开发网站，并且所使用的主题没有集成popper.js 。

我想给我的导航栏（使用Bootstrap）一些不错的下拉菜单，但我无法使其正常工作。 在网上浏览后，似乎我需要popper.js才能使其正常工作。

我的问题是这个：

你们知道一种将popper.js集成到October的方法吗？

我需要创建局部模型吗？

到目前为止，我已经尝试将链接复制/粘贴到<body>底部的库中，但是它似乎不起作用。

提前致谢！ 干杯

m3ssy

编辑：

抱歉，我已经度过了一个周末..但是非常感谢您的回答。 我已经尝试了所有方法，但无济于事！

这是导航栏：

<nav id="nav" class="navbar navbar-nav">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="{{ 'home'|page }}">Home</a></li>
        <li class="nav-item dropdown"><a href="{{ 'dirigent'|page }}"     id="navbarDropdown" class="{% if this.page.id == 'dirigent' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Dirigent</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Something</a>
          </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'chor'|page }}" class="{% if this.page.id == 'chor' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Chor</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'media'|page }}" class="{% if this.page.id == 'media' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Media</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item"><a href="{{ 'termine'|page }}" class="{% if this.page.id == 'termine' %}active{% endif %}">Termine</a></li>
</ul>

这是十月链接脚本的代码：

<script src="{{ ['assets/js/jquery.min.js','assets/js/jquery.scrollex.min.js', 'assets/js/jquery.scrolly.min.js', 'assets/js/skel.min.js', 'assets/js/util.js', 'assets/js/main.js', 'assets/js/popper.min.js', 'assets/js/bootstrap.bundle.min.js'] |theme}}"></script>

我还必须精确说明我正在本地主机上进行开发！

多谢你们！ 干杯

Answer 1

这是BS4的“包括列表”：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

此外，根据BS4文档：

下拉列表基于第三方库Popper.js构建，该库提供动态定位和视口检测。 确保在Bootstrap的JavaScript之前包含popper.min.js 或使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js 。 尽管不需要动态定位，但Popper.js并不用于在导航栏中定位下拉列表。

因此，您也可以使用：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

有关如何合并这些文件的示例，请参阅BS4入门模板。

如何在10月CMS中使用Popper

问题描述

1 个解决方案

解决方案1
0 2018-07-12 17:44:42

如何在10月CMS中使用Popper

问题描述

1 个解决方案

解决方案1 0 2018-07-12 17:44:42

解决方案1
0 2018-07-12 17:44:42