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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۴ فروردین ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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 محل مورد نظر خودتون قرار بدین. پوشه بندی بصورت زیر خواهد شد:

MyWebsite/
  |--css/
  |  |--materialize.min.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.min.js
  |
  |--index.html

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="js/materialize.min.js"></script>             
  </head>
  <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
  </head>
  <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

خروجی:md1

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

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

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

یا علی

Source

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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