Bootstrap 5 Açılır Liste

Temel Açılır Liste

Açılır menü, kullanıcıların önceden tanımlanmış listeden değer seçmesine izin veren değişken bir menüdür:

Örnek

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Açılır Düğme
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Bağlantı 1</a></li>
    <li><a class="dropdown-item" href="#">Bağlantı 2</a></li>
    <li><a class="dropdown-item" href="#">Bağlantı 3</a></li>
  </ul>
</div>

Kendi Kendine Deneyin

Örnek Açıklama

.dropdown sınıfı ile gösterge menüsünü kullanın.

Açılır menüyü açmak için, ayarlanmış .dropdown-toggle 类和 sınıfı ve data-toggle="dropdown"

özniteliğine sahip düğme veya bağlantıya ekleyin. .dropdown-menu sınıfını <div> öğesi, gerçekten açılır menüyü inşa edebilir. Daha sonra: .dropdown-item sınıfını açılır menüdeki her öğeye (bağlantı veya düğme) ekleyin.

Açılır Menü Ayraç Çizgisi

.dropdown-divider sınıfını, açılır menüdeki bağlantıları yatay ince çizgili kenarlıkla ayırmak için kullanın:

Örnek

<li><hr class="dropdown-divider"></hr></li>

Kendi Kendine Deneyin

Açılır Menü Başlığı

.dropdown-header sınıfını, açılır menüye başlık eklemek için kullanın:

Örnek

<li><h5 class="dropdown-header">Açılır Menü Başlığı 1</h5></li>

Kendi Kendine Deneyin

Engelli ve Aktif Projeler

Engelli ve aktif öğeleri kullanarak: .active sınıfını belirli bir açılır menü öğesini vurgulamak için kullanın (mavi arka plan rengi ekler).

Açılır menüdeki bir öğeyi devre dışı bırakmak için: .disabled sınıfını (farenin üzerine gelindiğinde hafif gri metin rengi ve "no-parking-sign" simgesi alır).

Örnek

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Aktif</a></li>
<li><a class="dropdown-item disabled" href="#">Engelli</a></li>

Kendi Kendine Deneyin

Açılır Listesi Konumu

Açılır menü konumunu değiştirmek için: .dropend veya .dropstart sınıfını açılır öğeye ekleyerek "dropend" veya "dropstart" menüleri oluşturun. Lütfen, işaretçi/okun otomatik olarak eklenir:

Sağ Açılan

<div class="dropdown dropend">

Kendi Kendine Deneyin

Sol Açılan

<div class="dropdown dropstart">

Kendi Kendine Deneyin

Açılır Listesi Sağa Hizalanmış

Açılır menüyü sağa doğru hizalamak için: .dropdown-menu-end sınıfını, .dropdown-menu öğesine:

Örnek

<div class="dropdown-menu dropdown-menu-end">

Kendi Kendine Deneyin

Yukarı Açılan Listesi

Eğer aşağı açılan bir açılır menü yerine yukarı açılan bir açılır menü istiyorsanız, class="dropdown" olan <div> öğesini değiştirin "yukarı açılan"：

Örnek

<div class="dropup">

Kendi Kendine Deneyin

Açılır Metin

.dropdown-item-text Sınıf, aşağıdaki öğelere saf metin eklemek için veya bağlantılara varsayılan bağlantı stili eklemek için kullanılır.

Örnek

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Bağlantı 1</a></li>
  <li><a class="dropdown-item" href="#">Bağlantı 2</a></li>
  <li><a class="dropdown-item" href="#">Bağlantı 3</a></li>
  <li><a class="dropdown-item-text" href="#">Metin Bağlantısı</a></li>
  <li><span class="dropdown-item-text">Puro Metin</span></li>
</ul>

Kendi Kendine Deneyin

Butonlar ve Açılır Listeler Kombinasyonu

Örnek

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefon</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Kendi Kendine Deneyin

Dikdörtgenleştirilmiş Butonlar ve Açılır Listeler

Örnek

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefon</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Kendi Kendine Deneyin