About Bootstrap
(skip this part if you know about this project)Bootstrap is a tool that will make web-development and web-design very easy. You can make a very clean, professional looking website in a very short time and with very little effort if you choose to use it. It's absolutely free and doesn't really require working knowledge of JavaScript or jQuery, although that would certainly help and give more versatility to what you can do and how you can use other components. But that will be a separate post. For now, I'm just going to explain the layouts
Bootstrap provides.
So, first things first, go download Bootstrap and include the following:
<!DOCTYPE html>
<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" />
</head>
If you are planning on using the JavaScript components you will also need to get jQuery and include the following in <head></head>:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
But I will talk about this later and for now you just need the css stylesheet from Bootstrap.
Bootstrap Layouts
Remember what a painful experience it was making sure that your layout will look good across browsers? Making tables to tie all the components together or using CSS styles to position divs? And adding special extra codes to make sure it will all look the same in IE and Mozilla? As if that wasn't enough for poor web-developers and web-designers then phones came out adding even more headache. Forget all that.Bootstrap provides a layout system that will look the same across any major browser (IE7 and up), phone, and tablet. It is done through a grid system. There are 2 grid systems - fixed and fluid. Fixed is based on pixels, and fluid is based on percentages. The standard width of your page is 940px but you can use a variable-width grid as well.
The grid system uses 12 columns. They can be wrapped into rows. The sum of column numbers must be equal to 12 for fluid layout. Like column 1 and column 11. Or 3 column 4s, or 12 column 1s etc.
Also you can offset columns to leave some empty space equal to the width of any of the 12 columns.
So all of that sounds like making a table only instead of actual values you use numbers 1 through 12 and can merge columns. Wrong. You use divs and assign them classes. Here's basically how you do it.
At first you make a 'container' div.
<body>
<div class="container">
...
</div>
</body>
For fluid grid set class="container-fluid"
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
For fluid layout use row-fluid instead.
.span1 is the smallest column and .span12 is the widest. The code above will look like a 2 column layout with first column being narrow and second being wide.
The way offsetting works is through adding an .offset class where N varies 1 through 11.
<div class="row-fluid">
<div class="span2 offset2">...</div>
<div class="span8">...</div>
</div>
You can also nest rows inside rows. Still simple code.
<div class="row">
<div class="span12">
Level 1 column
<div class="row">
<div class="span4">
Level 2
</div>
<div class="span8">
Level 2
</div>
</div>
</div>
</div>
Now that almost looks like the layout of this blog.
Bottom line is you don't have to worry about sizes, margins, paddings, etc and your code will look very clean and short.
If you're a fan of drawing a basic look of your page in Photoshop or Illustrator you can do it quite loosely now and just use the graphics rather than slicing everything up and calculating margins and offsets. I think of it as building blocks - build the skeleton of your website, loosely add artwork and text and convert it to html. This way instead of showing a picture to your client you can just show the page right away which to most clients will look like you did a lot more work. And you can show it on your phone, too, making the client even happier.
And as you can see all you have to keep in mind is the Bootstrap classes for divs - container, row, spanN, offset. Quite intuitive and easy to remember.
No comments:
Post a Comment