Önyükleme Sekmeleri ve Hapları
Menüler
Çoğu web sayfasının bir çeşit menüsü vardır.
HTML'de, bir menü genellikle sırasız bir listede tanımlanır <ul>(ve daha sonra stillendirilir), şöyle:
<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üsünü oluşturmak istiyorsanız,
.list-inlinesınıfı şuraya ekleyin <ul>:
<ul class="list-inline">
Veya yukarıdaki menüyü Bootstraps' Tabs and Pills ile görüntüleyebilirsiniz (aşağıya bakın).
Not: Sekmeleri ve hapları nasıl değiştirilebilir/dinamik hale getireceğinizi öğrenmek için bu sayfadaki son örneğe bakın .
Sekmeler
Sekmeler şunlarla oluşturulur <ul class="nav nav-tabs">:
İpucu: Ayrıca geçerli sayfayı ile işaretleyin <li class="active">.
Aşağıdaki örnek, gezinme 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>
Açılır Menülü Sekmeler
Sekmeler ayrıca açılır menüleri de tutabilir.
Aşağıdaki örnek, "Menü 1"e bir açılır menü ekler:
Ö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>
haplar
Haplar ile oluşturulur <ul class="nav nav-pills">. Ayrıca geçerli sayfayı şununla işaretleyin
<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>
Dikey Haplar
Haplar dikey olarak da görüntülenebilir. Sadece .nav-stackedsınıfı ekleyin:
Ö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>
Üst üste Dikey Haplar
Metin...
Metin...
Metin...
Aşağıdaki örnek, dikey hap menüsünü son sütunun içine yerleştirir. Böylece, büyük bir ekranda menü sağda görüntülenecektir. Ancak küçük bir ekranda, içerik kendini otomatik olarak tek sütunlu bir düzene 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>
Açılır Menülü Haplar
Haplar ayrıca açılır menüleri de tutabilir.
Aşağıdaki örnek, "Menü 1"e bir açılır menü ekler:
Ö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>
Ortalanmış Sekmeler ve Haplar
Sekmeleri ve hapları ortalamak/yaslamak için .nav-justifiedsınıfı kullanın.
768 pikselden daha küçük ekranlarda liste öğelerinin yığıldığını unutmayın (içerik ortalanmış olarak kalacaktır):
Ö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>
Değiştirilebilir / Dinamik Sekmeler
EV
Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim.
Sekmeleri değiştirilebilir hale getirmek data-toggle="tab"için her bağlantıya özniteliği ekleyin. Ardından .tab-pane, her sekme için benzersiz bir kimliğe sahip bir sınıf ekleyin ve bunları
<div>class ile bir öğenin içine sarın .tab-content.
Sekmelerin üzerlerine tıkladığınızda belirip kaybolmasını istiyorsanız,
.fadesınıfı şuraya ekleyin .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>
Değiştirilebilir / Dinamik Haplar
Aynı kod haplar için de geçerlidir; sadece data-toggle özniteliğini şu şekilde değiştirin 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>
Eksiksiz Bootstrap Navigasyon Referansı
Tüm gezinme sınıflarının eksiksiz bir referansı için eksiksiz Bootstrap Navigasyon Referansımıza gidin .
Tüm sekme seçeneklerinin, yöntemlerinin ve olayların tam bir referansı için Bootstrap JS Sekme Referansımıza gidin .