• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آشنایی با فریمورک Pure (قسمت سوم)

2 5208 ۲۸ تیر ۹۳
1 2

با سلامی دوباره خدمت شما کاربران عزیز سون لرن.اگه دو مطلب قبلی رو که درباره ی pure انتشار دادیم دنبال کرده باشید باید بخاطر داشته باشید که pure یک فریم ورک طراحی و استایل دهی برای عناصر وب می باشد که کار برنامه نویسی تحت css رو آسون تر می کنه.تو قسمت های قبل یاد گرفتیم که چطوری از این فریم ورک برای دکمه ها و جدول ها و گرید بندی رسپانسیو استفاده کنیم؛تو این قسمت هم انشاالله می خواهیم به سایر عناصر و کلاس های خاصشون تو pure بپردازیم.پس با ما باشید....

فرم ها

همونطور که مستحضرید فرم ها از عناصر زیادی تشکیل می شوند.نظیر ورودی های داده های متنی (input) و یا محدوده های متنی(text area) و یا انتخاب بین چند گزینه(select) ، دکمه های تایید ،تیک زدن چند گزینه و یا یک گزینه ،کپچا و ....  .که ما استایل دهی دکمه ها رو در قسمت قبل بررسی کردیم.خب برای معرفی ساده ی کلاس های این عناصر در این قسمت به بررسی مثالی  ساده خواهیم پرداخت.سپس تمام کد مورد نظر را با هم کنکاش خواهیم کرد :

 

همونطور که ملاحضه فرمودید بدون هیچ css نویسی و فقط به کمک html همچین عناصری زیبا به کارمون اعمال کردیم.

خب حالا بریم سراغ موشکافی این کد و کلاس ها مهم pure برای هر عنصر :

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

کلاس توضیح
pure-form استایل اصلی برای کلاس ها
pure-form-aligned تعیین  فواصل فرم از سایر عناصر

سپس در خطوط بعد هم به کرار مشاهده می کنیم که کلاس pure-control-group برای هر عنصری که در فرم استفاده شده آمده تا نظم خاصی رو به فرم القا کنه و جایگاه عناصر رو منظم کنه.

در خط 27 همpure-u-1 و pure-u-md-1-24 از سیستم گرید رسپانسیو pure استفاده شده که در قسمت یک کمی معرفی شد اما در این جا می خواهیم با مثال مفهومی آنرا واضح تر کنیم :در مثال اول تعریف کرده ایم که در سیستم اولیه گرید pure یعنی سیستم 5 تیکه یک قسمت کامل رو اشغال کرده ایم.چون یک برابر با یک یکم هست و pure-u-1 برابر است با pure-u-1-1 .

مثال دوم هم ابراز کردیم که در نمایشگر های کوچکتر از 768(و مساوی این عدد) تنها یک بیست و چهارم رو اون عنصر اشغال کنه.که md نشان دهنده ی اندازه ی نمایشگر هاست.

کلاس دیگه ای هم که اینجا بکار نبردیم ولی به زیبایی input-box ها می افزایه کلاس pure-input-rounded می باشد که گوشه ی این عناصر رو خود به خود و بدون نیاز به کد نویسی گرد می کنه.

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

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    erfan zamanzade(۸ شهریور ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram