In order to create our first html page, Hello World!, using Bootstrap, we will go to the official Bootstrap website at http://getbootstrap.com/ and download the latest 3.x.x version. Then will extract the archive and copy the following folders: css, fonts and js. Our project will have these folders and the main html archive at the same level.
In this post, we are using the index.html for our Hello World! in Bootstrap. Our project directory should looks like:
Next we link boostrap css into index.html, placing the following inside the tag
Bootstrap requires jQuery for its JavaScript components to work. Go to jquery.com and download jQuery version 1.11.0. Bootstrap supports Internet Explorer 8 and above. If you download jQuery version 2, IE8+ will fail to function properly because jQuery has officially opted out of support for IE8 in versions 2 and above. Hence, jQuery 1.11.0 is needed, the latest version of jQuery 1. After you have downloaded the jquery.js file, paste it into the /js folder of your project directory. Next, weʼll link it into our index.html using the following code:
<script src="js/jquery.js">
Next we include Bootstarp's JavaScript file with the following code:
<script src="js/bootstrap.js"></script>
Both javascript code are recommended to be inserted just inside the tag instead of the , because the page's loading time is reduced.
We need to include some meta tags:
For Unicode character set:
<meta charset="utf-8">
For forcing IE to use the lastest rendering engine to render our webseite:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
For consuming all the space available inside the browser windows, whether it is a tablet or a mobile or a desktop screen:
<meta name="viewport" content="width=device-width, initial-scale=1">
Finally, we have to take into account that Bootstrap 3 uses many HTML5 elements and CSS3 properties that won't work in Internet Explorer 8. We need to add some scripts that bring support for HTML5 and CSS3 when website is opened in IE8.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Our final index.html with Hello World! is:
<!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: Hello World!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello World!</h1>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Related Posts