About Bootstrap
Bootstrap is Twitter's project. It's a tool for making the life of web-developers and web-designers a lot easier than it used to be. You'd be surprised with how many websites use this tool. And why not use it? It takes care of all the tedious and annoying work out and lets you focus on what's important.
Bootstrap provides means to building website's layout, consistent font styles and coloring, navbar, menus, tabs, form elements, stylish buttons, and a lot of JavaScript components. So instead of starting with a white page you already have a stylesheet and a bunch of components that you don't have to write on your own or go hunt down scripts and codes and plugins.
Your code will be very short and very clean as most of it is done with assigning classes to html elements - like <button class="btn"> or <div class="span4">.
Bootstrap is completely free and open source. All you need to do is download it, and if you will be using its JavaScript components you will also need to download and include jQuery.
Then put this on your page or header file:
<html lang="en">
<head>
<title>My page</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
And that's not all - you can actually customize the styles to your liking before downloading it.
http://twitter.github.com/bootstrap/customize.html
So you can give it the colors you had in mind for various components, widths, margins etc. However, if you don't customize it and just use it out of the box and then decide to recolor or change something it's no problem at all. You can override the css in your own file. So, just create a stylesheet.css and a js.js or what have you and put those in css and js folders and include them. Nothing new there.
Layouts
This is probably the most useful part of Bootstrap even though visually it doesn't look so exciting. If you have Bootstrap you won't have to worry about making tables or positioning divs; neither you will have to worry about browser compatibility. It's all taken care of for all the latest browsers (IE7+). Also it will look great on just about any portable device like a phone or a tablet.
There is a fixed and fluid layout. There are 12 columns .span1 being the smallest and .span12 being the widest. The basic code looks like this:
<div class="row-fluid">
<div class="span4">Column 1</div>
<div class="span8">Column 2</div>
</div>
Fixed layout is based on px while fluid is based on percentages and I strongly prefer that one. For fixed layout just use "row" instead of "row-fluid".
You can also offset columns by the width of any column sizes. Like this:
<div class="span4 offset3"></div>
This would be like making a <div class="span3"></div> and leaving it blank just to move your actual column to the right. And you can nest rows inside rows.
<div class="row-fluid">
<div class="span12">Level 1 Column</div>
<div class="row-fluid">
<div class="span4">Level 2 Column</div>
<div class="span8">Level 2 Column</div>
</div>
For fluid layout make sure that your span and offset numbers sum up to 12 since it's a percentage-based layout.
If you like drawing the basic look of your website in Photoshop, Illustrator, or some other program just keep in mind the layout system and make a very loose design - make the banner and other components but don't adjust it perfectly pixel to pixel. Once you have the graphics and content tie it all together with Bootstrap and show to your client - you will spend very little time on it and it will look great with minimum effort on your part. And to the client it will look like you did a lot more than just drew a picture ;)
I made a little bit more in-depth post at
Although, honestly you should just go to Bootstrap's page and look at all the things it had and lets you do. It's quite self-explanatory with some code examples.
I will still do more tutorials on Bootstrapping because I think that just explaining how to write a piece of code is not enough. Sometimes people need an explanation on why it's a great feature and what would be an easy approach to working with it, or what adjustments one would have to make in order to use it.
I myself will never make another website without Bootstrap ever. Same way as I will never do JavaScript without using jQuery. It's great for small static pages for clients that just want a web-presence without too many features and it's excellent for big projects with many lines of code. And Bootstrap will never get in the way of your own CSS and JavaScript. Go ahead try it out I'm sure you will love it as much as I do :)
No comments:
Post a Comment