Bootstrap 3 Öğretimi Bölüm 3

Önceki Bölümler :


Bootstrap Pagination (Sayfalandırma)

Temel Sayfalandırma

Bir çok sayfadan oluşabilecek bilgilere sahipseniz hepsini aynı sayfada yukarıdan aşağı sıralamak yerine sayfalandırmaya giderek bunları ayrı ayrı sayfalar halinde gösterebilirsiniz. İşte bu işlemi yaparken sayfalar arasında gezinmek için sayfalandırma linkleri kullanılır. 

Bootstrap temel sayfalandırma linkleri şöyle görünür :

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>


Bu linklere tıklanınca sayfalardaki bilgilerin nasıl değişeceği bambaşka bir yazı konusu. Web sitenizin arkasında kullandığınız program alt yapısına göre değişik yöntemler vardır.


Aktif Sayfa Renklendirmesi

Bulunulan linkin aktif gösterilen sayfa olduğunu belirtmek için <li> elemanına .active sınıfı eklersiniz.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>



Disabled Durum

.disabled sınıfı yapılan sayfa linki, mouse üzerine gelince tıklanamaz işareti gösterir.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>


Linke tıklanınca bir şey olup olmaması sizin yazacağınız programa bağlı. 



Sayfalandırma Linkleri Boyutu

Dilerseniz .pagination-lg sınıfı ekleyerek daha büyük, .pagination-sm sınıfı ekleyerek daha küçük görünüm elde edebilirsiniz.

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>



Breadcrumbs (Ekmek kırıklarından izler)

Masaldaki çocukların yaptığı gibi ormanda kaybolmamak için geçtiğiniz yollara ekmek kırıkları bırakmak gelmiş olduğunuz yolu görmek için breadcrumb denilen linkler kullanılır. Bu da bir çeşit sayfalandırma linkleri oluşturur. Web sitelerinde bulunulan sayfaya hangi linkleri tıklayarak geldiğinizi göstermek için çok kullanılır.

.breadcrumb sınıfına sahip bir liste içerisine hiyerarşiye göre linkler konulur.

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>




Bootstrap Pager

Pager da önceki gibi sayfalandırma linkleri için kullanılır ama bu sefer direk sayfalara gitmek yerine önceki ya da sonraki sayfaya geçmek için 2 tane link butonu olur.

.pager sınıfı bir <ul> elemanı içinde ifade edilir.

<ul class="pager">
    <li><a href="#">Önceki</a></li>
    <li><a href="#">Sonraki</a></li>
</ul>



Butonları Hizalamak

.previous ve .next sınıflarını kullanarak butonların sayfanın sağ ve sol yanında yer almaları sağlanır.

<ul class="pager">
    <li class="previous"><a href="#">Önceki</a></li>
    <li class="next"><a href="#">Sonraki</a></li>
</ul>




Bootstrap Liste Grupları

Temel Liste Grubu Görünümü

En basit liste grubu görünümünde içinde maddeleri olan bir sıra numarasız liste vardır. Bunu oluşturmak için .list-group sınıf adına sahip bir <ul> elemanı içerisinde .list-group-item sınıf adına sahip <li> elemanları konulur.


<ul class="list-group">
  <li class="list-group-item">İlk eleman</li>
  <li class="list-group-item">İkinci eleman</li>
  <li class="list-group-item">Üçüncü eleman</li>
</ul>

  • İlk eleman
  • İkinci eleman
  • Üçüncü eleman



İpucu Kutucuklu Liste Grubu

Daha önce gördüğümüz .badget sınıfı <span> elemanları kullandığımızda bunlar satırın sağ tarafına hizalı görünecektir.

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

  • New 12
  • Deleted 5
  • Warnings 3



Link Elemanlarından Liste Grubu Yapmak

Link elemanlarını bir <div> içinde toplarsanız liste görünümü alır , ayrıca mouse üzerine gelince renk değişimi olur.

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

First item Second item Third item



Aktif Olan Stili

