Kamis, 21 Januari 2016

Bootstrap 3 Basic Tutorial: Creating a Simple Fluid Layout

Bootstrap 3 Basic Tutorial: Creating a Simple Fluid Layout

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.

Bootstrap 3 Basic Tutorial: Creating a Simple Fluid Layout

Video How to Creating a Simple Fluid Layout



Bootstrap 3 Basic Tutorial: Creating a Simple Fluid Layout Rating: 4.5 Diposkan Oleh: Jamhari 2015

0 komentar:

Posting Komentar