در خدمت شما هستیم با آموزش Bootstrap 4 جلسه هفدهم (Dropdown)
آموزش Bootstrap 4 جلسه هفدهم (Dropdown) از سری آموزش های تک قسمتی است.
ساخت زیر منو ساده
در آموزش های قبلی اشاره ای به ساخت زیر منو ها و منو های ساده کردیم در این جلسه اختصاصی میپردازیم به این موضوع در مرحله اول یک منو ساده زیر منو دار میسازیم برای این کار نیاز به تگ button داریم اما قبل از آن نیاز به یک div داریم که کلاس dropdown به آن بدهیم حال همانطور که در آموزش ساخت دکمه گفتیم دکمه ی خود را ایجاد میکنیم آن دکمه که قرار است زیر منو داشته باشد را برایش یک div میسازیم و کلاس dropdown-menu را به آن میدهیم سپس داخل این div تگ های a با کلاس dropdown-item قرار میدهیم به همین راحتی دکمه ای با قابلیت زیر منو ایجاد کردیم برای واضح شدن موضوع از کد زیر کمک بگیرید:
<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>
زیر منو با قابلیت divider
ابتدا به توضیح divider میپردازیم اگر میخواهید زیر منو های خود را از هم جدا کنید و در دسته بندی های مختلف قرار دهید divider گزینه ای مناسب است. برای ساخت divider کافیست شما هرجا که نیاز به تفکیک دارید یک تگ div تعریف کنید و کلاس dropdown-divider را در آن قرار دهید به همین راحتی میتوانید برای زیر منو ها مرز تعیین کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
زیر منو های header دار
اگر میخواهید به زیر منو های خود قابلیت دارا بودن header را اضافه کنید ابتدا باید کلاس آن را در تگ div قرار دهید کلاس مربوط به این کار dropdown-header است . هرجا که نیاز به هدر دارید کافیست این مورد را اضافه کنید تا هدر برای شما ایجاد شود برای واضح شدن موضوع کافیست از کد زیر استفاده کنید:
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
فعال و غیرفعال کردن زیر منو
شما میتواند موارد زیر منو رو فعال یا غیر فعال کنید اگر قصد فعال کردن زیر منو ای را دارید کافیست به آن کلاس active را بدهید و اگر قصد غیر فعال کردن زیر منو ای را دارید میتوانید به آن کلاس disabled را بدهید توجه کنید کلاس ها را باید به تگ های a بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="container">
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).</p>
<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="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
موقعیت باز شدن زیر منو
شما میتوانید تعیین کنید که زیر منو هایتان را در جهت چپ باز کنید یا در جهت راست بوت استرپ برای این مورد ۲ کلاس آماده کرده است که میتوانید از آن استفاده کنید برای این مورد اگر میخواهید زیر منو در جهت راست باز شود کلاس dropright و اگر میخواهید زیر منو در جهت چپ باز شود باید کلاس dropleft را استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="dropdown dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropright 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>
</div>
باز شدن زیر منو در جهت بالا
نکته ای که وجود دارد در بوت استرپ منو ها هوشمند هستند و اگر فضای کافی نداشته باشند مناسب ترین جهت را خودشان انتخاب کرده و در آن جهت باز میشوند اگر میخواهید زیر منو شما در جهت بالا باز شود از کلاس dropup به جای کلاس dropdown استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropup button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
نوشتن متن در زیر منو
تا به اینجا در زیر منو از تگ های a استفاده کردیم و یا از دکمه ها شاید شما بخواهید توضیحاتی در زیر منو خود بنویسید در این صورت میتوانید از کلاس آماده بوت استرپ آن استفاده کنید کلاسی که بوت استرپ برای این مورد آماده کرده dropdown-item-text است برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
دکمه های گروهی با زیر منو
شما میتوانید برای دکمه های گروهی خود زیر منو بسازید برای این کار کافیست آن دکمه ای که میخواهد زیر منو داشته باشد را مجددا داخل یک div با کلاس btn-group قرار دهید و سپس طبق آموزش ساخت زیر منو برای دکمه ها اقدام کنید این آموزش را در جلسه مربوط به button کاملا توضیح داده ایم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
کلاس های رنگی و split
زیر منو ها هم مانند باقی موارد از کلاس های رنگی پشتیبانی میکنند اما قبل از آن درباره split صحبت میکنیم که قبلا هم درباره آن توضیح داده ایم در اصل split این امکان را میدهد که شما به کمک کلاس dropdown-toggle-split بتوانید منو و زیر منو را تفکیک کرده و به هردو امکان باز کردن صفحه را بدهید اما درباره کلاس های رنگی شما میتوانید از کلاس btn به اضافه کلاس های رنگی استفاده کنید به عنوان مثال btn-success ما کلاس های رنگی را برای شما لیست میکنیم و هر کدام را توضیح میدهیم:
- btn-primary : به کمک این کلاس رنگ آبی ساخته میشود.
- btn-secondary : این کلاس رنگ خاکستری میسازد.
- btn-success : رنگ سبز توسط این کلاس ساخته میشود.
- btn-info : آبی کمرنگ رنگی است که این کلاس ایجاد میکند.
- btn-warning : رنگ نارنجی را میتوانید از این کلاس بگیرید.
- btn-danger : این کلاس رنگ قرمز میسازد.
برای واضح شدن موضوع از کد زیر کمک بگیرید:
<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>
ساخت دکمه عمودی زیر منو دار
شما میتوانید دکمه های خود را به صورت عمودی بسازید و به آن قابلیت زیر منو بدهید برای این کار کافیست کلاس btn-group-vertical را به جای btn-group استفاده کنید و هر دکمه ای که قرار است زیر منو داشته باشد مجددا داخل div با کلاس btn-group قرار بگیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).</p>
<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="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>Add the .dropright class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:</p>
<div class="dropdown dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropright 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>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>Add the .dropleft class next to the dropdown menu to left-align the dropdown. Note that the caret/arrow is added automatically. Also note that we float the dropdown to the right:</p>
<div class="dropdown dropleft float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropleft 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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu.</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Wide dropdown button to demonstrate this example
</button>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropup button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link styling.</p>
<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-text" href="#">Text Link</a>
<span class="dropdown-item-text">Just Text</span>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Dropdown Split Buttons</h2>
<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>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary 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>
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success 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>
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info 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>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning 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>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger 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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Vertical Button Group with Dropdown</h2>
<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>
</div>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه شانزدهم (Card)
آموزش Bootstrap 4 جلسه هجدهم (Navs)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.