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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت اول - شروع طراحی

50099 ۲۲ اسفند ۹۲

سلام دوستان.

حتما تاحالا واژه ی طراحی ریسپانسیو یا واکنش گرا رو شنیدید. منظور از طراحی سایت به صورت ریسپانسیو اینه که اون سایت با توجه به سایز صفحه نمایش کاربر واکنش نشون بده و روی دستگاه هایی مثل موبایل، تبلت، دسکتاپ و لپتاپ ظاهر درستی داشته باشه.

یکی از نمونه های طراحی ریسپانسیو همین سایت سون لرن هست. شما میتونید با موبایل یا تبلتتون سایت رو باز کنید و سایت رو خیلی شیک و زیبا ببینید. در صورتی که اگر سایت هایی که ریسپانسیو نیستند رو با همین موبایلتون باز کنید میبینید که همه چیز بهم ریخته و انگار نه انگار که css ای هم برای سایت نوشته شده!

یکی از روش های طراحی سایت به صورت واکنش گرا، استفاده از فریم ورک هاست. فریم ورک هایی از جمله Foundation و Bootstrap و Skeleton و YAML و ... که میتونید یه سر به مستنداتشون بزنید و ببینید کدوم یکی بیشتر به درد کار شما میخوره.

برای این آموزش قصد داریم با استفاده از فریم ورک بوت استرپ 3 (نسخه 3.1.1)، طراحی قالب ریسپانسیو رو به شما آموزش بدیم. میتونید دموی قالبی که قراره بسازیم رو ببینید.

خب، برای شروع از اینجا روی Download Sass کلیک کنید. قبلا در سون لرن آموزش Sass رو داشتیم. پیشنهاد میکنم اگر با Sass آشنایی ندارید حتما قبل از اینکه جلسه های بعدی این آموزش رو دنبال کنید یه نگاه کوتاهی روی آموزش های Sass داشته باشید که بعدا دچار مشکل نشید.

یادآوری : برای این آموزش از نسخه 3.1.1 بوت استرپ استفاده کردیم که میتونید این نسخه رو از اینجا دانلود کنید.

حالا فایل دانلود شده رو از حالت فشرده خارج کنید.پوشه ای که از حالت فشرده خارج شده یک پوشه به اسم vendor وجود داره. این پوشه رو باز کنید و بعدش هم پوشه assets رو باز کنید. همینجا یک پوشه به اسم mytheme درست میکنیم. قراره کل فایل های پروژه ی ما در این پوشه قرار بگیره. حالا پوشه های img و css و js و font رو در همین پوشه mytheme ایجاد میکنیم.

داخل پوشه assets سه تا پوشه دیگه هست. stylesheets که فایل های sass بوت استرپ داخلش هست. javascripts که پلاگین های جی کوئری بوت استرپ اینجاست. fonts هم مربوط به آیکون هایی هست که بوت استرپ اونهارو به صورت فونت آماده کرده.

RWD-bootstrap3-1-0

برای این آموزش ما دو صفحه بیشتر نداریم یکی index.html و یکی هم single.html پس همین الان داخل پوشه mytheme این فایل هارو درست کنید و فایل index.html رو باز کنید و کدهای زیر رو بنویسید:

متاتگ خط 5 مشخص میکنه که صفحه سایت ما در IE با بالاترین مود که اون ورژن IE پشتیبانی میکنه نشون داده بشه. برای اطلاعات بیشتر اینجا رو بخونید.

متاتگ خط 6 هم دو کار میکنه، یکی اینکه صفحه سایتمون رو داخل گوشی با عرضی به اندازه عرض خود گوشی باز میکنه، یکی هم اینکه مقدار زوم اولیه صفحه رو تعیین میکنه که چون عدد یک دادیم یعنی صفحه بدون زوم لود بشه.

متاتگ خط 5 که هیچی ولی متاتگ خط 6 باید حتما تو طراحی های ریسپانسیو رعایت بشه. البته متاتگ خط 6 مقادیر دیگه ای هم برای content قبول میکنه مثلا maximum-scale=1 که بیشترین مقداری هست که کاربر میتونه زوم کنه و عدد یک یعنی نمیتونه زوم کنه یا مثلا user-scalable=no که میگه کاربر اصلا قادر به زوم کردن نباشه.

خط 9 هم که استایل بوت استرپ رو فراخوانی میکنیم. (این فایل بعدا از کامپایل فایل sass خودش ساخته میشه)

از خط 13 تا 16 هم دوتا فایل Respond.js و HTML5 Shim رو برای مرورگرهای IE8 و پایینتر بارگذاری کردیم که تگ های html5 و مدیا کوئری ها رو پشتیبانی کنند.

خط 21 هم جی کوئری رو لود میکنیم که وقتی خواستیم از پلاگین های قسمت جاوااسکریپت بوت استرپ استفاده کنیم، کار کنه. این پلاگین هارو بعدا موقع طراحی هرجا که لازم شد زیر همین خط اضافه میکنیم.

