بوت استرپ دراپ دان مؤلفه ای با گزینه های متنوعی برای ارائه اجزای منحصر به فرد دراپ دان که مطابق با استانداردهای طراحی مترونیک است.
Turn any .btn into a dropdown toggle with some markup changes. Here’s how you can put them to work with <button>.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuدکمه" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دکمه دراپ دان
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuدکمه">
<a class="dropdown-item" href="#">اکشن</a>
<a class="dropdown-item" href="#">اکشن دیگر</a>
<a class="dropdown-item" href="#">اکشن سوم</a>
</div>
</div>Turn single icon buttons into a dropdown toggle with some markup changes.
<div class="dropdown dropdown-inline mr-4">
<button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor"></i>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-ver"></i>
</button>
<div class="dropdown-menu">
...
</div>
</div>شما can do this with any button variant as well:
<!-- نمونه single danger button-->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">اکشن</button>
<div class="dropdown-menu">
...
</div>
</div>
ایجاد کردن split button dropdowns with virtually the same markup as single button dropdowns by adding .dropdown-toggle-split
for proper spacing around the dropdown caret.
<div class="btn-group">
<button type="button" class="btn btn-primary">اولیه</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle دراپ دان</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>دکمه dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="btn-group">
<button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دکمه بزرگ
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary font-weight-bold btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دکمه کوچک
</button>
<div class="dropdown-menu">
...
</div>
</div>
Trigger dropdown menus above element by adding .dropup to the parent element.
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ آپ
</button>
<div class="dropdown-menu">
...
</div>
</div>
Trigger dropdown menus at the right of the element by adding .dropright to the parent element.
<div class="btn-group dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ آپ
</button>
<div class="dropdown-menu">
...
</div>
</div>
Trigger dropdown menus at the left of the element by adding .dropleft to the parent element.
<div class="btn-group dropleft">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ آپ
</button>
<div class="dropdown-menu">
...
</div>
</div>Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
<div class="btn-group">
<button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
فرم
</button>
<div class="dropdown-menu dropdown-menu-lg">
<form class="px-8 py-8">
<div class="form-group">
<label for="exampleدراپ دانFormپست الکترونیک1">آدرس الکترونیک</label>
<input type="email" class="form-control" id="exampleدراپ دانFormپست الکترونیک1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleدراپ دانFormکلمه عبور1">کلمه عبور</label>
<input type="password" class="form-control" id="exampleدراپ دانFormکلمه عبور1" placeholder="کلمه عبور">
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox"/> مرا به خاطر بسپار
<span></span>
</label>
</div>
<button type="submit" class="btn btn-primary">ورود</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item px-8" href="#">ثبت نام</a>
<a class="dropdown-item px-8" href="#">فراموشی رمز عبور</a>
</div>
</div>
Use data-offset or data-reference to change the location of the dropdown.
<div class="dropdown mr-1">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" id="dropdownMenuآفست" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
آفست
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuآفست">
...
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">منبع</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuمنبع" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle دراپ دان</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuمنبع">
...
</div>
</div>
