Hey buddy, after we managed to make a simple project that displays Hello World article on Bootstrap framework, this time we will learn how to create a Fixed Layout in Bootstrap. Before we discuss more about Fixed Layout is a good idea to know beforehand what is the purpose of the Fixed Layout itself. Fixed Layout on Bootstrap is a website that has a display size limits, so that the layout of the website does not appear in full accordance with the width of the monitor on your computer. Fixed Layout to make this we need a container class, where in the next class is row class.
Create a simple Fixed Layout in Bootstrap 3, we only need one file index.html file which we will need a file CSS and jQuery. The following files CSS and jQuery would we include to create a Fixed Layout, all of which are already on Bootstrap 3 and you do not need to download it again.
CSS files are included
- bootstrap.min.css
- bootstrap-theme.min.css
jQuery file that is included
- jquery.min.js
- bootstrap.min.js
Source code index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Fixed Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body{
padding-top: 70px;
}
</style>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TIK76</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://localhost/fixed_layout/index.html/" target="_blank">Home</a></li>
<li><a href="http://localhost/fixed_layout/about-us.php" target="_blank">About</a></li>
<li><a href="http://localhost/fixed_layout/contact-us.php" target="_blank">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Create Website</h1>
<p>This is a webiste is contain tutorial to create website, web design an many tutorial. where you can lear from
<a href="http://localhost/fixed_layout/index.html" target="_blank">tik76.blogspot.com</a>. Congratulation...</p>
<p><a href="http://localhost/fixed_layout/index.html" target="_blank" class="btn btn-success btn-lg">Get Started today</a></p>
</div>
<div class="row">
<div class="col-xs-4">
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics
of HTML.</p>
<p><a href="http://localhost/fixed_layout/index.html" target="_blank" class="btn btn-success">Lear More »</a></p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS.</p>
<p><a href="http://localhost/fixed_layout/index.html" target="_blank" class="btn btn-success">Lear More »</a></p>
</div>
<div class="col-xs-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development</p>
<p><a href="http://localhost/fixed_layout/index.html" target="_blank" class="btn btn-success">Lear More »</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>© Copyright 2016 TIK76</p>
</footer>
</div>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar