Twitter Bootstrap

Navbars and Icons

If you want your site to have a simple navigation bar, you can avoid creating the HTML and CSS necessary for such a thing to work, and just use Bootstrap's "navbar" class. Whether you want a simple navbar, one with pop-up, JavaScript-controlled buttons or even a form inside your navbar, Bootstrap has all of those options available. You even can set up your navbar such that it's "responsive"—meaning that it knows how to expand and collapse based on the user's browser window width.

The "img" directory contains two images: one for all of the white-on-black icons that Bootstrap provides and another for all of the black-on-white versions of those same icons. The icons are all on one image, because they take advantage of CSS sprites, a technique that makes it possible for your browser to download a single image and then selectively display parts of that image independently. Thus, if you have a download link on your site and you want to have a download icon, you can add:


<p><i class="icon-download"></i>Download</p>

<p> Now, here's the thing you might notice about the icons: they're using the <i> tag, which normally is for italics. But, the text that accompanies the icon doesn't go inside the tag. Rather, it goes next to the tag. The only reason for <i> is that it allows CSS to pull up a sprite as the background image. The icons are a great start for many of the things you'll want on a site. </p>

Conclusion

I've been doing Web development for a while and thought I had seen rapid adoption of technologies before. But, Twitter Bootstrap has beaten them all from what I can tell. It's popular, of very high quality, adheres to standards, works across platforms and languages, and is easy to use.

The only negative I can think of is fairly minor—namely that it uses LESS rather than SCSS, which means that integration is a tiny bit more complex with Ruby on Rails. But, even that integration is a no-brainer. Ruby gems exist that solve this problem in a number of different ways.

I've adopted Bootstrap in my own work and expect to adopt it on future projects as well. Bootstrap doesn't solve all the problems with CSS, but it solves so many of them and makes them so accessible, that it allows even someone like me to create an attractive site. And, after years of having to give excuses when my simple, prototype sites didn't look very attractive, I now have a way to ensure that they'll at least be minimally aesthetically pleasing.

Resources

The home page for Twitter Bootstrap on GitHub is http://twitter.github.com/bootstrap. The documentation as well as numerous links to examples are there.

More information about LESS is at http://lesscss.org. Full documentation as well as program binaries are available there.

If you're interested in using Bootstrap with Rails, I suggest watching the "Railscast" screencast on the subject, which both introduces Bootstrap and demonstrates how to integrate it with a Rails application: http://railscasts.com/episodes/328-twitter-bootstrap-basics.

______________________

Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Bootstrap

RonTrex's picture

Bootstrap is awesome. I've been using it for various projects but my favorite by far is to create mobile websites with Bootstraps fluid design. In fact, Bootstrap has been gaining quite the popularity recently and there's even a website for all sorts of bootstrap resources. What makes me love bootstrap is it's simplicity. You only have to specify a few classes to get the website looking the way you like it, the rest is already done for you.

Ron @ http://www.bluepelicanloans.com/

Everybody got lazy!

Robson's picture

Twitter Bootstrap is a wonderful tool and it help developing sites really faster.
The problem of Bootstrap is that it seems to have made everybody lazy: I'm really tired of seing sites with the same look over and over.
To try to solve this issue, I made a themer for it: http://bootswatcher.com.
I hope it helps to get back people's creativity...

Not just for CSS challenged

Scott Keller's picture

Bootstrap is great even for those who aren't CSS challenged. Every good web developer uses some predefined CSS to set sane base fonts, even out browser inconsistencies and provide necessary utility classes (like clearfix).

Bootstrap not only provides this but using less, you can set some variables and customize the look and feel quickly and easily so your page doesn't look exactly like every other Bootstrap page ever created.

I wish they'd convert their icons to a web font (see Font Awesome for a great implementation of this). I also wish it was a little friendlier with jQuery UI (I want Bootstrap look & feel buttons with jquery's .button() function to provide better functionality).

minor nits...

Michael J. Ryan's picture

should be explicit; npm -g install less

less prefers to go into a global install, but for demo purposes, as this blog, it's best to specify... also, in windows "global" is per user, not per system.

There are also server plugins that will do less compilation (and caching of compiled files for you). And they are available for a number of frameworks as well (if you're using RoR, Express, IIS, Apache, etc..) I've gotten it plugged into a couple of web projects with Visual Studio, as well as in deployment scripts.

It's a really nice starting point for new web projects, and imho a lot cleaner than using say jQuery Mobile or jQuery UI for an application base... There is definitely not a kitchen sink approach with makes it flexible... Here's a site that I've been working on using it recently.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState