vs code中bootstrap的使用方法和自定义模板

1、安装插件Bootstrap 3 Snippets 或者 Bootstrap 4 Snippets

2、输入 bs3- 可以弹出提示，根据自己的需要进行添加即可。如bs3-template:html5 可以使用bootstrap模板 如下

但是bootstrap模板中的jQuery路径是针对Chrome的，用其他浏览器会报错，所以我们需要自己去自定义一个通用的

3、自定义bootstrap模板

先去官网找到正确路径或者可以直接下载下来

然后找到文件—>首选项——>用户代码片段 ，在搜索html.json 或者直接Ctrl + Shift + p 在在搜索html.json


之后你会看到这个

最后在把改正后的bootstrap模块代码复制body中在设置快捷键

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Print to console": {
		//快捷键
		"prefix": "bs3-HTML5",
		//bootstrap的模块代码
		"body": [
			"",
			"",
			"",
			"\t",
			"\t",
			"\t",
			"\t",
			"\t",
			"\t",
			"\t",
			"\t",
			"\t",
			"",
			"",
			"
Hello World
",
			"",
			"",
			"",
			"",
			" ",
""
],
//说明简介
"description": "Bootstrap-3.3.7 "
}
}