قبل از هرچیزی باید نرم افزار کوالا رو باز کنید. قبلا در اولین قسمت سری آموزش sass راجع بهش توضیح داده شده که چی هست و چطوری باید نصبش کرد (حتما حتما حتما بخونید). طبق عکس زیر روی دکمه بعلاوه کلیک کنید، پنجره Browse For Folder باز میشه.

RWD-bootstrap3-1-1

حالا پوشه stylesheets (bootstrap-sass-master\vendor\assets\stylesheets) رو پیدا کنید و OK بزنید تا فایل sass پروژه برای کامپایل شدن add بشه. دو تا فایل براتون اضافه میشه. روی bootstrap\bootstrap.scss کلیک راست کنید و remove رو بزنید چون با این فایل کاری نداریم. فایل bootstrap.scss میمونه که روی این فایل باید کلیک راست کنید و گزینه Set Output Path رو بزنید تا مسیر خروجی فایل کامپایل شده رو مشخص کنیم. پوشه css واقع در پوشه mytheme که ساختیم رو باز کنید (bootstrap-sass-master\vendor\assets\mytheme\css) و در قسمت file name بنویسید bootstrap.css و save رو بزنید.

روی bootstrap.scss که در کوالا هستش کلیک کنید. سمت راست برنامه یه سایدبار تیره باز میشه مثل شکل زیر، گزینه auto compile باید حتما تیک خورده باشه که به محض اینکه تغییرات رو داخل در فایل های scss اعمال کردید و فایل رو ذخیره کردید، کوالا خودش فایل رو براتون کامپایل کنه تا دیگه لازم نباشه هردفعه دکمه compile کوالا رو بزنید. Output Style رو هم روی compressed بذارین که فایل cssتون فشرده بشه. حالا روی دکمه compile کلیک کنید تا برای بار اولی که این فایل bootstrap.css وجود نداره ساخته بشه.

RWD-bootstrap3-1-2

نرم افزار کوالا رو نبندید فقط بدیدش پایین و بذارین باز باشه تا هروقت که تغییرات فایل های scss رو داخل IDE خودتون save کردید این نرم افزار خودش براتون فایل رو کامپایل کنه و bootstrap.css رو تغییر بده.

حالا وقتشه با sass کار کنیم. گفتیم که فایل های sass داخل پوشه stylesheet هستند. (bootstrap-sass-master\vendor\assets\stylesheets). این پوشه رو باز کنید و بعد فایل bootstrap.scss رو باز کنید.

RWD-bootstrap3-1-3

میبینید که بوت استرپ همه ی فایل های sass رو که داخل پوشه bootstrap هستند اینجا ایمپورت کرده و ما میتونیم با هرکدوم که کار نداریم پاکشون کنیم و دیگه تو فایل کامپایل شده ی css نمیان. خط دوم این فایل، فایل _variables.scss رو ایمپورت کرده. این فایل شامل متغیرهایی مثل رنگها، فونت ها، اندازه ها، فاصله ها، اندازه هایی برای گرد کردن گوشه ها و در کل تمام متغیرهایی هست که داخل بقیه فایل های sass استفاده شده بنابراین در بالاترین خط قرار داره. حالا فایل _variables.scss که داخل پوشه bootstrap هست رو باز کنید.

نکته : در کل همه ی فایل های sass که بوت استرپ ازشون استفاده کرده داخل این پوشه bootstrap هستند پس وقتی میگم فلان فایل Sass رو باز کنید یعنی بیاید تو این پوشه و بازشون کنید.

ضمنا فایل bootstrap.scss داخل پوشه bootstrap رو هم حذف کنید، نیازی بهش نیست.

بیاید یه نگاهی به محتوایت _variables.scss داشته باشیم:

RWD-bootstrap3-1-4

خب! حالا میخوایم بکگراند صفحه رو عوض کنیم. در خط اول فایل _variables.scss قراره متغیرهایی که خودمون تعریف میکنیم رو همراه یه کامنت مینویسیم که بدونیم این هارو خودمون اضافه کردیم. کد زیر رو بنویسید تا رنگ دلخواه خودمون رو تعریف کنیم:

بعد مقدار متغیر $body-bg رو از #fff به $color-cream تغییر میدیم. به این ترتیب رنگ پس زمینه صفحه عوض میشه.

رنگ متن ها هم که دقیقا دو خط بعد از $body-bg هست توسط متغیر $text-color تعیین شده و کاریش نداریم چون مقدارش همون مقدار مورد نظر ماست.

رنگ لینکمون هم آبی هست ولی نمیخوایم آبی باشه میخوایم خاکستری باشه پس مقدار متغیر $link-color رو از $brand-primary به $gray تغییر میدیم. مقدار $gray رو قبلا تو خط بالاتر، خود بوت استرپ مشخص کرده و ما فقط ازش استفاده میکنیم.

RWD-bootstrap3-1-5

حالا که تغییراتمون رو انجام دادیم یه ctrl+s میزنیم تا فایلمون Save بشه. چون کوالا باز بود الان خودش فایل bootstrap.scss رو کامپایل میکنه و کافیه شما صفحه index.html رو دوباره باز کنید یا رفرش کنید. اگر رنگ بکگراند body عوض نشده بود، دو سه بار ctrl+f5 رو بزنید درست میشه.

