内容简介：雖然正式使用 Bootstrap 適合以 Package 安裝，若只是練習測試 Bootstrap，以 CDN 即可，因此可建立 Snippet 快速產生 Starter Template。VS Code 1.33.1Bootstrap 4.3.1
雖然正式使用 Bootstrap 適合以 Package 安裝，若只是練習測試 Bootstrap，以 CDN 即可，因此可建立 Snippet 快速產生 Starter Template。
Version
VS Code 1.33.1
Bootstrap 4.3.1
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<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>
</body>
</html>
將以 Bootstrap 官網的 Starter template 為基礎，在 VS Code 建立 snippet。
VS Code Snippet
在 command palette 輸入 user snippet ，選擇 Preferences: Configure User Snippets 。
html.json
"default Bootstrap 4 Snippet": {
"prefix": "bs4",
"body": [
"<!doctype html>",
"<html lang=\"en\">",
"<head>",
" <!-- Required meta tags -->",
" <meta charset=\"utf-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">",
" <!-- Bootstrap CSS -->",
" <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\">",
" <style type=\"text/css\">",
" $3",
" </style>",
"</head>",
"<body>",
" $2",
"<!-- Optional JavaScript -->",
"<!-- jQuery first, then Popper.js, then Bootstrap JS -->",
"<script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>",
"<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>",
"</body>",
"</html>"
],
"description": "Default Bootstrap 4 Snippet"
}
-
prefix：定義 snippet 名稱，也是我們要在 VS Code 要輸入的文字 -
body：將原本的 startup template 貼到body下，為 array，每一行為 string -
description：輸入 prefix 時，在 VS Code 會顯示的註解
bs4 description body
若沒出現提示，可按 ⌃␣ 強制啟動 trigger suggest，不過 ⌃␣ 會與 macOS 的切換輸入法相衝，可能要從 macOS 關閉，或者改變 trigger suggest 的 shortcut，我個人是關閉 macOS 輸入法，畢竟可以 ⇪ 快速切換，實務上已經用不到 ⌃␣ ，就留給 VS Code 使用吧
VS Code 順利產生 Bootstrap 4 starter tempate，可以此為基礎練習 Bootstrap。
Conclusion
- 一但 workflow 經常出現 copy & paste，就該善用 VS Code 的 snippet，可省下 copy & paste 時間，大幅提高生產力
Reference
以上所述就是小编给大家介绍的《建立 Bootstrap Starter Snippet》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
