建立boiler樣板(上)-引入Bootstrap

Posted on April 4, 2019 本文总阅读量次

建立boiler樣板(上)-引入Bootstrap

創建資料夾結構

先新增一個資料夾

再用vscode開啟該資料夾，並建立起資料夾結構
1
2
3
4
5
boiler
|_index.html
|_img
|_css
|_style.css

將index.html與style.css檔做連結

引入bootstrap

CSS

進入bootstrap網站「Get Start」頁面，將CSS stylesheet連結放在<head>的中，放置於所有stylesheet的最上方

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

進入bootstrap網站「Get Start」頁面，將JS的plugin 放在</body>結束前

1
2

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

jQuery

進入jQuery頁面，將最新版本的minified複製放在</body>結束前

<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>