Bootstrap Tutorial for Blog Design

by admin Date: 18-04-2013

Bootstrap is a toolkit, which is developed by the Twitter team. This actually helps you to develop web applications much faster.Bootstrap contains CSS and Javascript files using which you can enrich your web page with Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts etc,. This avoids cross browser compatibility problem. This time I am aiming to explain how to design a template of the basic fluid blog for different resolutions and devices like iPad and iPhone.

Bootstrap CSS
Just include two CSS file bootstrap.css and bootstrap-responsive.css. You can use github url too http://twitter.github.com/bootstrap/assets/css/bootstrap.css

<!DOCTYPE html>

  <html lang="en">

  <head>

  <meta charset="utf-8">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="assets/css/bootstrap.css" rel="stylesheet">

  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

  </head>

  <body>

  // Webpage layout design.

  </body>

  </html>

Bootstrap JavaScript
Include the following JavaScript files and Place them at the end of the document.this will make the page load faster.

<script src="assets/js/jquery.js"></script>

  <script src="assets/js/bootstrap-transition.js"></script>

  <script src="assets/js/bootstrap-alert.js"></script>

  <script src="assets/js/bootstrap-modal.js"></script>

  <script src="assets/js/bootstrap-dropdown.js"></script>

  <script src="assets/js/bootstrap-scrollspy.js"></script>

  <script src="assets/js/bootstrap-tab.js"></script>

  <script src="assets/js/bootstrap-tooltip.js"></script>

  <script src="assets/js/bootstrap-popover.js"></script>

  <script src="assets/js/bootstrap-button.js"></script>

  <script src="assets/js/bootstrap-collapse.js"></script>

  <script src="assets/js/bootstrap-carousel.js"></script>

  <script src="assets/js/bootstrap-typeahead.js"></script>

Download bootstrap asserts Click Here

Grids
This is the Grid System using Twitter Bootstrap, it supports 940px wide 12 column Grids. The span1 class has a width of 40px.

Layout
The page container div is divided into two parts consisting of one main areaspan8 for articles and a sidebar span4 for other information. Here I have appliedrow-fluid class.This is for responsive design and multiple resolutions for devices.It makes auto re-sizing of the divs and images easily possible .

<div class="container">

  <div class="row-fluid">

  <div class="span8">

  // Main Part

  </div>

  <div class="span4">

  // Sidebar Part

  </div>

  </div>

  </div>

The above code layout wireframe.

Main Part
Here the articles feed list contains title, description and image. Here btn is the class of the read more button.

<div class="span8">

  // Main Part

  <div class="row">

  // Articles Loop 

  <div class="span7">

  <h2>Article Title.</h2>

  <p>Article Description.</p>

  <p><img src='ArticleImage.png' class="row-fluid"></p>

  <p><a class="btn" href="#">Read More »</a></p>

  </div>

  </div>

  // Articles Loop End

  </div>

  </div>

For different color buttons just apply below class names.

Sidebar
This block for author information, widgets, recent posts and other stuff.

<div class="span4 ">

  // Sidebar Part

  <div class="well sidebar-nav">

  <ul class="nav nav-list">

  <li class="nav-header">About Me</li>

  <li>Author Data</li>

  <li class="nav-header">Recent Posts</li>

  <li>link1</li>

  <li>link1</li>

  <li>link1</li>

  <li class="nav-header">Advertisements</li>

  <li>ad1</li>

  <li>ad2</li>

  </ul>

  </div>

  </div>

Navbar
Fixed top menu navigation bar.

<div class="navbar navbar-fixed-top">

  <div class="navbar-inner">

  // Iphone View Menu Button

  <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>

  <a class="brand" href="#">9LESSONS.info</a>

  <div class="nav-collapse">

  <ul class="nav">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">Tutorials</a></li>

  <li><a href="#">Demos</a></li>             

  </ul>           

  </div>

  </div>

  </div>

Normal view for high resolution.