متریال دیزاین بوتسترپ ورژن 5 (کمپوننت Carousel)

24 فروردین 1400 برچسب‌ها:

متریال دیزاین بوتسترپ با نام Material Design Bootstrap  و مخفف MDB شناخته میشود. به  سایت رسمی آن نگاهی بیندازید! میبینید این کمپوننت ها چگونه به طراحی فرانت اند سایت شما کمک میکند؟ کافیست این کدها کپی پیست شوند. به همین سادگی و به همین سرعت میتوان یک المان را با تمام زیبایی هایش ایجاد کرد.

اگر میخواهید درباره لی اوت بوتسترپ (بدون متریال دیزاین) اطلاعات بدست اورید این مقاله را بخوانید!

آوردن یک اسلایدر

بیایید با یک اسلایدر یا همان carousel آغاز کنیم.

در ویدیو بالا میبینید چگونه یک carousel در متریال دیزاین بوتسترپ را کپی پیست میکنیم

تشریح ویدیوی بالا (آشنایی با متریال دیزاین بوتسترپ)

گام اول: وقتی طبق ویدیو بالا به سایت رفتید و دانلود کردید ان را اکسترکت کنید و داخل پوشه بروید و روی فایل html آن کلیک کنید تا در بروزر باز شود و محتوای پیشفرض آن را مشاهده نمایید.

گام دوم: میخواهیم محتوای پیشفرض آن را که درباره MDB است تغییر دهیم. مطابق عملکردها در ویدیو پیش بروید و در یک کد ادیتور (اینجا از visual studio استفاده شد) کد ها را تغییر دهید.

گام سوم: به سایت متریال دیزاین بوتسترپ رفته و از منوی دیواری آن قسمت Components را انتخاب کرده و از کشوی زیرین آن که شامل تعداد زیادی کمپوننت است مانند nav و badge و button و … کمپوننت Carousel را انتخاب میکنیم.

گام 4: برای اینکه کدهای کروسل را کپی کنیم روی دکمه copy کلیک کردیم. سپس همان کدها را در کد ادیتور paste کردیم. در ویدیو برای این کار از Ctrl + V استفاده شد. میتوانستیم از راه کلیک راست و انتخاب گزینه paste هم استفاده کنیم.

گام 5: به بروزر نگاه کنید و آن را رفرش کنید. تغییرات اعمال شده را ببینید! یک کروسل افزوده شده است.

در مقاله بعدی درباره تغییر جزییات یک کروسل بحث میکنیم. مثلا اینکه چطور سرعت یک کروسل را کاهش دهیم.