Bootstrap Tutorial for Blog Design.


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


Try live demo with different resolutions or resize your browser to check fluid adjustments.

Download Script     Live Demo

Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.

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.

Bootstrap Tutorial

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 .

<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(56, 118, 29);”>container”>
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>row-fluid”>
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>span8″>
// Main Part
</div>
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>span4″>
// Sidebar Part
</div>
</div>
</div>

The above code layout wireframe.

Bootstrap Blog Design Tutorial

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

<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>span8″>
// Main Part
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>row”>
// Articles Loop
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>span7″>
<h2>Article Title.</h2>
<p>Article Description.</p>
<p><img src=’ArticleImage.png’font-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>row-fluid”></p>
<p><afont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>btn” href=”#”>Read More »</a></p>
</div>
</div>
// Articles Loop End
</div>
</div>

For different color buttons just apply below class names.

Bootstrap buttons

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

<div>
// Sidebar Part
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>well sidebar-nav”>
<ulfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(56, 118, 29);”>nav nav-list”>
<lifont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>nav-header”>About Me</li>
<li>Author Data</li>
<lifont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>nav-header”>Recent Posts</li>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<lifont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>nav-header”>Advertisements</li>
<li>ad1</li>
<li>ad2</li>
</ul>
</div>

</div>

Navbar
Fixed top menu navigation bar.

<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>navbar navbar-fixed-top”>
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>navbar-inner”>
// Iphone View Menu Button
<afont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<spanfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>icon-bar”></span>
<spanfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>icon-bar”></span>
<spanfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>icon-bar”></span>
</a>

<afont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>brand” href=”#”>9LESSONS.info</a>
<divfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: rgb(204, 0, 0);”>nav-collapse”>
<ulfont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>nav”>
<lifont-family: inherit; font-style: inherit; border: 0px none; outline: 0px; padding: 0px; margin: 0px; color: blue;”>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.

Bootstrap buttons

Mobile view collapsed menus list.

Bootstrap buttons
Copy from http://www.9lessons.info/2012/03/bootstrap-tutorial-for-blog-design.html
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s