[英]Bootstrap 5 dropdown not working on angular 12
I'm trying to add bootstrap5 drop down in Angular12 it's not working.我正在尝试在 Angular12 中添加 bootstrap5 下拉菜单,但它不起作用。
I have installed all the necessary packages, added them in the angular.json
file.我已经安装了所有必需的包,并将它们添加到
angular.json
文件中。
Copied the exact example from bootstrap5 docs still not working.从 bootstrap5 文档中复制了确切的示例仍然无法正常工作。
In angular.json
i have given在
angular.json
我已经给出
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Below is my html code (same as in bootstrap 5 docs)下面是我的 html 代码(与 bootstrap 5 文档中的相同)
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-
bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
I used the command npm i to install the packages without mentioning any version name so I guess the latest version was installed.我使用命令 npm i 来安装软件包而没有提及任何版本名称,所以我猜已经安装了最新版本。 Installed jquery as the last resort read somewhere bootstrap 5 don`t require jquery.
安装 jquery 作为最后的手段在某处读取引导程序 5 不需要 jquery。 Any help is greatly appreciated.
任何帮助是极大的赞赏。
According to Bootstrap 5 (Separate section) , Bootstrap 5 requires @popperjs/core but not popperjs .根据Bootstrap 5 (Separate section) ,Bootstrap 5需要 @popperjs/core但不需要 popperjs 。 Hence you were installing and importing wrong library.
因此,您正在安装和导入错误的库。
FYI, Bootstrap 5 removed dependency on jQuery .仅供参考,Bootstrap 5 删除了对 jQuery 的依赖。
@popperjs/core
via npm@popperjs/core
npm install @popperjs/core
@popperjs/core
into angular.json.@popperjs/core
导入 angular.json。 Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins. angular.json
angular.json
"scripts": [
"./node_modules/@popperjs/core/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Bootstrap bundle include Popper for our tooltips and popovers. Bootstrap 包包括用于我们的工具提示和弹出框的 Popper。 Hence you no need to install
@popperjs/core
separately.因此您无需单独安装
@popperjs/core
。
angular.json
angular.json
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Angular Bootstrap Dropdown is another option which makes Bootstrap works in Angular App. Angular Bootstrap Dropdown是另一个选项,它使 Bootstrap 在 Angular App 中工作。
npm install @ng-bootstrap/ng-bootstrap
NgbModule
into app.module.ts imports section .NgbModule
添加到app.module.ts 导入部分。import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [.., NgbModule]
})
<div ngbDropdown class="dropdown">
<button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false">
Dropdown button
</button>
<ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
<li><a ngbDropdownItem href="#">Action</a></li>
<li><a ngbDropdownItem href="#">Another action</a></li>
<li><a ngbDropdownItem href="#">Something else here</a></li>
</ul>
</div>
Add data-bs-toggle="dropdown"
to a link or button to toggle a dropdown将
data-bs-toggle="dropdown"
到链接或按钮以切换下拉列表
See the bootstrap documentation to more information.有关更多信息,请参阅引导程序文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.