angular如何集成bootstrap4

發(fā)布時間：2020-11-30 12:35:30 來源：億速云閱讀：158 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)angular如何集成bootstrap4的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

angular集成bootstrap4

1、打開終端，輸入命令新建一個angular app

ng new app

2、集成bootstrap

安裝ngx-bootstrap 和 Bootstrap

在新建的項目中打開終端，運行如下命令

npm install ngx-bootstrap bootstrap --save

3、使用bootstrap樣式

配置項目：必須將項目其配置為包括Bootstrap CSS，才能使用bootstrap的樣式。

在angular.json中增加bootstrap的樣式：從項目的根目錄打開文件angular.json，找到Style配置項，指定bootstrap.min.css的路徑。完成后，它應(yīng)如下所示：

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

注意：對angular.json進行更改時，您將需要重新啟動ng服務(wù)以獲取配置更改。

4、在app.module.ts中引入要使用的ngx-bootstrap module

打開src/app/app.module.ts 并添加想要使用的組件module，例如BsDropdownModule.forRoot()。

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

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

感謝各位的閱讀！關(guān)于angular如何集成bootstrap4就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

猜你喜歡