-
-
مدیرجان اسمیت
کشویی
- خانه
- کشویی
دکمه های پیش فرض کشویی
<div class="dropdown">
<button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
دکمه کشویی
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-primary text-white py-2 px-3 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
لینک کشویی
</a>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
دکمه های طرح کلی
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu bg-primary">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-secondary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Secondary
</button>
<ul class="dropdown-menu bg-secondary">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-success text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Success
</button>
<ul class="dropdown-menu bg-success">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-info text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Info
</button>
<ul class="dropdown-menu bg-info">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-warning text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Warning
</button>
<ul class="dropdown-menu bg-warning">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-danger text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Danger
</button>
<ul class="dropdown-menu bg-danger">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-dark text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dark
</button>
<ul class="dropdown-menu bg-dark">
<li><a class="dropdown-item text-white" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown mt-2 me-2 d-inline-block">
<button class="btn btn-light text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Light
</button>
<ul class="dropdown-menu bg-light">
<li><a class="dropdown-item text-dark" href="#">عملیات</a></li>
<li><a class="dropdown-item text-white" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item text-white" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
کشویی دکمه تقسیم
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-primary text-white py-2 px-3">اولیه</button>
<button type="button" class="btn btn-primary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">اولیه</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-secondary text-white py-2 px-3">ثانوی</button>
<button type="button" class="btn btn-secondary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ثانوی</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-success text-white py-2 px-3">موفقیت</button>
<button type="button" class="btn btn-success text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">موفقیت</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-info text-white py-2 px-3">اطلاعات</button>
<button type="button" class="btn btn-info text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">اطلاعات</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-warning text-white py-2 px-3">هشدار</button>
<button type="button" class="btn btn-warning text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">هشدار</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-danger text-white py-2 px-3">خطر</button>
<button type="button" class="btn btn-danger text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">خطر</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-dark text-white py-2 px-3">تاریک</button>
<button type="button" class="btn btn-dark text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">تاریک</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
<div class="mt-2 me-2 d-inline-block">
<div class="btn-group">
<button type="button" class="btn btn-light text-white py-2 px-3">روشن</button>
<button type="button" class="btn btn-light text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">روشن</span>
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">لینک مجزا</a></li>
</ul>
</div>
</div>
دکمه ها با نماد
<div class="dropdown">
<button class="btn btn-primary text-primary bg-transparent p-0 border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
دکمه کشویی
</button>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-primary text-primary bg-transparent p-0 border-0 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
لینک کشویی
</a>
<ul class="dropdown-menu bg-white">
<li><a class="dropdown-item" href="#">عملیات</a></li>
<li><a class="dropdown-item" href="#">یک اقدام دیگر</a></li>
<li><a class="dropdown-item" href="#">سایر موارد دیگر</a></li>
</ul>
</div>
دکمه های گرد
<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
<li><a class="dropdown-item fs-14 mb-2" href="#">امروز</a></li>
<li><a class="dropdown-item fs-14 mb-2" href="#">7 روز گذشته</a></li>
<li><a class="dropdown-item fs-14 mb-2" href="#">ماه گذشته</a></li>
<li><a class="dropdown-item fs-14 mb-2" href="#">1 سال گذشته</a></li>
<li><a class="dropdown-item fs-14 mb-0" href="#">همیشه</a></li>
</ul>
<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-stackshare-line"></i> اشتراک گذاری</a></li>
<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-edit-line"></i> 7 روز گذشته</a></li>
<li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-delete-bin-7-line"></i> ماه گذشته</a></li>
</ul>
<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-user-line"></i> پروفایل</a></li>
<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-settings-3-line"></i> تنظیمات</a></li>
<li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-logout-circle-line"></i> خروج</a></li>
</ul>