Tabs
Click on the tabs
Content 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Implementation
<style> .tab-content div.container { padding-top: 8px; } ul.nav-tabs { padding-bottom: 0px; } li.nav-item { margin-left: 0; } </style> <div class="width60 marginAuto"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Tab 3</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu4">Implementation</a></li> </ul> <div class="tab-content"> <div class="container tab-pane active" id="menu1"> <h2>Content 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="container tab-pane fade" id="menu2"> <h2>Content 2</h2> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="container tab-pane fade" id="menu3"> <h2>Content 3</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div class="container tab-pane fade" id="menu4"> <h2>Implementation</h2> <p><strong>On ne peut plus simple, il suffit d'examiner le code de cet article.</strong></p> </div> </div> </div>
Creation date : 09/02/2014 @ 06:01
Category : - Docs and Tutorials
Page read 25910 times