because reading textbooks gets boring

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.

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

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:

http://twitter.github.com/bootstrap/1.4.0/bootstrap.css

Be sure to added it your head section

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

.topbar {
  position: static !important;
}

You should now have a menu where you want it at, and not at the top of the page. The !important tag is overriding the absolute positioning that 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.

Related Posts:

• Check Your JavaScript for Syntax Errors Outside the Browser
• Things to Look at When You Are Using a PhoneGap Plugin
• Add jQuery to Ruby on Rails
• Master Pages vs. CSS
• CSS and ASP.NET 2.0

{ 2 comments }