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

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



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

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

15 10737 ۹ اردیبهشت ۹۳

سلام دوستان.

قبل از هر چیز، من بابت تاخیر در حاضر کردن این قسمت از آموزش عذرخواهی میکنم؛ هم از مدیر سایت و هم از دوستانی که آموزش بنده رو دنبال میکردن. یکم درگیر بودم ولی انشاالله قسمت های بعدی رو سریعتر حاضر میکنم.

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

قبلا داخل containerمون یه row درست کرده بودیم و کدهای مربوط به منوی سایت رو داخلش نوشته بودیم. برای قسمت محتوا و ساید بار هم باید یک row داشته باشیم و کدهای مربوط به محتوا و ساید بار رو داخل این row قرار بدیم. پس دوباره داخل container بنویسید bs3-row و tab رو بزنید یا کد زیر رو بنویسید:

حالا باید دو تا بلاک ایجاد کنیم که یکی از اونها مخصوص سایدبار و یکی دیگه مخصوص محتوا و همچنین اسلاید شو هست. همونطور که در دموی قالب میبینیم بلاک محتوا سمت راست هست و بلاک سایدبار سمت چپ، همچنین در سایزهای medium و large عرض بلاک محتوا دو برابر بلاک ساید بار هست؛ یعنی بلاک محتوا باید 8ستون گرید رو اشغال کنه و بلاک سایدبار هم 4ستون گرید. در سایز های small و extra small هم میخوایم که این بلاک ها همه ی 12ستون گرید رو اشغال کنه.

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

خب، پس داخل این row جدیدی که الان ایجاد کردیم مینویسیم:

اینم بگم که دو تا کلاس content و sidebar جزو کلاس هایی که خود بوت استرپ تعریف کرده نیستند، کلاس هایی هستند که بعدا برای استایل دهی لازممون میشه و خودمون تعریفش کردیم.

چون نسخه بوت استرپی که داریم استفاده میکنیم نسخه rtl نیست، بلاک اولی یعنی بلاک محتوا سمت چپ میفته و بلاک دومی که بلاک ساید بار هست سمت راست. برای اینکه سایدبار بیاد سمت چپ و محتوا بره سمت راست 2 راه داریم:

  • راه اول اینه که از تکنیک column ordering استفاده کنید و مثلا از .col-md-pull-* و .col-md-push-* استفاده کنید. مثلا اینجا باید به بلاک محتوا کلاس col-md-push-4 بدیم که یعنی این بلاک رو به اندازه 4ستون گرید هل دادیم سمت راست و بعد باید به بلاک سایدبار کلاس col-md-pull-8 بدیم یعنی بلاک ساید بار رو به اندازه 8ستون گرید میکشیم سمت چپ.

    و مهمه که کدوم بلاک pull بشه و کدوم یکی push

    بلاکی که سمت چپ هست و میخوایم اون رو به سمت راست بفرستیم (هل بدیم) باید push بشه و بلاکی که سمت راست هست و میخوایم اون رو به سمت چپ بفرستیم (بکشیم) باید pull بشه.

    یعنی کد رو باید به شکل زیر بنویسید:

  • راه دوم هم اینه که ترتیب قرار گرفتن ستون های گرید بوت استرپ رو تغییر بدیم. منظورم اینه که در حالت فعلی، ستون های گرید به ترتیب از سمت چپ چیده میشند ولی ما باید کاری کنیم که از سمت راست شروع به چیده شدن کنند. برای اینکار کافیه فایل _mixins.scss رو باز کنید و داخل فایل با ctrl+f عبارت float: left رو جستجو کنید و تغییرش بدید به float: right . داخل این فایل _mixins.scss در 5جای مختلف نوشته شده float: left که باید همه ی اینها به float: right تغییر داده بشه. بعد هم فایل bootstrap.scss رو کامپایل کنید.

نکته : توجه کنید که ساختار فایل ها در نسخه 3.2.0 بوت استرپ تغییراتی داشته و اگر میخواید از راه دوم استفاده کنید باید تغییرات گفته شده رو در فایل های _grid.scss و _grid-framework.scss که در پوشه mixins هستند انجام بدید. ما برای این آموزش از نسخه 3.1.1 استفاده کرده بودیم

حالا شما از هرکدوم از راه های بالا که راحت تر هستید استفاده کنید، فرقی نمیکنه، ولی نکته ای که باید بگم اینه که اگر از راه دوم استفاده کردید، اونوقت قضیه pull و push فرق میکنه. یعنی مثلا در کد بالا ، باید به جای col-md-push-4 بنویسیم col-md-pull-4 و به جای col-md-pull-8 بنویسیم col-md-push-8

من از راه دوم استفاده کردم و به نظرم بهتره شما هم ترتیب قرار گرفتن ستون های گرید بوت استرپ رو تغییر بدید و بعدش اگر جایی لازم شد از push و pull استفاده کنید.

ضمنا چون سایدبار نسبت به قسمت محتوا و اسلاید شو کار کمتری میبره اول قسمت سایدبار رو طراحی میکنیم، ولی در قسمت بعدی...

میدونم بعد از وقفه طولانی ای که بین آموزش افتاده بود، این قسمت واقعا کوتاه بوده ولی برای اینکه مطالب نظم بیشتری داشته باشه سایدبار رو در قسمت بعدی درست می کنیم.

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

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

  • ‏‏

    baa tashakore faravaan az jenaabe kalantar, man matalebe shoma ro hamishe donbal mikonam va vagheaaan estefaade kardam. omidvaram hamishe movafagh bashid

  • ‏‏
    Reyhaneh Ezatpanah(۹ اردیبهشت ۱۳۹۳)

    خیلی خیلی زیاد ممنونم… ❓

  • ‏‏
    راد نمازی(۱۱ اردیبهشت ۱۳۹۳)

    ممنون برای به اشتراک گذاشتن مطالب

  • ‏‏
    Reyhaneh Ezatpanah(۱۷ اردیبهشت ۱۳۹۳)

    میشه لطفا در مورد تگ های section , aside توضیح بدین؟

    آیا در خود بوت استرپ تعریف شده؟!

    تو خود آموزش اشاره یی به اینا نشده!!!

    سپاس

  • ‏‏
    پدرام(۱۲ تیر ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏
    sib_Sabz00(۲۵ آذر ۱۳۹۳)

    سلام خسته نباشید
    ممنون از آموزشتون
    من navigation رو curve کردم، حالا که میخوام row تعریف کنم برای محتویات سایت،از navigation عریضتر میشه
    میشه راهنماییم کنید
    ممنونم

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram