- The Minimum Bootstrap Page
- The Basic Bootstrap Template
- More Bootstrap Sample Templates
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Basic Bootstrap Template
The basic Bootstrap template is the template that is recommended on the Bootstrap website. As you can see in Listing 3.4, the basic Bootstrap template is just a little more complicated than the minimum page I described previously.
LISTING 3.4 Basic Bootstrap Template
<!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">
<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.2/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.11.1/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual
files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This template might look complicated, but it isn’t all that much more complex than the minimum template in the previous section. Let’s look at the elements of the template.
<!doctype html>
This is the doctype or document type. It tells the browser that this is both HTML and HTML5. If you don’t include this line, your page will still work, but it won’t be good HTML.
<html lang="en"> ... </html>
The <html> tag is the container element. The basic Bootstrap template includes the lang="en" attribute. This tells the browser that this page is written in English. If your page is in another language, you should change the en to the two-letter character code for that language. You can find a list of the ISO 639-1 language codes on the Web at http://www.html5in24hours.com/reference/language-codes-iso-639-1/.
<head> ... </head>
This is the <head> element that contains information about the web page. In most cases this information is “meta” information about the page that doesn’t display to the customers but provides information to browsers, search engines, and other tools.
<meta charset="utf-8">
This is a very important line in the <head> of HTML pages. It should be the first line of your <head> and tells the browser which character set the page uses. The vast majority of pages use Unicode or UTF-8, so you won’t need to change this line at all. But do not leave it out—without it, your page may be at risk for being hacked.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This meta tag tells the Internet Explorer web browser to display this web page in as high a version emulation as that browser can. Other browsers will completely ignore it. This line is recommended but not required.
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta tag helps mobile browsers display pages more effectively. This version says to set the width of the page to the device width and the initial zooming to 100%. This line ensures that your pages are easier to read in larger DPI, small-screen devices like iPhones and modern Android phones.
<title>Bootstrap 101 Template</title>
This is the title of the web page. It’s the only part of the <head> that customers will see. It displays in the browser tab bar or title bar and is used as the default text when the page is bookmarked.
<link href="css/bootstrap.min.css" rel="stylesheet">
This is the Bootstrap CSS file.
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
This is a conditional comment. It states that if the browser is less than Internet Explorer 9, the enclosed HTML should be executed. Otherwise, it’s not.
In this block, Internet Explorer 8 and lower would get two scripts (html5shiv.min.js and respond.min.js) loaded, but all other browsers would not. These two scripts help Internet Explorer 8 display HTML5 elements and media queries. If these scripts don’t run, the pages don’t work well in older versions of Internet Explorer.
<body> ... </body>
The <body> element contains all the web page content that will be displayed in the web browser.
<h1>Hello, world!</h1>
This is the only content on the basic template—a headline. You can change this to whatever you want and add content here.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
To use the JavaScript plugins, you need to include jQuery on the pages. The basic template uses an older version of jQuery, but you can update this to subsequent versions of jQuery as well. In Listing 3.3, I used a pointer to jQuery version 2.1.3.
<script src="js/bootstrap.min.js"></script>
This is the Bootstrap JavaScript file.
You can see how the Bootstrap basic template looks in Figure 3.1.
)
FIGURE 3.1 Basic Bootstrap template in Safari.