نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیستم (Dropdown)

در خدمت شما هستیم با آموزش 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)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارات مشاهده کنید

و یا توسط مسیر زیر دریوتیوب ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیستم (Dropdown): نوع فایل:mp4 حجم فایل:38.90 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

یک دیدگاه برای “آموزش Bootstrap جلسه بیستم (Dropdown)”

  1. javid گفت:

    very good tnx

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.