The Twitter Bootstrap library includes a set of pre-built widgets and webpage interfaces. One of these features is the tabbed content widget, displayed using jQuery and switching between HTML divs on the page. The files are very easy to setup and you only need to include a small amount of JavaScript to get everything working.
I want to demonstrate how you can built a custom Bootstrap page using these JS tabs. The interface is very easy to use and the codes are also not very difficult at all. Webmasters who have never used Bootstrap may be surprised at the easy implementation. But although it may be confusing at first, once you spend more time practicing it will become like second nature. Check out my live sample demo if you want to get a better idea of what we are building.
Default Page Content
There are a number of files we need to include right from the start. The Twitter Bootstrap landing page has a large download button which pulls the most up-to-date repo directly out of Github. I like using the full library instead of customizing specific JS files so that we have access to all the functionality.
This means we are not limited to just using the tabs, but can further implement any other components via Bootstrap. Aside from the minified CSS/JS files we also need a copy of jQuery, a separate JS file to hold the custom script, along with our own CSS stylesheet. Here is what my document header looks like:
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Tabbed Content using Bootstrap</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://www.xyz.com/favicon.ico">
<link rel="icon" href="http://www.xyz.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/customtabs.js"></script>
</head>
These files are all hosted locally so we do not even need an Internet connection when testing on a computer. Now the other big portion of HTML involves adding the bootstrap tabs navigation, along with the content divs. These are labeled by ID attributes which correspond to the anchor href value. Check out the codes from my first two content boxes:
<ul class="nav nav-tabs">
<li class="active"><a href="#hello" data-toggle="tab">Hello</a></li>
<li><a href="#empty" data-toggle="tab">Empty</a></li>
<li><a href="#templates" data-toggle="tab">Templates</a></li>
<li><a href="#bluths" data-toggle="tab">Bluths</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="hello">
<h3>Hello my Friend!</h3>
<p>This is what a basic Bootstrap interface can look like. We have setup all the custom HTML based on <a href="http://twitter.github.io/bootstrap/javascript.html#tabs">the JS documentation</a>. Skim the content and you can surely pick up your own methods.</p>
<p class="text-center"><a href="http://twitter.github.io/bootstrap/"><img src="images/bootstrap-homepage.jpg" alt="bootstrap website layout interface"></a></p>
</div><!-- @end #hello -->
<div class="tab-pane" id="empty">
<h3>Just gonna be empty...</h3>
<p>Yup. Nothin' here.</p>
</div><!-- @end #empty -->
This actually includes both the navigation menu along with my content divisions. We need to use an unordered list for the tab styles based on Bootstrap’s default CSS stylesheet. Everything has been included to style and organize tabbed links, so they look great right from the start. Using the attribute class=”active” we can setup the main tab which displays right on pageload.
The active div container will also need a class of .active added onto the main element. This will force both the internal contents and the navbar tab item to display as if they are the default choice. One other important attribute to consider is data-toggle=”tab” found on each anchor link. Bootstrap needs to know which links should be displayed as tabs, and this HTML5 workaround is the easiest solution.
Getting into Styles
There is not a whole lot we need to know about the stylesheet. Bootstrap comes with a large collection of resets and default layout designs. Therefore all of the tabbed content will display perfectly when following the documented guidelines from their website. But we should take a look at what is included inside by style.css.
html { height: 102%; /* always keep a scrollbar */ }
body {
padding-top: 45px;
padding-bottom: 65px;
background: #d1d6d9;
}
.container {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 8px 12px;
}
ul.nav {
margin-bottom: 0 !important;
}
When switching between tabs there will be times when less content is shown on the page and the scrollbar will disappear. This causes the entire website to shift since the width is affected by a scrollbar appearing or not appearing. By forcing the HTML element at 102% we keep the scrollbar in display mode at all times, and we never see the annoying scrollbar behavior.
Also the default Bootstrap container is just an outside element for centering the body. I have gone and added the white background plus the rounded borders for a cleaner effect. The navigation menu itself comes with a large margin at the very bottom. It forces all content to be pushed down and it looks very strange. All I have done is use the !important flag which forces the bottom margin to remain at zero. These are all minimal fixes but also very necessary for any typical Bootstrap website.
Activating the Tabs
If you have followed along this far then you should be ecstatic! There is not much left to get everything working, all we need to do is handle a small jQuery function. Everything is outlined in the main Bootstrap documentation page but I am hoping it will be fairly straightforward.
$(function{
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
});
Targeting all anchor links inside the #myTab list forces jQuery to catch every single click event onto any tab. We first stop the default href value from loading a new hash into the URL and then we call .tab(‘show’) which is an internal function. This will use Bootstrap’s JS script to switch between the tabs and also move .active classes onto the proper elements.
You may choose to keep this JavaScript at the bottom of your HTML to save on HTTP requests. I would imagine there will be other JS codes needed for your site, and so it may be worth keeping them all in the same file. But this tutorial is an excellent demonstration of the easy influence that you have when using Twitter Bootstrap.
Final Thoughts
I feel that Bootstrap is an excellent way to get your website online quickly. It comes with a myriad of CSS resets and default styles, along with typical pre-built JavaScript components. It is very easy to work into any layout. However Bootstrap simply cannot be a solution for every project, and so keep this in mind as you are building new ideas to launch online. Feel free to download a copy of my sample demo and let us know your thoughts in the post discussion area below.
No comments:
Post a Comment