erknrio
4/23/2018 - 10:04 AM

HTML 5 and bootstrap 4 visual studio code snippet

HTML 5 and bootstrap 4 visual studio code snippet

html5_bootstrap4.json
content_copyfile_download
{
	"HTML5 + Bootstrap 4": {
		"prefix": "html5:bs4",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"${1:es}\">",
			"<head>",
			"  <meta charset=\"UTF-8\">",
			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"  <title>${2:title}</title>",
			"  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css\" integrity=\"sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4\" crossorigin=\"anonymous\">",
			"</head>",
			"<body>",
			"  <header>",
			"    <nav>",
			"      <ul>",
			"        <li>${3:Your menu}</li>",
			"      </ul>",
			"    </nav>",
			"  </header>",
			"  <main>",
			"    <section>",
			"      <article>",
			"        <hgroup>",
			"          <h1>${4:Title}</h1>",
			"          <h2>${5:Subtitle}</h2>",
			"        </hgroup>",
			"        <p>${6:Article body}</p>",
			"      </article>",
			"    </section>",
			"  </main>",
			"  <footer>",
			"    <p>Company <span id=\"${7:footer-year}\"></span> &copy;</p>",
			"  </footer>",
			"  <script src=\"https://code.jquery.com/jquery-${8:3.3.1}.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>",
			"  <!-- Popperjs + Bootstrap 4 -->",
            "  <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/${9:4.1.0}/js/bootstrap.bundle.min.js\" integrity=\"sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M\" crossorigin=\"anonymous\"></script>",
			"  <script>",
			"    $(document).ready(function(ev) {",
			"      var d = new Date();",
			"      document.getElementById(\"${7:footer-year}\").innerHTML = d.getFullYear();",
			"    });",
			"  </script>",
			"</body>",
			"</html>",
		],
		"description": "Basic HTML 5 template with no framework"
	}
}