Embedded Files
Hazırlayan: AHMAD SHABLAKH
Açılır Menü :
kontrolü site içerisindeki işlevselliği ve geliştiriciye sağladığı gelişme ortamı ile birçok gelişmiş Web sitesinde kullanılmaktadır. Genellikle şehir, yaş aralığı, cinsiyet, kategori gibi çeşitli listelemeler yapmak için kullanılır.
Açılır menü, kullanıcının önceden tanımlanmış bir listeden bir değer seçmesine izin veren, değiştirilebilir bir menüdür...
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown Button
</button>
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown Link
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action 1</a></li>
<li><a class="dropdown-item" href="#">Action 2</a></li>
<li><a class="dropdown-item" href="#">Action 3</a></li>
</ul>
</div>
Örnek Açıklaması
.dropdown, bir açılır menü gösterir.
Açılır menü açmak için, bir düğme veya .dropdown-toggle ve data-bs-toggle="dropdown" özniteliği olan bir bağlantı kullanın.
Açılır menü oluşturmak için .dropdown-menu bir öğeye ekleyin . Ardından , açılır menüdeki her bir öğeye (bağlantılar veya düğmeler) <div> ekleyin .dropdown-item
Açılır Bölücü / Dropdown Divider
.dropdown-divider, açılır menünün içindeki bağlantıları ince bir yatay kenarlıkla ayırmak için kullanılır:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
</div>
Başlık / Dropdown Header
.dropdown-header, açılır menü başlık eklemek için kullanılır:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><h5 class="dropdown-header">Dropdown header 2</h5></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
</div>
Page updated
Report abuse