建立 Bootstrap Starter Snippet

栏目: CSS · 发布时间: 5年前

内容简介：雖然正式使用 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

建立 Bootstrap Starter 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 會顯示的註解

建立 Bootstrap Starter Snippet

bs4
description
body

若沒出現提示，可按 ⌃␣ 強制啟動 trigger suggest，不過 ⌃␣ 會與 macOS 的切換輸入法相衝，可能要從 macOS 關閉，或者改變 trigger suggest 的 shortcut，我個人是關閉 macOS 輸入法，畢竟可以 ⇪ 快速切換，實務上已經用不到 ⌃␣ ，就留給 VS Code 使用吧

建立 Bootstrap Starter Snippet