Step1. 獲取Bootstrap源代碼
1 https://github.com/twbs/bootstrap
Step2. 進入目錄并切換npm源
1 npm --registry https://registry.npm.taobao.org // 淘寶鏡像 2 npm config get registry // 查看當前鏡像
換源是為了避免天朝防火墻及網速等導致部分資源無法成功下載，例如hugo可能就一直卡住，最后出現問題：
1 npm ERR! [email protected] docs-build: `hugo --cleanDestinationDir`
安裝完成后，再安裝Ruby[我安裝的是Ruby+Devkit 2.6.5-1(*64)]，安裝Ruby的原因是運行scss需要Ruby環境~
Step3. 安裝Ruby
下載地址：https://rubyinstaller.org/downloads/
右邊英文我翻譯下：
1 要下載哪個版本？ 2 如果您不知道要安裝哪個版本，并且開始使用Ruby，建議您使用Ruby + Devkit 2.6.X（x64）安裝程式，它提供了最多數量的兼容gem，并與Ruby一起安裝了MSYS2-Devkit，因此可以立即編譯具有C擴展名的gem，僅當必須使用自定義32位本機DLL或COM物件時，才建議使用32位（x86）版本，
然后安裝：
不要問我下面那個895M的要不要勾，也不要去百度勾不勾，勾就完事了，反正公司電腦記憶體大~，不選可能導致以后少這少那的 
，又不能保證以后會不會出現缺少包等問題，出了問題又得去百度，百度又不一定能很快找到答案，就是勾 
安裝Ruby后，會出現一個黑窗：
繼續翻譯下：
1 Which components shall be installed? If unsure press ENTER [] 2 應安裝哪些組件？如果不確定，請按ENTER[]
個人建議繼續按回車，反正公司電腦記憶體大~，不選可能導致以后少這少那的
然后可以摸會魚，需要點時間 
，安裝完成后也會出現這行提示，回車就正式安裝完成了，黑視窗自動關閉
Step4. 進入專案目錄安裝捆綁機
1 gem install bundler 2 bundle install
這個我也不知道為什么要安裝，檔案上這么寫的: https://www.php.cn/manual/view/34065.html 
然后運行到一半就掛了 ，此時原因是防火墻~，
出錯：(找不到Gemfile檔案)
1 Could not locate Gemfile
解決：(重新生成一個Gemfile檔案)
1 bundle -h 2 bundle init
Step5. OK
此時可以運行package.json里的各種命令了 
，先試下github bootstrap第二個命令【測驗】，試下能不能正常運行：
1 npm run test
此時一片代碼嘩啦啦的往上飄
運行結果：
Java is missing是不是似曾相識 ，我繼續翻譯下：
1 正在跳過vnu jar測驗；缺少Java， 2 在4.708秒內成功掃描了481個鏈接，
缺少Java環境，還是老老實實敲代碼吧~
1 npm start // 這次摸著良心和你說絕對有用！
ok了，現在可以在編譯運行敲代碼了， // 看著我的表情~
先在\scss\_nav.scss試試：將paddind-left改成9990px，然后保存
接著下面又是一片代碼飄過~，然后去dist/css/bootstrap.css里面看下有沒有變化：(記得ctrl+f查找nav)
完成，搞定~ 
(這表情絕對絕對沒惡意，，)
.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/24929.html
標籤：HTML5
上一篇：2020前端最新面試知識點匯總
下一篇：HTML 常用標簽