Onglets
Cliquez sur les onglets
Contenu 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contenu 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Contenu 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Mise en place
<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">Onglet 1</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Onglet 2</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Onglet 3</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu4">Mise en place</a></li> </ul> <div class="tab-content"> <div class="container tab-pane active" id="menu1"> <h2>Contenu 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>Contenu 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>Contenu 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>Mise en place</h2> <p><strong>On ne peut plus simple, il suffit d'examiner le code de cet article.</strong></p> </div> </div> </div>
Date de création : 09/02/2014 @ 06:01
Catégorie : - Docs et Tutoriels
Page lue 24112 fois