1. 程式人生 > >angular6學習(四):引入bootstrap樣式框架

angular6學習(四):引入bootstrap樣式框架

兩種方法:

第一種:引用連結

1、 在index.html中新增bootstrap引用連結

bootstrap連結地址可在官網複製:官網

引用的連結參考如下(新版本無效果,建議用下面這個測試學習)

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">


2、開啟app.component.html 新增css樣式  點此複製按鈕樣式


顯示如下:


第二種方法:安裝bootstrap框架

 1、在webstorm中用快捷方式:Alt+F12調出控制檯

     輸入:    npm i bootstrap -s  

安裝bootstrap框架


安裝成功後找到安裝目錄:


將目錄下的 ../node_modules/bootstrap/dist/css/bootstrap.min.css 新增到專案的angular.json檔案的styles中


2.同第一種的步驟2

第二種方法在新增到專案的angular.json檔案的styles中注意事項:

    1. 安裝位置是在專案中安裝,所以引用時加一個   .   即可

    2.要重新啟動服務才能生效