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

最新推荐文章于 2023-06-26 21:10:39 发布

weixin_45846291

最新推荐文章于 2023-06-26 21:10:39 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/weixin_45846291/article/details/105878344

版权

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 "
		}

weixin_45846291

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VS Code 里面创建Bootstrap模板的快捷方式

VS Code 里面创建Bootstrap模板的快捷方式我们在VS Code里面在创建Bootstrap的模板前必须要下载Bootstrap这个文件而我们下载了这个文件并且安装了创建Bootstrap模板的快捷键是：bs3-template:html5而他这个创建的模板的代码是：<!DOCTYPE html><html lang=""> <hea...
复制链接

扫一扫