Implementing Bootstrap Using the CDN Tutorial
The second one is using the offline version of bootstrap (We will not be using the bootstrap CDN since CDN needs an internet connection to run bootstrap). So here is a tutorial to help you start with bootstrap offline. Visit getbootstrap.com for the complete documentation and references in this tutorial.Step # 1
Download bootstrap3.3.6 from getbootstrap.com download section. Just click the link I provided and you can select between Bootstrap, Source Code and Sass like on the picture below.
Step # 2
So now you are ready to construct your first webpage using bootstrap. Create your HTML code by copying the HTML5 code below. It is found on the Basic Template under your download link from getbootstrap.com.
<!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.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.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Step # 3
Save it together with your css, js and font folders with .html file extension and your done! If you want to add some boostrap components, just visit the boostrap documentation and copy the codes and paste it inside your body tag.Hope this works for you too....
No comments:
Post a Comment