Aktif olan seçimi göstermek için .active sınıfı eklersiniz.

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

First item Second item Third item



Disabled Eleman

Tıklanması engellenmiş görünümü vermek için elemana .disabled sınıfı eklersiniz.

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

First item Second item Third item



İçeriğe Göre Renklendirme

İçeriğe göre renklendirme sınıfları: .list-group-item-success, .list-group-item-info, .list-group-item-warning, ve .list-group-item-danger

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
</ul>

  • Success
  • Info
  • Warning
  • Danger



İçerik Eklemek

Liste grubundaki elemanlara içerik eklemek için tanımlanmış .list-group-item-heading ve .list-group-item-text sınıf adlarını şöyle kullanırsınız

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">İlk List Grup Eleman Başlığı</h4>
    <p class="list-group-item-text">List Grup Eleman Paragraf Yazısı</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">İkinci List Grup Eleman Başlığı</h4>
    <p class="list-group-item-text">List Grup Eleman Paragraf Yazısı</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Üçüncü List Grup Eleman Başlığı</h4>
    <p class="list-group-item-text">List Grup Eleman Paragraf Yazısı</p>
  </a>
</div>

İlk List Grup Eleman Başlığı

List Grup Eleman Paragraf Yazısı

İkinci List Grup Eleman Başlığı

List Grup Eleman Paragraf Yazısı

Üçüncü List Grup Eleman Başlığı

List Grup Eleman Paragraf Yazısı





Bootstrap Paneller

Basit Panel

Panel etrafında sınır çizgisi olan ve bir miktar padding'e sahip bir kutudur. Panel ifade etmek için .panel sınıf adına sahip bir <div> elemanı kullanılır. İçeriği belirtirken de .panel-body sınıfında bir <div> kullanılır.

<div class="panel panel-default">
  <div class="panel-body">Basit Bir Panel</div>
</div>

Basit Bir Panel

 

Not : Burada .panel-default sınıfı renklendirme kullanıldı. Birazdan diğer renklendirmeleri göreceğiz.



Panel Başlığı

İçerikte panele bir başlık vermek için .panel-heading sınıfında bir <div> elemanı kullanılır.

<div class="panel panel-default">
  <div class="panel-heading">Panel Başlığı</div>
  <div class="panel-body">Panel İçeriği</div>
</div>

Panel Başlığı
Panel İçeriği



Panel Footer

Panele bir footer (alt bölüm) eklemek için .panel-footer sınıfı bir <div> elemanı kullanılır.

<div class="panel panel-default">
  <div class="panel-heading">Panel Başlığı</div>
  <div class="panel-body">Panel İçeriği</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Panel Başlığı
Panel İçeriği
Panel Footer



Panel Grupları

Panelleri bir liste gibi gruplamak için birdern çok paneli .panel-group sınıfı bir <div> elemanı içinde toplarsınız.

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel İçeriği</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel İçeriği</div>
  </div>
</div>

Panel İçeriği
Panel İçeriği



Panellerde İçeriğe Göre Renklendirme

İçeriğe göre renklendirme için kullanılacak ilave sınıflar : .panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning , veya .panel-danger

<div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel with panel-success class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel with panel-info class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel with panel-warning class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel with panel-danger class</div>
      <div class="panel-body">Panel Content</div>
    </div>
</div>

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content




Bootstrap Açılan Menüler

Temel Açılan Menü

Açılan menüler tıklandığında kullanıcıya belirlenen listeden bir eleman seçme imkanı verecek şekilde animasyonla açılan menülerdir. Temel kodu şöyledir :

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>


Kısaca açıklamak gerekirse, .dropdown sınıfı bir <div> içinde toplanmış, ana görseli oluşturan .dropdown-toggle sınıfına sahip bir <button> elemanı ve açılan listedeki seçenekleri içeren .dropdown-menu sınıfında bir <ul> liste elemanı.



Açılan Listede Bölümlendirme

