内容简介：雖然正式使用 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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
白帽子讲Web安全
吴翰清 / 电子工业出版社 / 2012-3 / 69.00元
《白帽子讲Web安全》内容简介：在互联网时代，数据安全与个人隐私受到了前所未有的挑战，各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据？《白帽子讲Web安全》将带你走进Web安全的世界，让你了解Web安全的方方面面。黑客不再变得神秘，攻击技术原来我也可以会，小网站主自己也能找到正确的安全道路。大公司是怎么做安全的，为什么要选择这样的方案呢？你能在《白帽子讲Web安全》中找到答案。详细的剖析......一起来看看 《白帽子讲Web安全》 这本书的介绍吧!
