Advertisement
Workflow

Twitter Bootstrap 101: Tabs and Pills

by

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!

Related Posts
  • Web Design
    HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • Web Design
    CMS
    Introducing the Tumblr Static File Uploader and Theme GardenTumblr 29 retina
    In this bonus episode of Tumblr Theming 101, we'll take a look at two things. Firstly, we'll look at the static file uploader provided by Tumblr, which helps you manage any theme assets you need to host on Tumblr's CDN. Secondly, we'll look at the Tumblr theme marketplace; Theme Garden.Read More…
  • Web Design
    CMS
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    Applications and Tools
    Working With Gumby's Parallax ExtensionGumby parallax retina
    Having covered how to install the Gumby framework and how to work with its semantic grids (plus Sass and Compass), it's now time to dive into some of Gumby's extensions. The first extension we're going to play with is the parallax module.Read More…
  • Web Design
    HTML/CSS
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…