What is ngx bootstrap

WBOY
Release: 2022-08-01 18:07:34
Original
2898 people have browsed it

"ngx-bootstrap" is a UI framework for Angular. It is the best way for Angular to quickly inherit bootstrap3 or bootstrap4 components, which can effectively improve development efficiency; you can use "npm install ngx-bootstrap --save "command to install "ngx-bootstrap".

What is ngx bootstrap

The operating environment of this tutorial: Windows10 system, bootstrap5 version, DELL G3 computer

ngx What is bootstrap

ngx- bootstrap is a UI framework for Angular and is the best way for Angular to quickly integrate Bootstrap 3 or Bootstrap 4 components. ngx-bootstrap can improve development efficiency.

What is used here is @angular/cli 8.2.5, with bootstrap4

1. Install ngx-bootstrap

----In the project Open the cmd console in the directory and enter

----Use "--save" to write dependencies

npm install ngx-bootstrap  --save
// 也可以用国内的淘宝镜像快速安装
cnpm install ngx-bootstrap --save
Copy after login

2. Introduce the corresponding css into the project

Add the corresponding path to the styles global style in the angualr.json file

 "styles": [
              "../node_modules/bootstrap/scss/bootstrap"
            ],
Copy after login

3. Import dependencies

After introducing the global css style, you want to use the corresponding Components also need to import relevant dependencies in the corresponding module to use them normally

Introduce the folding component and tab component here

First introduce the component in the head

import {CollapseModule, TabsModule} from 'ngx-bootstrap';
Copy after login

Secondly need Declare

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

in the imports in @NgModule and then you can use it

Related recommendations: bootstrap tutorial

The above is the detailed content of What is ngx bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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