Liste elemanlarında .divider sınıfı  boş içerikli bir <li> elemanı eklersek bölümlendirme çizgisi olsrak görünecektir.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>
    <li><a href="#">Hakkımızda</a></li>
  </ul>
</div>



Açılan Listede Başlıklar

İstersek liste elemanlarına .dropdown-header sınıfı <li> elemanları ekleyerek listede bölüm başlıkları oluşturabiliriz.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Bölüm 1</li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Bölüm 2</li>
    <li><a href="#">Hakkımızda</a></li>
  </ul>
</div>



Açılan Menüde Disabled ve Aktif Elemanlar

Listedeki elemanlara .disabled ve .active sınıfları vererek görünümlerini değiştirebilirsiniz.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li class="disabled"><a href="#">Disabled</a></li>
    <li class="active"><a href="#">Active</a></li>
    <li><a href="#">Normal</a></li>
  </ul>
</div>



Açılan Menünün Pozisyonu

Menü listesini içeren <ul> elemanına .dropdown-menu-right sınıfı ekleyerek açılan menünün bulunulan yerleşimin sağ tarafına yanaşık gösterilmesi sağlanır.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>



Dropup

Eğer açılan menü listesinin aşağı doğru değil de yukarı doğru açılmasını istiyorsanız ana <div> elemanı sınıfını .dropup olarak değiştirmelisiniz.

<div class="dropup">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropup Örneği <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>



Açılır Menüler İçin Erişebilirlik

Ekran okuyucu uygulamalar kullanan görme sorunlu kullanıcılar için role ve aria-* özellikleri kullanmak zorundasınız.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1"
    data-toggle="dropdown">Tutorials <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>




Bootstrap Collapse

Temel Collapse Yapı

Collapse yapıda içerik normalde görünmezken bir butona tıklayınca animasyonlu olarak görünür olur. Buton tekrar tıklanınca da animasyonlu olarak görünmez olur. Web sayfalarında büyük içeriklere hükmederken çok faydalıdır.

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Örnekteki .collapse sınıfı <div> elemanı açılır-kapanır bir eleman olduğunu belirtiyor. data-target="#demo" özelliği ile butona tıklanınca id="demo" olan elemana müdahale edileceğini belirtiyor. data-toggle="collapse" özelliği ise butona her tıklandığında coolapse sınıf adını değiştireceğini belirtiyor. Butona tıklandığında eğer içerik <div> elemanı sadece class="collapse" özelliğine sahipse bunu class="collapse in" yaparak içeriğin görünmesi sağlanıyor. Tam tersi eğer class="collapse in" ise de class="collapse" yapılır ve gizlenmesi sağlanır.

Not : Eğer buton yerine <a> elemanı kullanılacaksa data-target özelliği yerine href özelliği kullanılır. 

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Collapsible
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Başlangıçta içeriğin görünür olmasını istiyorsanız sınıf değerini collapse in olarak verebilirsiniz.

<div id="demo" class="collapse in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>



Panellerde Collapse

Aşağıdaki örnek panellerde collapse sınıfının kullanımı gösteriliyor.

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

Collapsible panel

Panel Body
Panel Footer



Liste Gruplarında Collapse

Bu örnek de panel içeriğine yerleştirilmiş bir liste grubunun nasıl collapse ile işlenebileceğini gösteriyor.

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse2">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

Collapsible list group

  • One
  • Two
  • Three
Footer



Akordiyon Görünüm

Panel elemanını biraz daha geliştirerek akordiyon adı verilen görünüm animasyonu elde edilir.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collpanel1">
        Collapsible Group 1</a>
    </div>
    <div id="collpanel1" class="panel-collapse collapse in">
      <div class="panel-body">Panel 1 İçeriği.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collpanel2">
        Collapsible Group 2</a>
    </div>
    <div id="collpanel2" class="panel-collapse collapse">
      <div class="panel-body">Panel 2 İçeriği.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collpanel3">
        Collapsible Group 3</a>
    </div>
    <div id="collpanel3" class="panel-collapse collapse">
      <div class="panel-body">Panel 3 İçeriği.</div>
    </div>
  </div>
