介紹
在學完了sass語法之後我們可以正式開始學習bootstrap-4.0的源碼啦，還不熟悉sass的讀者可以查看我的sass專題呀。
在學習bootstrap之前我們也是一樣需要下載bootstrap的源碼，讀者可以點擊鏈接下載,下載完成之後同樣需要導入webstrom中。
如果還不知道如何安裝sass與webstorm的讀者也可以點擊Sass開發環境安裝進行查看並安裝。
初次嘗試
在完成了環境安裝之後，可以編寫如下的test.html
<!doctype html>
<html lang="zh-cn">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS 此處引入本地sass源碼編譯後的css -->
<link rel="stylesheet" href="./bootstrap-4.0.0/scss/bootstrap.css">
<title>Bootstrap初探</title>
</head>
<body>
<div class="container">
<div class="alert alert-primary" role="alert">
這是個測試
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
此處需要特別說明的是我們引入bootstrap.css是我們編譯bootstrap-4.0.0源碼後產生的本地css
接下來我們修改一下bootstrap源碼目錄scss/_variables.scss第37行的
$blue: #007bff !default;變爲$blue: #06fff6 !default;
等待新的css文件編譯完成後重新刷新頁面我們發現原先的頁面發生了變化
至此我們已經初次對bootstrap進行了自己的定製化，接下來我們會針對bootstrap的css內容進行學習，明白它爲什麼可以實現響應式，爲什麼可以方便的定製化。
總結
- 需要安裝配置sass編譯環境，webstorm編輯工具；
- 需要bootstrap-4.0源碼；
- 初次對源碼進行修改，定製化bootstrap-4.0；
- 該文章所有內容可點擊鏈接查看。