Home > Web Front-end > JS Tutorial > How does angular integrate bootstrap4? Method introduction

How does angular integrate bootstrap4? Method introduction

青灯夜游
Release: 2021-02-01 11:47:24
forward
3558 people have browsed it

This article will introduce to you how to integrate bootstrap4 in angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How does angular integrate bootstrap4? Method introduction

Related tutorial recommendations: "angularjs video tutorial", "bootstrap tutorial"

angular integrated bootstrap4

1. Open the terminal and enter the command to create a new angular app

ng new app
Copy after login

2. Integrate bootstrap

Installation ngx-bootstrap and Bootstrap

Open the terminal in the new project and run the following command

npm install ngx-bootstrap bootstrap --save
Copy after login

3. Use bootstrap style

to configure Project: The project must be configured to include Bootstrap CSS to use bootstrap styles.

Add bootstrap style in angular.json: Open the file angular.json from the root directory of the project, find the Style configuration item, and specify the path to bootstrap.min.css. When finished, it should look like this:

"styles": [
              "src/styles.sass",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
Copy after login

Note: When making changes to angular.json, you will need to restart the ng service to pick up the configuration changes.

4. Introduce the ngx-bootstrap module to be used in app.module.ts

Opensrc/app/app.module.ts And add the component module you want to use, such as BsDropdownModule.forRoot().

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})
Copy after login

Which bootstrap component to use specifically, click https://valor-software.com/ngx-bootstrap/#/documentation to view

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of How does angular integrate bootstrap4? Method introduction. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template