لیست کشویی از جمله لیست ها و دسته هایی است که کاربرد های زیادی دارد ، اغلب ما این دسته از لیست ها را در منو ها دیده ایم ، این نوع لیست ها در انتخاب شهر و انتخاب کشور ….. نیز در طراحی صفحات سایت کاربرد دارند.
پیشنهاد میشود برای درک بهتر این قسمت از اموزش بوت استرپ سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید ، اگر هم مطالعه نکردید نگران نباشید سعی میکنیم در این اموزش تا حدامکان به بحث های گذشته اشاره داشته باشیم.
لیست کشویی ساده
منوی کشویی منو قابل جابجایی است که به کاربر اجازه می دهد یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند اما برای تعریف همچین لیستی قطعه کد زیر را اجرا کنید :
|
1 2 3 4 5 6 7 8 9 10 |
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> |
برای ساخت کافی است کلاس .dropdown را به تگ مورد نظر اضافه کنید ، برای ایجاد حالت بازشونده ی دکمه از تگ a که برای لینک است یا تگ button استفاده کنید و کلاس .dropdown-toggle و ویژگی data-toggle=”dropdown” را به ان دهید.
در قدم بعدی با استفاده از تگ div و کلاس .dropdown-menu میتوانید مقادیر را وارد کنید اما توجه داشته باشید که در قدم اخر باید کلاس .dropdown-item را به تگ a که مخصوص لینک است یا تگ button که مخصوص طراحی دکمه است اضافه شود.
جدا کننده در لیست کشویی
شاید شما هم نیاز داشته باشید تا لیستی طراحی کنید که دسته بندی های خاص داشته باشد برای این کار کافی است از جدا کننده در لیست کشویی استفاده کنید . به قطعه کد زیر توجه کنید:
|
1 |
<div class="dropdown-divider"></div> |
برای ساخت یک جدا کننده کافی است کلاس .dropdown-divider را به تگ div اضافه کنید .
سربرگ در لیست کشویی
برای نظم بیشتر شما میتوانید از سربرگ ها نیز استفاده کنید ، سربرگ ها به شما کمک میکنند تا بتوانید لیست کشویی مرتب تری داشته باشید بدین منظور کافی است تا کلاس .dropdown-header را به تگ div اضافه کنید به مثال زیر توجه کنید :
|
1 |
<div class="dropdown-header">Dropdown header 1</div> |
حالت فعال و یا غیرفعال
برای استفاده از حالتی که فعال باشد میتوانید از کلاس .active و برای حالت غیرفعال کلاس .disabled را میتوانید استفاده کنید به مثال زیر توجه فرمایید :
|
1 2 |
<a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a> |
موقعیت لیست کشویی
یکی از ویژگی هایی که میتوانید به لیست کشویی اضافه کنید جهت باز شدن ان است . به قطعه کد زیر توجه کنید ، قطعه کد زیر منو را در جهت راست باز میکند:
|
1 |
<div class="dropdown dropright"> |
قطعه کد زیر منو را در جهت چپ باز میکند :
|
1 |
<div class="dropdown dropleft"> |
راست چین باز شدن منو
برای اینکه منوی شما در جهت راست چین قرار بگیرد کافی است کلاس .dropdown-menu-right را به تگ مورد نظر اضافه کنید ، به قطعه کد زیر توجه کنید :
|
1 |
<div class="dropdown-menu dropdown-menu-right"> |
باز شدن منو در جهت بالا
برای باز شدن منو در جهت بالا کافی است بجای کلاس .dropdown کافی است کلاس .dropup را جایگزین کنید:
|
1 |
<div class="dropup"> |
قرار دادن متن در لیست
همیشه قرار نیست چینش منوی شما به حالتی باشد که کاربر گزینه ای را برگزیند شاید نیاز داشته باشید متنی در ان قرار دهید برای استفاده از این حالت کافی است کلاس .dropdown-item-text را قرار دهید ، به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 6 |
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item-text" href="#">Text Link</a> <span class="dropdown-item-text">Just Text</span> </div> |
لیست دکمه ها به همراه منوی بازشونده یا لیست کشویی
برای اینکار کافی است قطعه کد زیر را اجرا کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div> |
شکاف در دکمه ها
|
1 2 3 4 5 6 7 8 9 |
<div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> |
گروه دکمه های عمودی همراه با لیست بازشونده
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div> |
ویدیوی قسمت هفدهم
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
پیشنهاد میشود سایر قسمت های بوت استرپ را از دوره ی بوت استرپ دنبال کنید.
موفق باشید.
