我正在寻找参考或某种方式在Angular 5中制作响应式 Navbar ,如果有必要使用 Bootstrap ,这是最好的方法或者有任何选择不要使用Bootstrap。
附图示例:
现在我正在使用标签,但如果有必要,我愿意改变:
<mat-toolbar role="heading" aria-label="navigation">
<mat-toolbar-row>
<h1 class="mat-display-1">{{ title }}</h1>
<span class="fill-remaining-space"></span>
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<!-- Mobile Button Nav -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="fa fa-bars fa-lg"></span>
</button>
<span class="fill-remaining-space"></span>
</mat-toolbar-row>
</mat-toolbar>
答案 0 :(得分:1)
您可以使用Angular Material中的工具栏,该工具栏包含工具栏组件(https://material.angular.io/components/toolbar/overview)
要使您的网站(包括工具栏)响应,请使用Flex布局库https://github.com/angular/flex-layout/wiki