در خدمت شما هستیم با آموزش Bootstrap جلسه بیستم (Dropdown)
آموزش Bootstrap جلسه بیستم (Dropdown) از سری آموزش های تک قسمتی است
سلام برنامه در این آموزش نحوه ساخت کامل منو رسپانسیو را آموزش می دهد
تا به الان روش های مختلفی را برای ساخت منو معرفی کرده ایم
این روش کاربردی ترین و رایج ترین روش برای ساخت یک منو کاملا رسپانسیو است
این منو در حالت رسپانسیو در یک دکمه قرار میگیرد که با کلیک روی آن منو باز می شود
تمام کار ها در ساخت منو به واسطه کلاس های بوت استرپ انجام می شود
منو بازشونده (Dropdown)
تقریبا میتوان گفت یکی از پرکاربرد ترین موارد بوت استرپ همین منو های بازشونده هستند که الان تقریبا همه سایت ها از آن استفاده میکنند.
منو باز شونده را با منو رسپانسیو اشتباه نگیرید این منو میتواند رسپانسیو هم نباشد.
برای ساخت منو کافیست از کلاس های آن استفاده کنید کلاس dropdown آغاز کننده این منو است که باید تعریف شود.
سپس با اختصاص دادن کلاس btn و dropdown-toggle دکمه ای که قرار است با کلیک روی آن زیر منو باز شود را تعیین میکنیم.
برای آنکه بتوانیم منویی که زیر منو دارد را از باقی منو ها مشخص کنیم میتوانیم از کلاس caret استفاده کنید.
این کلاس علامتی مانند فلش کنار دکمه میگذارد که نشانگر زیر منو دار بودن منو است.
برای اینکه موارد گفته شده ملموس تر باشد میتوانید از نمونه کد زیر استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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 class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه نوزدهم (Panels)
آموزش Bootstrap جلسه بیست و یکم (Collapse)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا آن را در آپارات مشاهده کنید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه دوم (start)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
very good tnx