bellentuck/basicBootstrapHTMLTemplate.html

## readme.txt

	* Bootstrap 3 CDN Page Code: https://gist.github.com/planetoftheweb/884b9bff2f84d4134020
	* The charset tag.  You should always specify the encoding used for an HTML or XML page. If you don't, you risk that characters in your content are incorrectly interpreted. https://annevankesteren.nl/2009/09/utf-8-reasons
	* The X-UA compatible tag. This is a special tag that lets Internet Explorer know which versions engine to render the page with. By specifying edge here, we're saying that we want the latest and greatest rendering engine. This is considered a best practice.
	* The viewport tag. On a normal website the browser will display the content on your page normally. However, on a mobile device, if you don't include the viewport tag the mobile browser will shrink the page down, usually from a size of about 960 pixels, to whatever will fit on your device. Now that causes the mobile browser to display the wrong breakpoint for layout and makes the fonts appear too small. When we add the viewport tag, the mobile browser understands that this site has been specifically built for mobile devices, so it doesn't shrink the page and it displays the proper breakpoints and the fonts will appear at the proper size.  / What we're going to do to accomplish this is pass along two values. First off, we're going to ask for a device width, and we're going to set that to the natural device width, as well as set the scale to be one, or 100%. That's to prevent any shrinking that the device would normally do. So I'm going to grab this viewport tag and I'll paste it right here
	* The Bootstrap CSS. This is the link to the max CDN website which has all the default Bootstrap styles in a minified form, so that it's as small as possible.
	* Optional Bootstrap theme. It makes Bootstrap have smoother gradients. If you're looking for a flatter design, you should leave this out.
	* Optional supporting of IE8. There are a couple of JavaScript files that add some missing components to IE8 browsers, like some of the newer HTML five tags and the ability to at least try to deal with responsive breakpoints. If you don't need to support IE8, then you're not going to need these.
	* Link to jQuery.  Boostrap requires jQuery, so you'll need to link to the CDN. This needs to be placed in the footer section (right before the  closing</body>) tag.  Consult our bower.json to see which versions of jQuery are supported.
	* Link to Javascript. You also need a copy of Bootstrap's JavaScript code. If you don't include this, then although your site will look great, some of the Boostrap features like the Carousel and Models will not work .Bootstrap requires JavaScript go to http://getbootstrap.com/getting-started/#download-cdn for the latest Javascript CDN link.
	* Link to your custom CSS file.  You want to make sure that you do it after the Bootstrap default styles. That way your styles can override any of Bootstrap's functionality.
	* Link to your custom JavaScript file. Located at the footer after links to jQuery and Javascript.


## basicBootstrapHTMLTemplate.html
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">

     <!--Picturefill-->
     <script>
       // Picture element HTML5 shiv
       document.createElement( "picture" );
     </script>
     <script src="js/picturefill.js" async></script>

     <!-- Optional Theme -->
     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">-->

     <!-- IE8 Support -->
     <!--[if lt IE 9]>
       <script src="js/html5shiv.min.js"></script>
       <script src="js/respond.min.js"></script>
     <![endif]-->

<title>Bootstrap</title>
</head>
<body>

<h1>Hello World!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu tempor mi. Nullam porttitor sem a neque tristique, eget semper dui semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elit lectus, dignissim et fringilla sollicitudin, vestibulum ut velit. Nunc lacinia lobortis condimentum. Ut sodales tellus eros. Phasellus lectus nisi, aliquet in convallis vitae, ornare ut dui. Nunc auctor ultrices nulla quis congue. Proin ullamcorper non nulla et accumsan. Vivamus gravida odio massa, in malesuada nulla cursus id. Etiam molestie ex at odio iaculis varius. In felis nunc, lobortis id sapien ut, consectetur blandit turpis.</p>