</div>

Collapsible Group 1
Panel 1 İçeriği.
Collapsible Group 2
Panel 2 İçeriği.
Collapsible Group 3
Panel 3 İçeriği.


Burada kritik nokta panel grubun id değerinin accordion yapılması ve collapse aktivasyonu yapan linklere de data-parent="#accordion" özelliği verilmesi.  Böylece link tıklanınca öncelikle kendi grubu açıksa onu kapatıyor. Yok eğer kendi grubu kapalıysa kendi grubunu açarken data-parent eleman içindeki diğer tüm grupları kapatır. 




Bootstrap Sekmeler ve Tabletler

Web sayfalarının çoğunda bildiğiniz gibi menüler vardır. Bu menüler genellikle <ul> elemanları tarafından yapılır ve stilleri ile de değişik görünümler alırlar. Örnek bir menü:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


Eğer Bootstrap kullanıyorsanız ve yan yana menü elemanları olsun isterseniz <ul> elemanına .list-inline sınıfı eklersiniz.

<ul class="list-inline">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


ya da Bootstrap sekme veya tablet stilleriile menü tasarımınızı yaparsınız.



Sekmeler

Sekmeler <ul class="nav nav-tabs"> elemanı ile oluşturulur. Ayrıca aktif bulunulan sayfa için de <li class="active"> elemanı kullanılır.

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>



Alt Menüsü Olan Sekmeler

Aşağıda menü 1'e açılır menü olarak alt menü eklenmesi gösteriliyor.

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Menu 1 <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Sub Menu 1-1</a></li>
        <li><a href="#">Sub Menu 1-2</a></li>
        <li><a href="#">Sub Menu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>




Tabletler

Tablet görünümde menüler için <ul class="nav nav-pills">  elemanı kullanılır. Aktif olan menü elemanı için de <li class="active"> elemanı kullanılır.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>



Dikey Tabletler

Tablet menülerin yan yana değil alt alta olması için .nav-stacked sınıfı eklenir. 

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


Dikey tabletleri grid yerleşiminde bir sütuna yerleştirerek sayfa yanı menü görünümü elde edilebilir. 

<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="col-md-6">İçerik...</div>

İçerik...



Dikey Tablette Alt Menü

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menu 1<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>



Sekme ve Tabletlerde Yazıyı Ortalamak

Menülerdeki başlık yazısını ortalamak ve menüleri yaymak için .nav-justified sınıfı kullanılır.

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
<br>

<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>




Dinamik Sekmeler

Sayfa değiştirmeden menülere bağlı içerikleri aynı sayfa içerisinde göstermek amacıyla dinamik sekmeler kullanılır. Bu amaçla her bir menü elemanına data-toggle="tab" özelliği eklenir. İçerikleri de her birinin id değeri farklı .tab-pane sınıfı <div> elemanları kullanarak yerleştirilir.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Anasayfa</a></li>
  <li><a data-toggle="tab" href="#menu1">Menü 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menü 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>Ana Sayfa</h3>
    <p>Ana sayfa içeriği.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menü 1</h3>
    <p>Menü 1 için içerik.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menü 2</h3>
    <p>Menü 2 için içerik.</p>
  </div>
</div>

Ana Sayfa

Ana sayfa içeriği.



Dinamik Tablet Menü

Aynı işlemi tablet menüde yapmak için menü elemanlarının her birine data-toggle="pill" özelliği eklenir.

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Anasayfa</a></li>
  <li><a data-toggle="pill" href="#menu1">Menü 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menü 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>Ana Sayfa</h3>
    <p>Ana sayfa içeriği.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menü 1</h3>
    <p>Menü 1 için içerik.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menü 2</h3>
    <p>Menü 2 için içerik.</p>
  </div>
</div>

Ana Sayfa

Ana sayfa içeriği.


Sonraki sayfalar :




Hiç yorum yok:

Yorum Gönder

Kaydol: Yorumlar (Atom)