Bootstrap layout

In this article we will learn to use bootstrap layout to create Fixed as well as fluid Layouts. In version 2.0 Bootstrap has added a responsive feature for phone, tablet portrait, table landscape and small desktops, and large wide screen desktops. We may make a layout responsive by adding bootstrap-responsive.css file in to the page.

Bootstrap fixed layouts:
In websites we need fixed sized windows for many purposes.To achieve this property we can use bootstrap fixed layouts. Now, let us see how to do it?

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
   <div>  
<div>  
<div>  
<div>  
<ul class="nav navbar-nav">  
<li class="active"><a href="#">Home</a></li>  
<li><a href="#about">About</a></li>  
<li><a href="#contact">Contact</a></li>  
</ul>  
</div><!--/.nav-collapse -->  
</div>  
</div>  
</div>  
<div class="container">  
<!-- Example row of columns -->  
<div class="row">  
<div class="span4">  
<h2>HTML5 and JS Apps</h2>  

<p><a class="btn btn-success btn-large" href="#">View apps</a></p>  
</div>  
<div class="span4">  
<h2>Ruby Apps</h2>  
 
<p><a class="btn btn-success btn-large" href="#">View apps</a></p>  
</div>  
<div class="span4">  
<h2>PHP MySQL Apps</h2>  

<p><a class="btn btn-success btn-large" href="#">View apps</a></p>  
</div>  
</div> 
</div> 
  </body>
</html>

Bootstrap fluid layouts:
In websites we need fluid sized windows for many purposes.To achieve this property we can use bootstrap fluid layouts. Now, lte us see how to do it?

 <div class="navbar navbar-fixed-top">  
      <div class="navbar-inner">  
        <div class="container-fluid">  
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>  
          </a>  
       
        </div>  
      </div>  
    </div>  
    <div class="container-fluid">  
      <div class="row-fluid">  
        <div class="span3">  
          <div class="well sidebar-nav">  
            <ul class="nav nav-list">  
              <li class="nav-header">Frontend</li>  
              <li class="active"><a href="#">HTML 4.01</a></li>  
              <li><a href="#">HTML5</a></li>  
              <li><a href="#">CSS</a></li>  
              <li><a href="#">JavaScript</a></li>  
              <li><a href="#">Twitter Bootstrap</a></li>  
              <li><a href="#">Firebug</a></li>  
              <li class="nav-header">Backend</li>  
              <li><a href="#">PHP</a></li>  
              <li><a href="#">SQL</a></li>  
              <li><a href="#">MySQL</a></li>  
              <li><a href="#">PostgreSQL</a></li>  
              <li><a href="#">MongoDB</a></li>  
           </ul>  
          </div><!--/.well -->  
        </div><!--/span-->  
        <div class="span9">  
          <div class="leaderboard">  
            <h1>Learn. Practice. Develop.</h1>  
           
            <p><a class="btn btn-success btn-large">Join w3resource now</a></p>  
          </div>  
          <div class="row-fluid">  
            <div class="span4">  
              <h2>Learn</h2>  
              
              <p><a class="btn btn-success btn-large" href="#">Start Learning now</a></p>  
            </div><!--/span-->  
            <div class="span4">  
              <h2>Practice</h2>  
             
              <p><a class="btn btn-success btn-large" href="#">Start percticing now</a></p>  
            </div><!--/span-->  
            <div class="span4">  
              <h2>Develop</h2>  
              
              <p><a class="btn btn-success btn-large" href="#">Start developing now</a></p>  
            </div><!--/span-->  
          </div><!--/row-->  
          <hr>  
    
  
    </div><!--/.fluid-container-->

Leave a Reply

Your email address will not be published. Required fields are marked *