Önyükleme Açılır Listeleri

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 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 .

Sınıf .caret, bir şapka ok simgesi (), bu, düğmenin bir açılır menü olduğunu gösterir.

Açılır menüyü gerçekten oluşturmak için .dropdown-menusınıfı bir öğeye ekleyin .<ul>

Açılır Bölücü

Sınıf .divider, açılır menü içindeki bağlantıları ince bir yatay kenarlıkla ayırmak için kullanılır:

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:

Devre Dışı Bırak ve Etkin öğeler

.active sınıfıyla belirli bir açılır öğeyi vurgulayın (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):

Açılır Pozisyon

Açılır menüyü sağa hizalamak için .dropdown-menu-rightsınıfı .dropdown-menüyle öğeye ekleyin:

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":

Açılır Erişilebilirlik

Ekran okuyucu kullanan kişilerin erişilebilirliğini iyileştirmeye yardımcı olmak için, bir açılır menü oluştururken aşağıdakileri roleve aria-*özellikleri eklemelisiniz:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Önyükleme 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 JS Açılan Referansımıza gidin .