آموزش فریمورک fundation-ایجاد button و رنگ ها

در سری آموزش هایی که در مورد فریمورک فاندیشن (foundation framework) گذاشتیم تا الان مباحث زیر بررسی و آموزش داده شدند:

  1. نحوه ی دانلود و اظافه کردن فریمورک فاندیشن به صفحات وب (برای دیدن کلیک کنید)
  2. نحوه ی ایجاد ردیف و ستون ها و ساختار رسپانسیو بودنشون (برای دیدن کلیک کنید)
  3. افست ها و چگونگی جابه جایی ستون ها در فریمورک فاندیشن بعلاوه نکات مربوط به رسپانسیو بودن افست ها (برای دیدن کلیک کنید)

اگه با مباحث بالا اشنایی ندارید پیشنهاد میکنم اول اونا رو بخونید و دوباره به این مطلب برگردید 😀 اینجوری چیزهایی که در این اموزش مطرح میشه رو بهتر متوجه خواهید شد.

در اینجا میخوایم با استفاده از فاندیشن دکمه ایجاد کنیم و مباحث رسپانسیو بودن دکمه ها رو بررسی کنیم. در اخر نیز به رنگبندی میپردازیم , با ما همراه باشید.

  • نحوه ی ایجاد دکمه یا button با استفاده از فریمورک fundation : برای ایجاد کردن دکمه ها شما میتونید از تگ های a , input و button استفاده کنید. به مثال زیر دقت کنید: (برای دیدن پیش نمایش اینجا کلیک کنید)

در دستورات بالا ابتدا اومدیم سه تا المان ساختیم که یکی از نوع input , یکی از نوع a و اخری نیز از نوع button هست. برای اینکه استایل دکمه بودن رو بهشون بدیم کافیه کلاس button رو بهشون بدیم تا به دکمه (button) تبدیل بشن 😀 نگران رنگ ابی نباشید در اخر اموزش بهتون میگم چجوری از رنگ های فریمورک استفاده کنید.

دکمه ها سایز های متفاوتی دارند که میتونید سایزشون رو با کلاس های tiny , small , medium و large کنترل کنید! دقت کنید که کلاس medium سایزش با دکمه ای که در حالت عادی ایجاد میکنید برابره : (برای دیدن پیش نمایش اینجا کلیک کنید)

در مثال بالا برای سایز های مختلف تگ های button رو نوشتم , برای دادن استایل دکمه بودن باید کلاس button استفاده بشه و همچنین برای تغییر سایز از کلاس های tiny و small و medium و large استفاده کردم! به همین راحتی از فریمورک لذت ببرید 🙂 دیگه بهتر از این چی میخواید؟!

یه نکته ی دیگه در مورد سایز دکمه ها مونده , شما ممکنه که بخواید دکمه ی شما تمامی عرض والد خودشو پر کنه در این حالت از کلاس expanded استفاده میکنیم تا عرض دکمه ی ما ۱۰۰ درصد بشه : (برای دیدن پیش نمایش اینجا کلیک کنید)

در مثال بالا با دادن کلاس expanded به تگ button باعث میشیم که این تگ تمامی عرض صفحه رو پر کنه! این حالت رو میشه برای حالت های رسپانسیو استفاده کرد! با کوچیک شدن صفحه عرض دکمه ی ما نیز کوچیک میشه.

  • رنگبندی (رنگ ها) در فریمورک فاندیشن : در فریمورک فاندیشن شما رنگ های زیر رو در اختیار خواهید داشت :
  1. رنگ نارنجی روشن : این رنگ رو با دادن کلاس warning به قسمت مورد نظر خودتون میتونید ایجاد کنید.
  2. رنگ قرمز پخته : برای استفاده از این رنگ باید کلاس alert رو به قسمت مورد نظر خودتون بدید.
  3. رنگ سبز : این رنگ رو با دادن کلاس success میتونید ایجاد کنید.
  4. رنگ خاکستری : این رنگ با کلاس secondary مشخص میشه که میتونید ازش استفاده کنید.

رنگ های بالا به صورت پیش فرض در فریمورک وجود دارند اما نگران نباشید شما در صورت نیاز میتونید خودتون رنگ مورد نظرتون رو به قسمت مورد نظری که میخواید بدید! هیچ مشکلی از لحاظ رنگبندی وجود نداره به مثال زیر دقت کنید : (برای دیدن پیش نمایش اینجا کلیک کنید)

در مثال بالا نحوه ی استفاده از رنگ های مختلف رو نشون دادم 😀 همه چیز خیلی راحته!

اگه بخواید رنگ مورد نظر خودتون رو استفاده کنید کافیه که استفاده کنید 😀 مثلا به صورت زیر : (برای دیدن پیش نمایش اینجا کلیک کنید)

در مثلا بالا من رنگ مورد نظر خودم رو درون style نوشتم 😀 به همین راحتی!

امیدوارم از این اموزش لذت برده باشید. دوستانی که مشکل یا سوال دارند از بخش نظرات مطرح کنند تا در دو صوت جواب بگیرند. موفق باشید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