Menüler
Çoğu web sayfaları bir menü çeşit var.
HTML'de, bir menü genellikle sırasız listede tanımlanır <ul> böyle, (ve sonradan tarz):
<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> Yukarıdaki listenin yatay menü oluşturmak istiyorsanız, eklemek .list-inline sınıfını için <ul> :
<ul class="list-inline"> Kendin dene " Yoksa yukarıdaki menüyü görüntüleyebilir Bootstraps' Tabs and Pills (aşağıya bakınız).
Not: sekmeleri yapmak ve haplar / dinamik toggleable için öğrenmek için bu sayfadaki son örneğe bakın.
Sekmeler
Sekmeler ile oluşturulan <ul class="nav nav-tabs"> :
İpucu: Ayrıca mevcut sayfayı işaretlemek <li class="active"> .
Aşağıdaki örnek navigasyon sekmeleri oluşturur:
Örnek
<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>
Kendin dene " Açılan Menü ile Sekmeler
Ayrıca, sekmeler açılır menüler tutabilir.
Aşağıdaki örnek için bir açılır menü ekler "Menu 1" :
Örnek
<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="#">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>
Kendin dene " Pills
Haplar ile oluşturulan <ul class="nav nav-pills"> . Ayrıca mevcut sayfayı işaretlemek <li class="active"> :
Örnek
<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> Kendin dene " Dikey Pills
Pills da dikey olarak görüntülenebilir. Sadece eklemek .nav-stacked sınıfı:
Örnek
<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>
Kendin dene " Dikey Pills Bir Satır
Metin...
Metin...
Metin...
Aşağıdaki örnek son sütunda içine dikey hap menüsünü yerleştirir. Yani, büyük bir ekranda menü sağa görüntülenecektir. Ama küçük bir ekranda, içerik otomatik olarak bir tek sütunlu düzeni içine kendini ayarlayacaktır:
Örnek
<div class="col-md-3">
<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> Kendin dene " Pills Açılır Menü ile
Pills , açılır menüler tutabilir.
Aşağıdaki örnek için bir açılır menü ekler "Menu 1" :
Örnek
<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>
Kendin dene " Ortalanmış Tabs and Pills
Merkeze / sekmeleri ve haklı pills kullanmak .nav-justified sınıfı.
768px daha küçük ekranlarda unutmayın, liste öğeleri dizilir (content will remain centered) :
Örnek
<!-- 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>
<!-- 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>
Kendin dene " Toggleable / Dinamik Tabs
EV
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua.
Sekmeleri toggleable yapmak için eklemek data-toggle="tab" her bağlantı için özellik. Sonra bir ekleme .tab-pane her sekme için benzersiz bir kimlik sınıf ve bir iç sarın <div> class ile eleman .tab-content .
Sekmelerin ve dışarı üzerine tıklayarak zaman solmaya istiyorsanız eklemek .fade için sınıf .tab-pane :
Örnek
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Kendin dene " Toggleable / Dinamik Pills
Aynı kod için de geçerlidir pills ; Yalnızca değiştirmek data-toggle için öznitelik data-toggle="pill" :
Örnek
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»
Tamamlayın Bootstrap Navigasyon Referansı
Tüm navigasyon sınıfların tam referans için lütfen tüm gidin Bootstrap Navigasyon Referans .
Tüm sekme seçenekleri, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Tab Referans .