نمادها

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

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

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

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

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

به واسطه باکس کشویی به شما یاد می دهیم تا آکاردئون بسازید

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

از Collapse برای ساخت باکس هایی که با دکمه باز و بسته می شوند استفاده می شود

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

 

کلاس Collapse

طبق توضیح بالا اگر بخواهیم دقیق تر بگوییم به باز شدن اطلاعات به صورت شناور بدون بارگذاری مجدد صفحه Collapse گفته میشود.
یکی از بهترین مثال های Collapse منو های آکاردئونی میباشند که ساخت آن را در این مقاله میبینید.

برای ساخت Collapse کافیست کلاس آن را اجرا کرده و روی دکمه خود قابلیت data-toggle را اضافه کنید.
برای اینکه این مورد برای شما شفاف شود میتوانید نمونه کد زیر را دنبال کنید:

همانطور که در کد بالا مشخص است ما یک دکمه تعریف کردیم و قابلیت های collapse را به آن اضافه کردیم.
به واسطه data-target شما میتوانید دکمه خود را به موردی که قرار است نشان دهد وصل کنید.

اگر میخواهید به صورت پیشفرض کولاپس باز باشد و محتوای آن نمایش داده شود کافیست در کلاس collapse عبارت in را نیز اضافه کنید.
برای متوجه شدن این موضوع از کد زیر کمک بگیرید:

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

همچنین شما میتوانید به کمک collapse منو آکاردئونی بسازید که کد آن را برای شما قرار میدهیم.
کد زیر کدهای یک منو آکاردئونی کامل است که میتوانید از آن استفاده کنید:

 

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

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

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

 

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

 

و یا در صورت علاقه آن را در آپارات ببینید

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

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

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

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

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

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

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

  1. بهار گفت:

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

    باتشکر

    1. amir گفت:

      فیلم ها روزانه توسط مدرس ضبط میشه و توسط نویسنده روی سایت قرار داده می شود

  2. بهار گفت:

    عذر میخوام من هر چی تو سایت شما فیلم آموزش کار با افزونه یواست سئو را سرچ کردم پیدانشد لطفا در صورت امکان به ایمیلم ارسال کنید.

    باتشکر

    1. amir گفت:

      سلام افزونه Yoast هنوز آموزشی ازش ضبط نشده

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

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

*

code

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