VS Code 里面创建Bootstrap模板的快捷方式

VS Code 里面创建Bootstrap模板的快捷方式

我们在VS Code里面在创建Bootstrap的模板前必须要下载Bootstrap这个文件

VS Code 里面创建Bootstrap模板的快捷方式_第1张图片

而我们下载了这个文件并且安装了创建Bootstrap模板的快捷键是:bs3-template:html5

而他这个创建的模板的代码是:


<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

在以上的代码中JQuery和Bootstrap JavaScript的文件要在Bootstrap的官网上面弄比较好,这个创建默认的模板是在页面上会报错的报的错是这个:
在这里插入图片描述
这个上面报的错就是JQuery和Bootstrap JavaScript的文件这两个文件都是针对谷歌浏览器的

如果不知道在哪里弄的话,可以看我的这个地方:
JQuery文件的下载地址:https://www.bootcdn.cn/jquery/
Bootstrap JavaScript文件的下载地址:https://github.com/twbs/bootstrap/releases/tag/v3.3.7

下载的方法图片:
VS Code 里面创建Bootstrap模板的快捷方式_第2张图片
下面这个是我写的一个完整一个模板的代码:

"Print to console": {
			//这个属性的设置的快捷键
			"prefix": "bs3-HTML5",
			//这个属性里面的值是要创建的模板代码
			"body": [
				"",
"",
    "",
       "\t",
        "\t",
        "\t",
        "\tTitle Page",

        "\t",
        "\t",

        "\t",
        "\t",
        "\t",
    "",
    "",
        "

Hello World

"
, "", "", "", "", " ", "" ], //这个就是表示你版本的说明标记 "description": "Bootstrap-3.3.7 " }

你可能感兴趣的:(VS Code 里面创建Bootstrap模板的快捷方式)