要向Bootstrap 4导航栏添加ngbDropdown,您需要按照以下步骤进行操作:
<!-- 引入Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- 引入ng-bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ng-bootstrap/ng-bootstrap@10.0.0/dist/ng-bootstrap.min.css">
<!-- 引入Angular和ng-bootstrap的依赖 -->
<script src="https://unpkg.com/@angular/core@12.0.0/bundles/core.umd.min.js"></script>
<script src="https://unpkg.com/@angular/common@12.0.0/bundles/common.umd.min.js"></script>
<script src="https://unpkg.com/@angular/forms@12.0.0/bundles/forms.umd.min.js"></script>
<script src="https://unpkg.com/@ng-bootstrap/ng-bootstrap@10.0.0/dist/ng-bootstrap.min.js"></script>
import { Component } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
export class YourComponent {
isDropdownOpen = false;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" (click)="isDropdownOpen = !isDropdownOpen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngbCollapse]="!isDropdownOpen">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" ngbDropdownToggle>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
在上述代码中,我们使用了ngbDropdown指令将<li>
元素标记为一个下拉菜单,并使用ngbDropdownToggle
指令将<a>
元素标记为下拉菜单的触发器。下拉菜单的内容位于<div class="dropdown-menu">
中。
export class YourComponent implements OnInit {
isDropdownOpen = false;
ngOnInit() {
NgbDropdown.init();
}
}
现在,您已经成功向Bootstrap 4导航栏添加了ngbDropdown下拉菜单。当点击下拉菜单的触发器时,下拉菜单将显示或隐藏。
对于腾讯云相关产品和产品介绍链接地址,由于您要求不提及具体品牌商,我无法提供相关链接。但您可以通过访问腾讯云官方网站,搜索相关产品名称,即可找到相应的产品和介绍页面。
领取专属 10元无门槛券
手把手带您无忧上云