Just add the following code to your index page and you are ready to use all the functionalities of Bootstrap, FontAwesome and jQuery
<!DOCTYPE html>
<html>
<head>
<title> </title>
<!-- Favicon Start -->
<link rel="icon" type="image/png" href="resources/images/favicon.png" />
<!-- Favicon End -->
<!-- Meta Tags Start -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Mobile First -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Mobile First -->
<!-- Meta Tags Start -->
<!-- Latest compiled and minified CSS Start -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified CSS End -->
<!-- Optional theme Start -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Optional theme End -->
<!-- JQuery UI CSS Start -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.structure.min.css">
<!-- JQuery UI CSS End -->
<!-- Sticky Footer Basic CSS Start -->
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
</style>
<!-- Sticky Footer Basic CSS End -->
<!-- JQuery Start -->
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<!-- JQuery End -->
<!-- JQuery UI Start -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.min.js"></script>
<!-- JQuery UI End -->
<!-- FontAwesome JavaScript Start -->
<script src="https://use.fontawesome.com/d639cd4fa4.js"></script>
<!-- FontAwesome JavaScript Start -->
<!-- Latest compiled and minified JavaScript Start -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript Start -->
</head>
<body>
<!-- Navigation Areas -->
<nav class="navbar navbar-default" role="navigation">
<!-- Main Navigation Start -->
<div class="container">
<!-- Navigation Container Start -->
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Navigation Container End -->
</nav>
<!-- Main Navigation End -->
<h1><i class="fa fa-university" aria-hidden="true"></i>This is without Bootsrap!</h1>
<!-- Footer Areas -->
<footer class="footer">
<!-- Footer Start -->
<div class="container">
<!-- Footer Container Start -->
<p class="text-muted">Place sticky footer content here.</p>
</div>
<!-- Footer Container End -->
</footer>
<!-- Footer End -->
</body>
</html>
0 comments:
Post a Comment