您现在的位置是:首页 >其他 >Integrate Bootstrap into Angular网站首页其他
Integrate Bootstrap into Angular
简介Integrate Bootstrap into Angular
Introduction
How to integrate Bootstrap into Angular project in the visual studio 2022 community.
Environment
- Visual Studio 2022 Community
- Bootstrap 5
Content
Step 1: Create a new "Standalone TypeScript Angular Project" in Visual Studio 2022 Community
I named it BootstrapIntoAngular.
Step 2: install bootstrap into the solution
In the project directory input the below command to install bootstrap5 into the current node_modules directory.
npm install --save bootstrap@5
Step 3: Modify "angular.json" file
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Last step: Example Using Bootstrap, Then Run the Project
Change "app.component.html" likes below
<div class="container text-center">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。