Tabs
A tab helps to navigate around a website and helps in keeping related contents in a single container
Example
A tab can be created by decorating the class of an unordered list with .nav &
.nav-tabs.
Example
Home Page
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Profile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor luctus dui, vel lacinia lorem ullamcorper at. Mauris eget enim id massa rutrum vulputate sit amet a lorem. Aenean ultricies ante eu semper euismod. In hac habitasse platea dictumst. Curabitur congue orci vitae felis dapibus malesuada. Etiam aliquam enim placerat commodo dapibus. Mauris rhoncus elementum mi, vel finibus ex dictum ac. Aliquam volutpat tellus in mi sollicitudin, sed porttitor nibh pharetra. Nam dignissim rutrum tellus, id sagittis lacus gravida ac. Donec in neque neque. Integer sed ex quis nisi consectetur rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Messages
Quisque a eleifend nibh. Donec non augue fringilla, mollis lectus ut, pellentesque eros. In in eros at lorem dapibus lobortis. Donec et massa congue massa bibendum pretium. Donec nec elit ante. Pellentesque vitae faucibus mi. Suspendisse vitae mattis dolor, in pulvinar ligula.
Cras consequat, elit sed placerat posuere, ipsum justo tristique ipsum, vel ultrices velit enim non elit. Etiam bibendum volutpat neque vitae bibendum. Sed non ex sed diam interdum convallis vehicula at purus. Aenean ornare blandit diam. In id metus dapibus, posuere risus in, sollicitudin quam. Integer mauris eros, semper vitae velit eget, feugiat fringilla arcu. Duis elit risus, gravida ac viverra semper, tempor vitae mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane"> Home Page </div>
<div id="profile" class="tab-pane"> Profile </div>
<div id="messages" class="tab-pane"> Messages </div>
</div>
<div class="tab-content">
<div id="home" class="tab-pane"> Home Page </div>
<div id="profile" class="tab-pane"> Profile </div>
<div id="messages" class="tab-pane"> Messages </div>
</div>