Bootstrap 4 Açılır Menüler
Temel Açılır Menü
Açılır menü, kullanıcının önceden tanımlanmış bir listeden bir değer seçmesine izin veren, açılabilir bir menüdür:
Örnek
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<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>
</div>
Örnek Açıklama
Sınıf .dropdown, bir açılır menüyü gösterir.
.dropdown-toggleAçılır menüyü açmak için, sınıfı ve
data-toggle="dropdown"niteliği olan bir düğme veya bağlantı kullanın .
Açılır menüyü gerçekten oluşturmak için .dropdown-menusınıfı bir öğeye ekleyin . <div>Ardından
.dropdown-item, açılır menü içindeki her öğeye (bağlantılar veya düğmeler) sınıfı ekleyin.
Açılır Bölücü
Sınıf .dropdown-divider, açılır menü içindeki bağlantıları ince bir yatay kenarlıkla ayırmak için kullanılır:
Örnek
<div class="dropdown-divider"></div>
Açılır Başlık
Sınıf .dropdown-header, açılır menüye başlık eklemek için kullanılır:
Örnek
<div class="dropdown-header">Dropdown header 1</div>
Devre Dışı Bırak ve Etkin öğeler
Sınıfla birlikte belirli bir açılır öğeyi vurgulayın .active(mavi bir arka plan rengi ekler).
Açılır menüdeki bir öğeyi devre dışı bırakmak için, .disabledsınıfı kullanın (açık gri bir metin rengi ve üzerine gelindiğinde "park etmeme işareti" simgesi alır):
Örnek
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Açılır Pozisyon
.droprightAçılır öğeye veya .dropleftsınıfını ekleyerek bir "dropright" veya "dropleft" menüsü de oluşturabilirsiniz . Şapka/ok işaretinin otomatik olarak eklendiğini unutmayın:
sağdan sola
<div class="dropdown dropright">
sol
<div class="dropdown dropleft">
Açılır Menü Sağ
Açılır menüyü sağa hizalamak için .dropdown-menu-rightsınıfı .dropdown-menüyle öğeye ekleyin:
Örnek
<div class="dropdown-menu dropdown-menu-right">
açılan
Açılır menünün aşağı yerine yukarı doğru genişlemesini istiyorsanız, class="dropdown" ile <div> öğesini şu şekilde değiştirin "dropup":
Örnek
<div class="dropup">
Açılır Metin
Sınıf .dropdown-item-text, bir açılır öğeye düz metin eklemek için veya varsayılan bağlantı stili için bağlantılarda kullanılır.
Örnek
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Açılır Menü ile Gruplandırılmış Düğmeler
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bölünmüş Düğme Açılır Menüleri
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Dikey Düğme Grubu w/ Dropdown
Örnek
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bootstrap 4 Açılır Referansını Tamamlayın
Tüm açılır seçeneklerin, yöntemlerin ve olayların eksiksiz bir referansı için Bootstrap 4 JS Açılan Referansımıza gidin .