Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Twitter Bootstrap 101: Tabs and Pills

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called Twitter Bootstrap 101.
Twitter Bootstrap 101: The Navbar
Twitter Bootstrap 101: The Carousel

Twitter Bootstrap 2.0 makes it easy to set up tabs, enabling your users to quickly switch between panes of content. On top of an excellent JavaScript plugin, the framework provides a number of options for style and layout which are well built and easy to implement. In the following two short videos, I'll give you a brief introduction.

Be sure to grab the exercise files, since I'll reference them in the videos, and you'll find helpful resources and examples to speed you on your way.


Tabs and Pills

After quickly surveying Bootstrap's documentation on tabs and pills, let me show you some applied examples in our sample files.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Tabs and Pills Playground

Here we'll use the Tabs & Pills Playground file I've provided, and we'll experiment with alternate layouts and styles together.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Links and Downloads

That's it! As you work with Tabs, Pills, and other components, don't forget to return and consult Twitter Bootstrap's own excellent documentation. You may even want to join Twitter Bootstrap's Google group, to hang out and learn from other developers as they use the framework.

Have fun!

Advertisement