Önyükleme 4 Gezinme
Gezinme Menüleri
Basit bir yatay menü oluşturmak istiyorsanız,
.navsınıfı bir <ul>öğeye ekleyin, ardından .nav-item
her biri için sınıfı <li>ekleyin ve .nav-linksınıfı bağlantılarına ekleyin:
Örnek
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Hizalanmış Gezinme
.justify-content-centerGezinmeyi ortalamak için sınıfı ve gezinmeyi .justify-content-endsağa hizalamak için sınıfı ekleyin .
Örnek
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Dikey Gezinti
.flex-columnDikey gezinme oluşturmak için sınıfı ekleyin :
Örnek
<ul class="nav
flex-column">
Sekmeler
.nav-tabsGezinme menüsünü sınıfla birlikte gezinme sekmelerine dönüştürün . .activeSınıfı aktif/geçerli bağlantıya ekleyin . Sekmelerin değiştirilebilir olmasını istiyorsanız, bu sayfadaki son örneğe bakın.
Örnek
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
haplar
.nav-pillsGezinme menüsünü sınıfla birlikte gezinme haplarına dönüştürün . Hapların değiştirilebilir olmasını istiyorsanız, bu sayfadaki son örneğe bakın.
Örnek
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Yaslanmış Sekmeler/haplar
Sekmeleri/hapları .nav-justifiedsınıfla yaslayın (eşit genişlik):
Örnek
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Açılan Haplar
Örnek
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Açılan Sekmeler
Örnek
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Değiştirilebilir / Dinamik Haplar
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.
Aynı kod haplar için de geçerlidir; sadece data-toggle özniteliğini şu şekilde değiştirin data-toggle="pill":
Örnek
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Bootstrap 4 Nav Referansını Tamamlayın
Tüm sekme seçeneklerinin, yöntemlerinin ve olayların tam bir referansı için Bootstrap 4 JS Sekme Referansımıza gidin .