[英]How to use popper in octobercms
I'm new here and kind of a beginner, so I hope my questions are not too stupid! 我是这里的新手,还是初学者,所以我希望我的问题不会太愚蠢! I'm currently developing a website using October CMS, and the theme I'm using doesn't have
popper.js
integrated. 我目前正在使用October CMS开发网站,并且所使用的主题没有集成
popper.js
。
I'd like to give my navbar (using Bootstrap) some nice dropdown menus, but I can't make it work. 我想给我的导航栏(使用Bootstrap)一些不错的下拉菜单,但我无法使其正常工作。 After looking around the web, it seems I need
popper.js
to make it work. 在网上浏览后,似乎我需要
popper.js
才能使其正常工作。
My question is this one: 我的问题是这个:
Do you guys know a way to integrate popper.js
to October? 你们知道一种将
popper.js
集成到October的方法吗?
Do I need to create a partial? 我需要创建局部模型吗?
So far I've tried to copy/paste the link to the library at the bottom of the <body>
but it doesn't seem to work. 到目前为止,我已经尝试将链接复制/粘贴到
<body>
底部的库中,但是它似乎不起作用。
Thanks in advance! 提前致谢! Cheers
干杯
m3ssy m3ssy
Edit: 编辑:
Sorry guys, I've been away for the week-end..but thanks so much for your answers. 抱歉,我已经度过了一个周末..但是非常感谢您的回答。 I've tried them all but nothing works!
我已经尝试了所有方法,但无济于事!
Here is the navbar: 这是导航栏:
<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>
And here is the code for the links script in october: 这是十月链接脚本的代码:
<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>
I have to also precise that I'm developping on my localhost! 我还必须精确说明我正在本地主机上进行开发!
Thanks guys! 多谢你们! Cheers
干杯
This is the "include list" for BS4: 这是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>
Also, per BS4 Documentation: 此外,根据BS4文档:
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection.
下拉列表基于第三方库Popper.js构建,该库提供动态定位和视口检测。 Be sure to include popper.min.js before Bootstrap's JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js .
确保在Bootstrap的JavaScript之前包含popper.min.js 或使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js 。 Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
尽管不需要动态定位,但Popper.js并不用于在导航栏中定位下拉列表。
So you can alternatively use: 因此,您也可以使用:
<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>
Refer to the BS4 Starter Template for an example of how these files should be incorporated. 有关如何合并这些文件的示例,请参阅BS4入门模板 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.