Angular中使用bootstrap樣式

2022-09-02 15:24:10 字數 1491 閱讀 5259

方法1：在angular.json中的styles陣列中新增bootstrap路徑

如下所示：

"styles": [


"src/styles.css",


"./node_modules/bootstrap/dist/css/bootstrap.min.css"


]
這裡需要注意路徑問題，不同angular版本下，angular.json的位置可能有所不同，因此對應的路徑也有可能需要作出修改。

方法2:通過在styles.css中使用@import進行引入。

由於styles.css是整個專案的全域性樣式，因此可以在這裡通過@import直接引入，也能夠全域性生效，這裡同樣需要注意路徑問題。

路徑中不需要帶node_modules

@import  url('bootstrap/dist/css/bootstrap.min.css')
在進行angular開發時，使用了bootstrap樣式。發現bootstrap的樣式無法生效。引用方式如下：

在angular.json中修改styles陣列，

"styles": [


"src/styles.css",


"./node_modules/bootstrap/dist/css/bootstrap.min.css"


]
仔細檢查路徑後發現沒有問題，但是樣式總是無法生效。檢視控制台發現元素沒有bootstrap的樣式。說明bootstrap沒有生效。然後在node_module中查詢發現存在兩個跟bootstrap相關的檔案，其中乙個是我們引用的bootstrap，另外乙個是帶下劃線和@版本的bootstrap。

[email protected]@bootstrap/dist/css/bootstrap.min.css
這個檔案裡面具有各種css樣式設定。因此，我們嘗試了將這個檔案進行了引入。

"styles": [


"src/styles.css",


"./node_modules/[email protected]@bootstrap/dist/css/bootstrap.min.css"


]
最後發現bootstrap樣式果然生效了。通過在網上查詢發現：原來使用**的cnpm進行模組安裝時，最終帶下劃線帶@符號的才是模組檔案，其他的資料夾只是模組檔案的快捷方式。所以我們如果要引用第三方模組，必須引入帶下劃線的模組，而不能使用快捷方式。

參考文章：

angular6使用angular-cli構建專案，引用bootstrap樣式無效

在angular中使用webWorker

1 html中webworker 開始工作 停止工作 注意 internet explorer 9 及更早 ie 版本瀏覽器不支援 web workers.clock worker.js function 返回月 function getmonth date 返回天 function getday ...

angular專案中使用jQuery增加和刪除行

說明 引入angular.min.js和jquery.min.js的靜態資源庫，實現列表內容的增加和刪除操作。html 商 物料名稱 規格型號 angularjs scope.data 資料 初始化 行標 rowindex scope.data.length 1 繫結增行 add unbind bi...

Angular6中使用primeNG UI框架

第一步 使用ng new project ng new primengproject 1第二步 可以執行一下是否成功 ng s 1第三步 安裝primeng npm install primeng 1第四步 安裝font awesome 乙個圖示字型庫和css框架 npm install font ...