<!-- jQuery latest here: https://code.jquery.com/ Remember jQuery2.x doesn't support IE<9-->
<!--JavaScript Bootstrap.js-->
<!--My JavaScript-->
<script src="js/script.js"></script>
</body>
</html>

	* Bootstrap 3 CDN Page Code: https://gist.github.com/planetoftheweb/884b9bff2f84d4134020
	* The charset tag. You should always specify the encoding used for an HTML or XML page. If you don't, you risk that characters in your content are incorrectly interpreted. https://annevankesteren.nl/2009/09/utf-8-reasons
	* The X-UA compatible tag. This is a special tag that lets Internet Explorer know which versions engine to render the page with. By specifying edge here, we're saying that we want the latest and greatest rendering engine. This is considered a best practice.
	* The viewport tag. On a normal website the browser will display the content on your page normally. However, on a mobile device, if you don't include the viewport tag the mobile browser will shrink the page down, usually from a size of about 960 pixels, to whatever will fit on your device. Now that causes the mobile browser to display the wrong breakpoint for layout and makes the fonts appear too small. When we add the viewport tag, the mobile browser understands that this site has been specifically built for mobile devices, so it doesn't shrink the page and it displays the proper breakpoints and the fonts will appear at the proper size. / What we're going to do to accomplish this is pass along two values. First off, we're going to ask for a device width, and we're going to set that to the natural device width, as well as set the scale to be one, or 100%. That's to prevent any shrinking that the device would normally do. So I'm going to grab this viewport tag and I'll paste it right here
	* The Bootstrap CSS. This is the link to the max CDN website which has all the default Bootstrap styles in a minified form, so that it's as small as possible.
	* Optional Bootstrap theme. It makes Bootstrap have smoother gradients. If you're looking for a flatter design, you should leave this out.
	* Optional supporting of IE8. There are a couple of JavaScript files that add some missing components to IE8 browsers, like some of the newer HTML five tags and the ability to at least try to deal with responsive breakpoints. If you don't need to support IE8, then you're not going to need these.
	* Link to jQuery. Boostrap requires jQuery, so you'll need to link to the CDN. This needs to be placed in the footer section (right before the closing</body>) tag. Consult our bower.json to see which versions of jQuery are supported.
	* Link to Javascript. You also need a copy of Bootstrap's JavaScript code. If you don't include this, then although your site will look great, some of the Boostrap features like the Carousel and Models will not work .Bootstrap requires JavaScript go to http://getbootstrap.com/getting-started/#download-cdn for the latest Javascript CDN link.
	* Link to your custom CSS file. You want to make sure that you do it after the Bootstrap default styles. That way your styles can override any of Bootstrap's functionality.
	* Link to your custom JavaScript file. Located at the footer after links to jQuery and Javascript.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">

	<!--Picturefill-->
	<script>
	// Picture element HTML5 shiv
	document.createElement( "picture" );
	</script>
	<script src="js/picturefill.js" async></script>

	<!-- Optional Theme -->
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">-->

	<!-- IE8 Support -->
	<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	<title>Bootstrap</title>
	</head>
	<body>

	<h1>Hello World!</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu tempor mi. Nullam porttitor sem a neque tristique, eget semper dui semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elit lectus, dignissim et fringilla sollicitudin, vestibulum ut velit. Nunc lacinia lobortis condimentum. Ut sodales tellus eros. Phasellus lectus nisi, aliquet in convallis vitae, ornare ut dui. Nunc auctor ultrices nulla quis congue. Proin ullamcorper non nulla et accumsan. Vivamus gravida odio massa, in malesuada nulla cursus id. Etiam molestie ex at odio iaculis varius. In felis nunc, lobortis id sapien ut, consectetur blandit turpis.</p>


	<!-- jQuery latest here: https://code.jquery.com/ Remember jQuery2.x doesn't support IE<9-->
	<!--JavaScript Bootstrap.js-->
	<!--My JavaScript-->
	<script src="js/script.js"></script>
	</body>
	</html>