安裝BS修改特定樣式


Posted by hoyi-23 on 2021-05-29

BS安裝方法

使用npm

  1. 創建項目資料夾 BS5
  2. 開啟裝端機進入資料夾 (終端機語法 cd 前往)
  3. 輸入指令 npm i bootstrap
    ### 進入官網下載
  4. 進入下載網址
  5. 選擇下載原始碼 並 解壓縮
  6. 將裡面的 SCSS 資料夾移入專案資料夾使用

這裡要下載的不是 css 檔案而是 scss 檔案(要使用 scss 才能客製化編輯修改 bootstrap 的樣式),不要下載編譯完成的 css 檔與 JS 檔

補充: 載入至專案

CDN使用

可以使用CDN載入,載入的順序CSS放在內,JS放在最後面(結束前),讓網頁載入時畫面的樣式可以先出來在有互效果。

安裝後載入專案

可以將BS全部匯入到all.scss

@import 'bootstrap.scss'

也可以只匯入需要的: _variable.scss/_function.scss/_mixins.scss
這三個檔案幾乎都需要

簡單開發順序

project/
    -- index.html
    -- scss/
        -- all.scss (載入BS或自行開發的模組庫custom.scss)
        -- bootstrap/
        -- _custom.scss

修改樣式

找到bs內的scss/_variable.scss 裡面有BS使用的變數。
可以依照自己的需求修改。


#Bootstrap #bs客製化







Related Posts

[Week4] JS 實作串接 API(三)

[Week4] JS 實作串接 API(三)

MTR04_1101

MTR04_1101

[第九週] PHP 與 MySQL 的互動:新增資料

[第九週] PHP 與 MySQL 的互動:新增資料


Comments