下面是使用Angular项目中的三种解决方案的代码示例。

1. 使用Bootstrap：

安装Bootstrap：

npm install bootstrap

在angular.json文件中引入Bootstrap样式：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
]

在组件中使用Bootstrap的样式和组件：

  
Using Bootstrap in Angular
  Click me

2. 使用Angular Material和Angular Flex Layout：

安装Angular Material和Angular Flex Layout：

npm install @angular/material @angular/cdk @angular/flex-layout

在app.module.ts中引入Angular Material和Angular Flex Layout模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    FlexLayoutModule
  ],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

在组件中使用Angular Material的样式和组件：

  
    Using Angular Material in Angular
  
  
    Click me
  

3. 使用纯CSS/JS：

在组件的CSS文件中编写自定义的样式：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

在组件的HTML文件中使用自定义的样式：

  
Using Custom CSS/JS in Angular
  Click me

这些示例展示了在Angular项目中使用Bootstrap、Angular Material和纯CSS/JS的不同方法。你可以根据自己的项目需求选择适合的解决方案。