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

創(chuàng)新互聯(lián)建站，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)公司、展示型網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

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)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享標題：angular如何集成bootstrap4-創(chuàng)新互聯(lián)
URL標題：http://weahome.cn/article/dghhop.html