به نظرم برای این قسمت کافیه. تو قسمت بعدی گرید بندی بوت استرپ رو براتون توضیح میدم و منوی بالای سایت رو هم درست میکنیم.

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

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

  • ‏‏
    Chacha Lity(۲ دی ۱۳۹۳)

    سلام
    کارهایی را که می گید رو قدم به قدم انجام میدم
    ولی وقتی میخوام فایل های پوشه bootstrap-sass-master\vendor\assets\stylesheets
    رو ببینم تو کوالا پوشه رو اضافه میکنه ولی فایلی نشون نمیده وقتی هم refresh رو میزنم خطا میده
    0 new file
    نمی دونم جریان چیه؟

  • ‏‏
    fatemeh(۲ دی ۱۳۹۳)

    با سلام من پوشه sass را دانلود کردم ولی پوشه vendor داخلش نیست میشه راهنمایی کنید؟

  • ‏‏
    M RAHIMI(۱۲ دی ۱۳۹۳)

    سلام
    من طبق آموزش پیش رفتم ولی تصویر پس زمینه عوض نشد ctrl+f5 هم امتحان کردم فایده نداشت.
    میشه سورس فایل رو چک کنید ببینید مشکل از کجاست؟ یه دنیا ممنوم
    http://s5.picofile.com/file/8161250834/assets.zip.html

  • ‏‏
    arash shirazi(۱۳ دی ۱۳۹۳)

    لینک دانلود pdf چرا نداره ؟ به صورت سری کامل موجود نیست ؟

    • ‏‏
      لقمان آوند(۱۳ دی ۱۳۹۳)

      سلام
      فعلا نیست ولی به زودی اضافه اش می کنیم تو همین ماه .

      • ‏‏
        arash shirazi(۱۳ دی ۱۳۹۳)

        اقای آوند بخاطر سنگین بودن صفحات سایت امکان مطالعه این حجم مطلب واقعا نیست برای این موضوع من اشتراک گرفتم … در غیر این حالت کاربر عادی هم میتونه مطالعه کنه این صفحات ؟
        ای کاش در بخش سری اموزش ها عنوان میکردید در صورت خرید اشتراک از این موارد میتونید استفاده کنید …

        البته حق میدم وقت کافی نداشته باشید درگیر کلاس های اموزشی هستید اما بشدت من نیاز دارم به این سری واکنشگرا خواهش میکنم در این مورد سریع تر اقدام کنید … امیدم به همین اموزشه …
        پیام هم دادم منتظر بودم پاسخ بدید ….

        • ‏‏
          لقمان آوند(۱۳ دی ۱۳۹۳)

          سلام
          سعی می کنیم تو همین هفته pdf این سری رو آماده کنیم .
          ممنون

        • ‏‏
          لقمان آوند(۱۴ دی ۱۳۹۳)

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

  • ‏‏

    با عرض سلام
    من ارور زیر رو موقع کامپایل می گیرم

    C:\Users\ht\Desktop\bootstrap-sass-master\vendor\assets\stylesheets\bootstrap.scss

  • ‏‏

    سلام
    شرمنده که قبل از جواب دادن سوال قبلی می خوام یه سوال دیگه هم بفرستم

    من اتو کامپایل نرم افزرا تیک زدم و برنامم طبق گفته شما بازه ولی نمی دونم چرا پروژه بعد از ذخیره در IDE کامپایل نمی شه

    و باید برم بعد ذخیره از نرم افزار یه بار دیگه کامپایل رو تو نرم افزار Koala بزنم

  • ‏‏

    سلام من این کار ها را انجام دادم ولی گفتید باید رنگ body تغییر کنه ولی برای من تغییر نمی کنه ctrl+f5 گرفتم جواب نداد میشه راهنمایی کنید.به لینک هم رنگ دادم ولی بازم تغییر نکرد..

  • ‏‏

    سلام قربان

    مطلب مفید و پرمحتوایی بود

    باتشکر از زحمات شما

    میخواستم بدونم چیزی به عنوان آموزش تضمینی بوت استرپ وجود داره ؟
    یک وبسایت این ادعا رو دارد که میتونه تضمینی اموزش بده !!!
    www…..ir
    لطفا راهنمایی بفرمایید

    • ‏‏
      وحید صالحی(۲۱ مرداد ۱۳۹۵)

      بستگی به سابقه و تسلط مدرسین اون وب سایت داره ما در دوره آموزشی بوت استرپی که در ما در سایت داریم تضمین می کنیم که با تهیه دوره به آن مسلط شید البته تلاش و علاقه شما هم خیلی مهمه

    • ‏‏
      لقمان آوند(۲۱ مرداد ۱۳۹۵)

      به جرات می تونیم بگیم آموزش ما جامع و کامل هست در این زمینه و اگر باذعلاقه ببینیدبدون شک و تضمینی یاد می گیرید

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram