آموزش طراحی متریال با Materialize (جلسه 2) - نصب و راه اندازی

- visibility ٠ mode_comment

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

در این جلسه قصد داریم که توضیح بدیم از چه روشهایی میتونین از این ابزار استفاده کنید.

دو روش کلی برای استفاده از Materialize وجود داره:

  • نصب محلی
  • نصب بر پایه CDN

روش اول : نصب محلی یا Local

در ابتدا به آدرس http://materializecss.com/getting-started.html میریم و آخرین نسخه در دسترس اون رو دانلود میکنیم.download local

بعد از اون فایلهای materialize.min.js و materialize.min.css رو بردارید و در پوشه js و css محل مورد نظر خودتون قرار بدین. پوشه بندی بصورت زیر خواهد شد:

در پوشه فونت هم roboto قرار گرفته که میتونین اون رو تغییر بدین. حالا index.html رو باز کنید و کدهای زیر رو درونش قرار بدین و فایلهای مورد نظر رو وارد کنید:

همونطور که در بالا دیدید فایلهای مورد نظر رو وارد کردیم و همچنین Material Icon که بصورت یک فونت آیکون هست رو قرار دادیم. jQuery رو بصورت CDN وارد شده است. بعد از title هم یک تگ meta با نام viewport قرار داده شده که برای طراحی واکنشگرا کاربرد داره. خروجی بصورت زیر خواهد بود:md1

روش دوم : نصب بر پایه CDN

شما میتونین فایلهای js و css رو بصورت CDN قرار بدین. آدرس JS بصورت زیر است:

آدرس CSS بصورت زیر هست:

حالا اگر همه کدها رو برداریم و در فایل index.html قرار بدیم، خروجی چیزی مثل گذشته خواهد بود:

خروجی:md1

در جلسه بعد در مورد رنگ ها در Materialize براتون توضیح میدم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.