Comments on Bootstrap 3 Template File
The basic Bootstrap 3 html file found at http://getbootstrap.com/getting-started/ is shown below.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
-------------------------------------------------------------------
- The meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> lets Internet Explorer know which rendering engine to use; by specifying IE=edge, it is saying to use the most recent one.
- The reference to the Bootstrap CSS file is placed in the head so that when the html in the body section of the page is loaded, it can be immediately styled by this CSS file.
- The reference to the Bootstrap CSS file is to the "minified" version of the file. This is the CSS file with unnecessary spaces removed so as to reduce the loading time for the file. The downside is that the file is almost impossible to read. So when you are developing your page, you may want to reference the non-minified version so that you can examine the CSS.
- The HTML5 shivs referenced in the head are hosted at a CDN (content delivery network or content distribution network). If you do not care about support for Internet Explorer 8, then you can delete these lines. The use of a CDN makes these files available to your page without having them to reside on your website. Also, if visitors to your web page have recently visited, using the same browser, other web sites that also reference these JavaScript files on this CDN, the JavaScript files will be available in the browser's cache and need not be downloaded.
- These two JavaScript files references are again to the minified version of these files. .
- The reference to the jQuery JavaScript framework is placed at the bottom of the page so that the loading of the content of the page is not delayed by the loading of the jQuery framework. This reference can either be to a CDN or to the desired version of jQuery from http://jquery.com/download/ that you download and and place within the [js] folder. If you want to support Internet Explorer 6-8, you will want to reference a 1.x version of jQuery. If not, reference a 2.x or later version since the file is smaller.
- The reference to the Bootstrap JavaScript files must occur after the reference to jQuery because the Bootstrap JavaScript files rely on the jQuery file.
This template file should be placed in your site folder. Your site folder should contain three folders [css], [fonts], and [js] at the top level of the site. Even if you are going to access Bootstrap and jQuery through a CDN, it is still a good idea to create these folders since you may want to supplement the Bootstrap css file with your own css file and have your own JavaScript file to supplement the Bootstrap JavaScript file.
Revised: November 15, 2017