UPDATE: Post has been updated for version 2 of bootsrap
If you are a developer like me you can write code, but design is not one of your strong points. You probably don’t mind too much, but would like demo apps and test stuff to look a bit better. Well Bootstrap can be used for just that. However, at least for me, when you go to the Bootstrap page you are hit with so much information you kind of don’t know where to start and are overwhelmed by everything there. So how do you sort through it all?
What is Bootstrap
Lets talk about what bootstrap is. At its core it is design elements to help make your life easier when you make your website. There is both JavaScript and CSS available for you to take advantage in accomplishing tasks. You can do everything from positioning and navigation to detailed form elements that look way better than default HTML elements.
How to Get Started
When you visit the Bootstrap site and look around there is a lot there, but the site does a bad job of explaining what to do for first time visitors. The key thing to note about bootstrap is:
“You don’t have to use all of bootstrap you can pick and choose”
When I first tried to use it I couldn’t make heads or tails of what was going on so I could start to use it. Fortunately someone gave me the above advice and showed me how to use it now I am in love with it.
Start With Navigation
Lets start with navigation since it is simple enough and can get you started with a nice looking menu.
Setup Proper HTML
First we need to make sure we have the HTML setup properly and all the correct tags.
Bootstrap Version 1.4
<div class="topbar-wrapper">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
Bootstrap Version 2
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/parties/">All Parties</a></li>
<li><a href="/about/">About</a></li>
</ul>
</div>
</div>
</div>
</div>
Add Bootstrap CSS
Another daunting part to using bootstrap is that it uses less, which I still don’t know how to use, so I just side stepped that and grabbed the css from the site and included it. You can download it here:
Version 1.4
http://twitter.github.com/bootstrap/1.4.0/bootstrap.css
Version 2
http://twitter.github.com/bootstrap/download.html
Be sure to added it your head section (valid for 1.4)
<link rel="stylesheet" style="text/css" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css" />
Now that you have done that you should see a nice top menu. Be sure to add the following to your body element for enough space, if you want a topbar.
padding-top: 40px;
What if You Don’t Want a TopBar Navigation
If you are like me I didn’t want a top bar navigation on GoDjango I wanted it under the header. Well that is a simple fix as well.
Version 1.4
.topbar { position: static !important; }Version 2
Just remove the class navbar-fixed-top from your html.
You should now have a menu where you want it at, and not at the top of the page. For version 1.4 the !important tag is overriding the absolute positioning topbar has by default so all should be well.
Final Notes
As you can see we didn’t use any of the other “stuff” however there are a lot of nice defaults that you can either keep or remove from the CSS file itself. You don’t have to use them. Also a lot of the cool stuff that uses JavaScript you can download and use individual JavaScript files to accomplish them. Again you don’t need to lock your site into all or nothing of bootstrap just pick and choose what you want to use.
{ 4 comments… read them below or add one }
Thanks for sharing this, Buddy. Your example was really easy to implement.
I was interested in using Bootstrap, but I’ve been scared away by these comments on stackoverflow:
“without much documentation, it’ll drive you crazy trying to get anything done!”
“Bootstrap is a gross violation of the principal of separation of presentation and content.”
So I’ve been siding with using Blueprint (which was also much easier for me to integrate with Compass/SASS). Have you worked with Bootstrap enough to have any opinion about those statements?
I can definitely see the first comment. You do have to break open the source code to the twitter bootstrap site and start seeing what they do. As for the second comment, I haven’t worked enough with it yet to be a good judge. However, I haven’t seen anything like that, yet.
I am glad you liked the post my goal was to show how easy it was for me to get started hoping others whom where apprehensive would try and join in as well.
When you download the bootstrap example, the tabs and such don’t do anything when you click them, I used to know why and how to fix it, but alas I have no clue, can you refresh me??
Not sure specifically what you are referring to, but make sure you have the proper JavaScript in place to handle it.