内容简介：雖然正式使用 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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
经济学原理(第7版):微观经济学分册+宏观经济学分册(套装共2册)
曼昆 (N.Gregory Mankiw) / 梁小民、梁砾 / 北京大学出版社 / 2015-5-1 / 128
《经济学原理（第7版）：微观经济学分册+宏观经济学分册》是目前国内市场上最受欢迎的引进版经济学教材之一，其最大特点是它的“学生导向”，它更多地强调经济学原理的应用和政策分析，而非经济学模型。第7版在延续该书一贯风格的同时，对第6版作了全面修订和改进。大幅更新了“新闻摘录”“案例研究”等专栏，拓展了章后习题。一起来看看 《经济学原理(第7版):微观经济学分册+宏观经济学分册(套装共2册)》 这本书的介绍吧!
