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

最新推荐文章于 2023-09-20 10:18:16 发布

weixin_45847162

最新推荐文章于 2023-09-20 10:18:16 发布

阅读量2.4k

点赞数 3

本文链接：https://blog.csdn.net/weixin_45847162/article/details/105919621

版权

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": [
			"<!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 "
	}
}