دراپ داون
<div >
<div >
<h5>دکمه و لین کدراپ داون</h5>
</div>
<div >
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
دکمه دراپ داون
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
</ul>
</div>
<div >
<a href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
لینک دراپ داون
</a>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>دراپ داون منو محتوا</h5>
</div>
<div >
<div >
<div >
<button type="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
سربرگ <i ></i>
</button>
<div >
<div >
<h5 >خوش آمدید!</h5>
</div>
<!-- item-->
<a href="#">عملیات</a>
<a href="#">عملیاتی دیگر</a>
<a href="#">یک عملیات دیگر</a>
<div ></div>
<a href="#">لینک جدا</a>
</div>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
متن <i ></i>
</button>
<div >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
</p>
<p >
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
</p>
</div>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
فرم ها <i ></i>
</button>
<div >
<form>
<div >
<label for="exampleDropdownFormEmail">آدرس ایمیل</label>
<input type="email" id="exampleDropdownFormEmail"
placeholder="email@example.com">
</div>
<div >
<label for="exampleDropdownFormPassword">Password</label>
<input type="password" id="exampleDropdownFormPassword"
placeholder="رمز ورود">
</div>
<div >
<div >
<input type="checkbox" id="rememberdropdownCheck">
<label for="rememberdropdownCheck">بخاطر بسپار</label>
</div>
</div>
<button type="submit" >ورود</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>تنوع رنگ</h5>
</div>
<div >
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
اصلی
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
ثانویه
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
موفقیت
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
خطرناک
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
اخطار
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
اطلاعات
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
روشن
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
تاریک
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>اندازه دراپ داون</h5>
</div>
<div >
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
دکمه بزرگ
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >دکمه بزرگ جداشده</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
دکمه کوچک
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" > دکمه کوچک جداشده</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>حاشیه دراپ داون</h5>
</div>
<div >
<div>
<div >
<button type="button" >اصلی</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">اصلی</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >ثانویه</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">ثانویه</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >موفقیت</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">موفقیت</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >خطرناک</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">خطرناک</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >اخطار</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">اخطار</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >اطلاعات</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">اطلاعات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >روشن</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">روشن</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >تاریک</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
</button>
<ul >
<li><a href="#">تاریک</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>ترازبندی</h5>
</div>
<div >
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
دراپ داون <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
ترازبندی راست <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-display="static" aria-expanded="false"> ترازبندی راست بزرگ <i
></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-display="static" aria-expanded="false"> ترازبندی چپ بزرگ <i
></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i ></i> ابتدا
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
انتها <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
بالا <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>تنوع روشن دراپ داون</h5>
</div>
<div >
<div>
<div >
<button type="button" >اصلی </button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >ثانویه</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >موفقیت</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >خطرناک</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >اخطار</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >اطلاعات</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >روشن</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
<div>
<div >
<button type="button" >تاریک</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
</div>
</div>
<div >
<div >
<h5>تنوع دراپ داون بالا</h5>
</div>
<div >
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
بالا <i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
<div >
<button type="button" >
بالا جدا
</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >تغییر وضعیت </span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
انتها <i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
<div >
<button type="button" >
انتها جدا
</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >تغییر وضعیت </span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i ></i> ابتدا
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
<div >
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >تغییر وضعیت</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
<button type="button" >
ابتدا جدا
</button>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
aria-expanded="false">
بالا <i ></i>
</button>
<ul >
<li><button type="button">عملیات</button></li>
<li><button type="button">عملیاتی دیگر</button></li>
<li><button type="button">یک عملیات دیگر</button></li>
</ul>
</div>
<div >
<button type="button" >بالا</button>
<button type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span >بازکردن دراپ داون</span>
<i ></i>
</button>
<ul >
<li><a href="#">عملیات</a></li>
<li><a href="#">عملیاتی دیگر</a></li>
<li><a href="#">یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a href="#">لینک جدا</a></li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>بستن خودکار</h5>
</div>
<div >
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-auto-close="true" aria-expanded="false">
پیش فرض <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-auto-close="inside" aria-expanded="false">
کلیک خارج <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-auto-close="outside" aria-expanded="false">
کلیک داخل <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
<div >
<button type="button" data-bs-toggle="dropdown"
data-bs-auto-close="false" aria-expanded="false">
بستن سفارشی <i ></i>
</button>
<ul >
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
<li><a href="#">آیتم منو</a></li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>دراپ داون با آیکن</h5>
</div>
<div >
<div >
<button type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i ></i> پیش فرض
</button>
<ul >
<li><a href="#"><i ></i> آیتم منو</a>
</li>
<li><a href="#"><i ></i> آیتم منو</a>
</li>
<li><a href="#"><i ></i> آیتم منو</a>
</li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>هاور دراپ داون </h5>
</div>
<div >
<div >
<button type="button"
data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">هاور</button>
<ul >
<li><a >عملیات</a></li>
<li><a >عملیاتی دیگر</a></li>
<li><a >یک عملیات دیگر</a></li>
<li>
<hr >
</li>
<li><a >لینک جدا</a></li>
</ul>
</div>
</div>
</div>
<div >
<div >
<h5>آیکن</h5>
</div>
<div >
<div >
<button type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i ></i>
</button>
<ul >
<li><a href="#"><i ></i> آیتم منو</a>
</li>
<li><a href="#"><i ></i> آیتم منو</a>
</li>
<li><a href="#"><i ></i> آیتم منو</a>
</li>
</ul>
</div>
</div>
</div>
