نمادها

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

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

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

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

سلام برنامه در این آموزش نحوه ساخت کامل منو رسپانسیو را آموزش می دهد

تا به الان روش های مختلفی را برای ساخت منو معرفی کرده ایم

این روش کاربردی ترین و رایج ترین روش برای ساخت یک منو کاملا رسپانسیو است

این منو در حالت رسپانسیو در یک دکمه قرار میگیرد که با کلیک روی آن منو باز می شود

تمام کار ها در ساخت منو به واسطه کلاس های بوت استرپ انجام می شود

 

منو بازشونده (Dropdown)

تقریبا میتوان گفت یکی از پرکاربرد ترین موارد بوت استرپ همین منو های بازشونده هستند که الان تقریبا همه سایت ها از آن استفاده میکنند.
منو باز شونده را با منو رسپانسیو اشتباه نگیرید این منو میتواند رسپانسیو هم نباشد.

برای ساخت منو کافیست از کلاس های آن استفاده کنید کلاس dropdown آغاز کننده این منو است که باید تعریف شود.
سپس با اختصاص دادن کلاس btn و dropdown-toggle دکمه ای که قرار است با کلیک روی آن زیر منو باز شود را تعیین میکنیم.

برای آنکه بتوانیم منویی که زیر منو دارد را از باقی منو ها مشخص کنیم میتوانیم از کلاس caret استفاده کنید.
این کلاس علامتی مانند فلش کنار دکمه میگذارد که نشانگر زیر منو دار بودن منو است.

برای اینکه موارد گفته شده ملموس تر باشد میتوانید از نمونه کد زیر استفاده کنید:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه نوزدهم (Panels)

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

 

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

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

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

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

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

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

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

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

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

پاسخی بگذارید

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

*

code

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