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

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

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

在这里插入图片描述

而我们下载了这个文件并且安装了创建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

下载的方法图片:
在这里插入图片描述
下面这个是我写的一个完整一个模板的代码:

"Print to console": {
			//这个属性的设置的快捷键
			"prefix": "bs3-HTML5",
			//这个属性里面的值是要创建的模板代码
			"body": [
				"<!DOCTYPE html>",
"<html lang=\"\">",
    "<head>",
       "\t<meta charset=\"utf-8\">",
        "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
        "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
        "\t<title>Title Page</title>",

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

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

        "<!-- jQuery -->",
        "<script src=\"https://cdn.bootcdn.net/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>"
			],
			//这个就是表示你版本的说明标记
			"description": "Bootstrap-3.3.7 "
		}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值