Bootstrap Dikey Tab Örneği V1


Merhaba, öğrenmiş olduğum bir dikey tab örneğinin kendime göre hazırladığım kısmını eklemek istedim. Hayrını görün.

Ekran Görüntüsü

Kodlar
<div class="container">
  <!-- tab -->
  <div class="row">
     <div class="col-lg-3 col-md-3 col-sm-4">
       <!-- Nav tabs -->
       <div class="list-group nav-tabs" role="tablist">
         <a class="list-group-item" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
         <a class="list-group-item" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
         <a class="list-group-item" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
         <a class="list-group-item" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
       </div>
     </div>
     <div class="col-lg-9 col-md-9 col-sm-8">
       <!-- Tab panes -->
       <div class="tab-content">
         <div role="tabpanel" class="tab-pane active" id="home">
           <div class="well">
             <h3>With list groups</h3>
             <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
           </div>
         </div>
         <div role="tabpanel" class="tab-pane" id="profile">
           <div class="well">
             <h3>With tables</h3>
             <p>Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.</p>
           </div>
         </div>
         <div role="tabpanel" class="tab-pane" id="messages">
           <div class="well">
             <h3>Button items</h3>
             <p>List group items may be buttons instead of list items (that also means a parent instead of an). No need for individual parents around each element. Don't use the standard .btn classes here.</p>
           </div>
         </div>
         <div role="tabpanel" class="tab-pane" id="settings">
           <div class="well">
             <h3>Linked items</h3>
             <p>Linkify list group items by using anchor tags instead of list items (that also means a parent instead of an). No need for individual parents around each element.</p>
           </div>
       </div>
     </div>
    </div>
  <!-- #tab -->
  </div>
</div>
Yararlanılan Kaynaklar

Bunlar da hoşunuza gidebilir...


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir