In my last post I gave a brief introduction to the marvellous Twitter Bootstrap and how to include it within your website. In this tutorial I will be looking at a few common Twitter Bootstrap examples – the sort of things that I have found myself using for every project, and which have speeded up my development process no end. This tutorial will be assuming that you have you have included the full bootstrap. See my previous post if you need assistance with this. And so, let’s get to it.
How it works
The twitter bootstrap is very simple in its implementation, which is no doubt largely responsible for it’s take-up and success. To apply a certain style to an element, you simply attach a class to the element, and the bootstrap takes care of the rest. The Bootstrap docs give wonderful easy to understand examples, and you will probably find yourself having a bootstrap tab open as you will be referring to it repeatedly during your design process – at least until you get familiar with the more common classes used. The main power of the bootstrap, as you will come to realise, is the ability to put together nice looking designs quickly that are consistent throughout.
In the rest of this tutorial, I will go over the classes I have used the most to give you a feel of how the bootstrap works.
First, we need to make sure that everything we do goes within an element of class “container”. This is quite usual practice, to have a container div that contains all the visible elements of your page. It’s useful in that you can control the width, height or the page etc. It gives you a consistence base for your subsequent elements.
All my page stuff...
Header Navigation Menus
Nearly every site you ever design will have a navigation menu in the header. It’s not hard to put one together by hand, but the twitter bootstrap makes the process that little bit easier still. Saying so, let’s put together a menu within our header:
<header id="page-header"> <p>This is your header</p> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </header>
Et voila. Almost by magic you will have a simple, attractive navigation banner with nice shading, that works. If you want to change the position of the nav, you can do so by applying over-riding styles for ‘.navbar’ in your own stylesheet. You may want to make it absolute or relative, for example, so that you can stick the menu bar to the bottom of your header. You are also free to override any of the other bootstrap styles like colour or font – whatever you want for your page.
Another tedious design process made easy with the bootstrap is Forms. If, like me, you have quickly grown tired of all the pixel shifting that goes on to make a form look reasonable, you will be happy to know that snore-bore task is no more. With the addition of some Twitter Bootstrap classes, you will find yourself with a very handsome form in next to no time. See the following example from the Twitter Docs:
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> < div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
Look a that – great spacing, simple colouring, all good. And looking further in the docs, you will see that other type of forms are put together just as easily. Here’s an inline form:
<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </form>
Here’s a simple search form:
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
Pay attention to the classes of the elements – this is where the twitter bootstrap does its stuff.
One of the things that used to be a bit of a pain was keeping buttons consistent throughout my design – and picking the colours. Not having a designer’s eye, this would cause me great consternation… You know what’s coming next – the twitter bootstrap solution!
The Call to action:
<button class="btn btn-primary">Register</button>
The Go! button:
<button class="btn btn-success">Go!</button>
The Dont’ do it button:
<button class="btn btn-danger">Cancel!</button>
There are a few more here.
This is one of my favourite Twitter Bootstrap time-savers, and it looks great. A modal, if you need a reminder, is the fancy pop-ups you get on some sites when logging in, logging out, registering, confirming an action, etc. The page blacks out and a pop-up focuses your attention quickly.
We will use the simple Twitter Bootstrap example.
<div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div>
And then to activate it, we simply use a button with a data attribute set:
<a href="#myModal" role="button" class="btn" data-toggle="modal">Click me</a>
Clicking on the button will give you a lovely formatted modal. The simplicity is beautiful!
There is much more to this bootstrap plugin - check out here to find out what else you can do with the modal.
And there’s more…
This post has only just scratched the surface of what is available within the class goldmine that is the Twitter Bootstrap. Be sure to have a good look through the docs to get familiar with what you can do. I now find myself checking the bootstrap before I do any CSS, front-end work etc, just to see if there is a quick and easy way to do things. And the great thing is, there usually is!
If you would like to be kept up to date with new posts here at the web developing cat, then be sure to add your name to our mailing list below :)