Monday, July 16, 2012

Bootstrap Tutorial to design a Simple Blog - Updated

Bootstrap is a web design Toolkit, developed by Twitter. It has predefined CSS and javascript files to help you develop Web Applications faster. It includes Grids, Layouts, Typography, Tables, Forms, buttons, alerts, popovers etc. In this tutorial we have explained how to design a Simple Blog Template using Bootstrap.
Update : Its been Made Better, enjoy !!


  Bootstrap CSS  

Simply include the two CSS files bootstrap.css and bootstrap-responsive.css, or you can also link them directly from github project using the link, http://twitter.github.com/bootstrap/assets/css/bootstrap.css

  Bootstrap JavaScript  

Bootstrap has different javascripts for different functions, so whatever you want to add in your Webpage, you can include respective javascripts too. Place all the javascript files required at the end of the document, this will make the page load faster.

<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>




  Layout  

Bootstrap provides a grid system, which supports 940px and 12 columns. We use span8 for the main content area and span4 for the sidebar. You can also add row-fluid class instead of class row, to make the whole design auto-resizing for different platforms, like Mobile phone browsers, iPad browser etc.

<div class="container">
<div class="hero-unit">
//Include logo of blog and description
</div>
<div class="row">
<div class="span8">
// Main Part containing Posts
</div>
<div class="span4">
// Sidebar Part
</div>
</div>
</div>


  Main Part  

The main part holds the Posts of the Blog, Post title, description, image and link. In the below code btn is the class for Read more buttons.

<div class="span8">
// Main Part starts from here
<div class="row">
// Articles body
<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 body End
</div>
</div>

For different buttons just use the below class names.



  Sidebar  

This part is to hold, various widgets of a Blog, like Popular Post, recent Posts, Social Media Buttons and Author Information. We have just included Author information and the Social Media Buttons.

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


  Navigation Bar  



This is the fixed top navigation bar, holding the Navigation Menu and the Blog's Name.

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">WTFD Network</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Tuts</a></li>
<li><a href="#">Apps List</a></li>
<li><a href="#">FB Wall Script</a></li>             
</ul>           
</div>
</div>
</div>


  Introducing Popover  



We have even inserted a Popover at the FB Wall Script menu option in the navigation bar.

<a href="#" id="example" rel="popover" data-content="enter the Description here" data-original-title="Title for the popover here">FB Wall Script</a>
<script>
$(function ()
{ $("#example").popover({placement:'bottom'});
});  
</script>


  Introducing Dropdown  



We have even inserted a DropDown Menu in the navigation bar to include more sub-options.

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Heading 1</li>
<li><a href="#">sub-option1</a></li>
<li><a href="#">sub-option2</a></li>
<li class="divider"></li>
<li class="nav-header">Heading 2</li>
<li><a href="#">sub-option1</a></li>
<li><a href="#">sub-option2</a></li>
</ul>
</li>



  Search Box in Navigation Bar  



We have even inserted a Search Box too in the navigation bar.

<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span3" placeholder="Search">
</form>




No comments:

Post a Comment