Bootstrap Guide

Bootstrap Guide

When Responsive Web Designing was turning into a nightmare, came a beam of light with a bold title called as Bootstrap

Prerequisites

Fixed Navigation Bar.

Bootstrap - Fixed Navigator Bar

Bootstrap – Fixed Navigator Bar

Resizes for perfect view in mobile and web browsers

Bootstrap - Fixed Navigator Bar Mobile Devices

Bootstrap – Fixed Navigator Bar Mobile Devices

<div class="navbar 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=".navbar-collapse">
             <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="http://www.knowstack.com">Website Name</a>
        </div>
        <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1<b class="caret"></b></a>
                     <ul class="dropdown-menu">
                        <li><a href="#">Menu 1-Submenu 1</a></li>
                        <li><a href="#">Menu 1-Submenu 2</a></li>
                        <li><a href="#">Menu 1-Submenu 3</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Divider Header</li>
                        <li><a href="#">Menu 1-Submenu 4</a></li>
                        <li><a href="#">Menu 1-Submenu 5</a></li>
                     </ul>
                  </li>
                  <li><a href="#">Menu 2</a></li> 
                  <li><a href="#about">Menu 3</a></li>
                  <li><a href="#contact">Menu 4</a></li>
                   <li><a href="#contact">About Us</a></li>
              </ul>
        </div>
     </div>
 </div>

Jumbotron

bootstrap-jumbotron

bootstrap-jumbotron

    <div class = "page-header">
    <h1>Jumbotron Page Header</h1>
    </div>
    <div class="jumbotron">
       <h2>Jumbotron Title</h2>
       <p>This is Bootstrap Jumbotron.</p>               
       <p>More details goes here</p>
       <p>Even more details goes here</p>			
    </div>

Grids

in bootstrap using class = row & class = col-lg-

bootstrap-grids

bootstrap-grids

<div class="page-header">
	<h1>Grids</h1>
</div>	
<div class="row">
 <div class="col-lg-12">
  <div class="well">
   <p><strong>col-lg-12</strong></p>
   <p> Details placeholder for 12 columns</p>
  </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-6">
    <div class="well">
      <p><strong>col-lg-6</strong></p>
      <p> Details placeholder for first 6 columns</p>
    </div>
   </div>
   <div class="col-lg-6">
     <div class="well">
        <p><strong>col-lg-6</strong></p>
	<p> Details placeholder for next 6 columns</p>
     </div>
    </div>
</div>
<div class="row">
  <div class="col-lg-4">
    <div class="well">
      <p><strong>col-lg-4</strong></p>
      <p> Details placeholder for first 4 columns</p>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="well">
      <p><strong>col-lg-4</strong></p>
      <p> Details placeholder for next 4 columns</p>
    </div>
 </div>
 <div class="col-lg-4">
   <div class="well">
     <p><strong>col-lg-4</strong></p>
     <p> Details placeholder for last 4 columns</p>
   </div>
  </div>
</div>

Login Page

login-page

login-page

<div class="row">
<div class="col-lg-4">
  <form class="form-signin">
	<h3 class="form-signin-heading">Please sign in</h3>
	<input type="text" class="form-control" placeholder="enter email address" required autofocus><br>
	<input type="password" class="form-control" placeholder="enter password" required>
	<label class="checkbox">
	  <input type="checkbox" value="remember-me"> Remember me
	</label>
	<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>
</div>
</div>

This page will be continuously updated. Revisit for more samples

BOOTSTRAP DEMO

More Details about Bootstrap

Posted in CSS, HTML5, Web Technology Tagged with: ,

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news