Bootstrap Workshop

08 tabs

Tabs

Tabs are an excellent way to organize information on the page so that it is more digestible for the mobile user; IMHO we should use these much more often, given the complexity of most of our applications.

Tabs, again, can be triggered with only CSS. There are JS events that you can plug into, and you can intercept the click event to add your own custom code (e.g., with a multi-tab form, you could make an AJAX call to save progress in the background while switching tabs so that no work will be lost).

Individual tab names can sometimes be long; you may want to show/hide portions of those names on phones, or even hide particular tabs completely on mobile devices (e.g., an export to excel tab might not be desirable on a mobile phone for security reasons), so that the tab layout is less cluttered and doesn't wrap to the next line.

References

http://getbootstrap.com/javascript/#tabs
http://getbootstrap.com/javascript/#tabs-usage
http://getbootstrap.com/javascript/#tabs-events

RESOURCES:

see 00_resources/cdn_js.txt and 00_resources/cdn_js.txt for quick copy/paste of js and css resources

Files