mcpField
A
angular-bootstrap

angular-bootstrap

github.com/oguzhan18设计与 UI7204 次安装30 周前更新
代码仓库

关于 angular-bootstrap

这是使用 ng-bootstrap 与 Angular 的技能指南，涵盖版本变更和设置方式，帮助 Angular 开发者使用 Bootstrap 5 组件，包括独立组件导入及常见界面组件。

主要功能

  1. 01说明 ng-bootstrap 17.x 变更
  2. 02介绍 Bootstrap 5 集成
  3. 03展示独立组件导入方式
  4. 04提供安装与样式配置指导
  5. 05演示常见界面组件

适用场景

  1. 01在 Angular 项目中配置 ng-bootstrap
  2. 02向独立组件添加轮播图
  3. 03实现模态框、下拉菜单或日期选择器

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-bootstrap

安装后在 Claude Code 中输入/angular-bootstrap确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

ng-bootstrap / Angular Bootstrap

**版本：**ng-bootstrap 17.x（2025） **标签：**Bootstrap、UI 组件、ng-bootstrap

参考：ng-bootstrap • GitHub

API 变更

本节记录近期特定版本的 API 变更。

  • 新增：支持 Bootstrap 5 — 完整集成 Bootstrap 5

  • 新增：独立组件 — 所有组件均为独立组件

  • 新增：支持 Bootstrap 图标 — 图标集成

  • 新增：支持 Angular 17+ — 与现代 Angular 完全兼容

最佳实践

  • 安装 ng-bootstrap
npm install @ng-bootstrap/ng-bootstrap @popperjs/core bootstrap
  • 在 angular.json 中导入样式
{
  "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
}
  • 导入 NgbModule
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule]
})
export class AppModule {}
  • 使用独立导入
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  standalone: true,
  imports: [NgbCarouselModule],
  // ...
})
export class CarouselComponent {}
  • 使用 Modal
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({})
export class ModalComponent {
  constructor(private modalService: NgbModal) {}

  open(content: TemplateRef<any>) {
    this.modalService.open(content);
  }
}
  • 使用 Dropdown
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <div ngbDropdown>
      <button ngbDropdownToggle>Menu</button>
      <div ngbDropdownMenu>
        <button ngbDropdownItem>Action</button>
      </div>
    </div>
  `
})
export class DropdownComponent {}
  • 使用 Accordion
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <ngb-accordion>
      <ngb-panel title="First">
        <ng-template ngbPanelContent>Content 1</ng-template>
      </ngb-panel>
    </ngb-accordion>
  `
})
export class AccordionComponent {}
  • 使用 Datepicker
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <ngb-datepicker [(ngModel)]="date"></ngb-datepicker>
  `
})
export class DatePickerComponent {
  date: NgbDateStruct;
}
  • 使用 Toast
import { NgbToast } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    @for (toast of toasts; track toast) {
      <ngb-toast>{{ toast }}</ngb-toast>
    }
  `
})
export class ToastComponent {}
  • 使用 Typeahead
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <input ngbTypeahead [ngModel]="value" [source]="search" />
  `
})
export class TypeaheadComponent {
  search = (text$: Observable<string>) => 
    text$.pipe(debounceTime(200), distinctUntilChanged());
}

评论

支持 Markdown