Temel Açılır
Bir açılır menü kullanıcı önceden tanımlanmış listeden bir değer seçmenizi sağlayan bir toggleable menü:
Örnek
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Kendin dene " Örnek Açıklaması
.dropdown sınıf bir açılır menü gösterir.
Açılır menüyü açmak için bir düğme veya bir sınıf ile bir bağlantı kullanmak .dropdown-toggle ve data-toggle="dropdown" özelliği.
.caret sınıf bir şapka ok simgesi oluşturulur ( ) ( ) ( ) , Düğme bir açılan olduğunu gösterir.
Ekle .dropdown-menu a sınıfı <ul> aslında açılan menüyü oluşturmak için eleman.
Açılan Bölücü
.divider sınıfı ince yatay kenarlıklı açılır menüden içine ayrı bağlantılar için kullanılır:
Açılır Başlığı
.dropdown-header sınıfı açılır menüden içindeki başlıkları eklemek için kullanılır:
Öğe devre dışı bırakma
Açılan menüden bir öğeyi devre dışı bırakmak için kullanın .disabled sınıfı:
Açılan Pozisyon
To ekleyin açılan sağ hizalamak .dropdown-menu-right .dropdown-menüsü ile elemana sınıfı:
Dropup
Eğer açılır menü yerine aşağıya yukarıya genişletmek değiştirmek istiyorsanız <div> ile eleman class="dropdown" için "dropup" :
Açılan Erişilebilirlik
Ekran okuyucu kullanan kişiler için erişilebilirliği iyileştirmek yardımcı olmak için, aşağıdakileri içermelidir role ve aria-* bir açılır menü oluştururken özelliklerini,:
Örnek
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
Bootstrap Açılır Referansı tamamlayın
Tüm açılır seçenekler, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Açılır Referans .