angular怎麼整合bootstrap4？方法介紹

本篇文章給大家介紹一下angular中整合bootstrap4的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

相關教學推薦：《》、《》

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的路徑。完成後，它應如下所示：

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

注意：對angular.json進行更改時，您將需要重新啟動ng服務以獲取設定更改。

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(), ... ],
    ...
})

具體使用哪個bootstrap元件，點選https://valor-software.com/ngx-bootstrap/#/documentation檢視

更多程式設計相關知識，請存取：！！

以上就是angular怎麼整合bootstrap4？方法介紹的詳細內容，更多請關注TW511.COM其它相關文章！