Hey buddy, in my previous articles have discussed about how to create a Fixed Layout on Bootstrap 3. On this occasion I will discuss about Fluid Layout and how to make it on Bootstrap 3. You need to know that the purpose of the Fluid Layout is a website that has display with the size of the full screen on your computer monitor, so that by using this Layout Fluid display a no website of its boundary. On Bootstrap 3 to create a Fluid Layout we need a container -fluid class.
For more details, we immediately practice course, first change your Bootstrap be fluid_layout folder and create a file with the name index.html. As for the source code from index.html it is as follows.
Source code index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Fluid 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>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="#">Tik 76</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://localhost/fluid_layout/index.html" target="_blank">Home</a></li>
<li><a href="http://localhost/fluid_layout/about-us.php" target="_blank">About</a></li>
<li><a href="http://localhost/fluid_layout/contact-us.php" target="_blank">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<h1>Learn to Create Fluid Layout</h1>
<p>In today's world internet is the most populer way of connecting with the people.</p>
<p><a href="http://localhost/fluid_layout/index.html" target="_blank" class="btn btn-success btn-lg">Get Started Today</a></p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<h2>HTML 5</h2>
<p>HTML 5 is a markup language that is used for creating Web pages </p>
<p><a href="http://localhost/fluid_layout/index.html" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-xs-4">
<h2>CSS 3</h2>
<p>CSS 3 is used for describing the presentation of web pages.</p>
<p><a href="http://localhost/fluid_layout/index.html" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-xs-4">
<h2>Bootstrap 3</h2>
<p>Bootstrap 3 is powerful front-end framework for faster and easier web development.</p>
<p><a href="http://localhost/fluid_layout/index.html" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>© Copyright 2016 Tik 76</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Run the program by typing "http://localhost/fluid layout/index.html". If no error will appear in your browser as shown below.
0 komentar:
Posting Komentar