我是这里的新手,还是个初学者,所以我希望我的问题不会太愚蠢!
我当前正在使用October CMS开发一个网站,并且所使用的主题未集成popper.js
。
我想给我的导航栏(使用Bootstrap)一些不错的下拉菜单,但是我无法使其正常工作。在网上浏览后,看来我需要popper.js
才能使其正常工作。
我的问题是这个:
你们知道一种将popper.js
整合到十月的方法吗?
我需要创建局部模型吗?
到目前为止,我已经尝试将链接复制/粘贴到<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>
我还必须精确说明我在本地主机上进行开发!
谢谢大家! 干杯
答案 0 :(得分:0)
这是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或使用 bootstrap.bundle.min.js / bootstrap.bundle.js包含 Popper.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 Starter Template。