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

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



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

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

11 10188 ۱۳ اردیبهشت ۹۳

سلام. قسمت قبلی، بلاک های محتوا و سایدبارمون رو ایجاد کردیم و قرار شد در این قسمت سایدبار رو درست کنیم.

همون طور که در دمو هم دیدید داخل سایدبار، باکس آخرین مطالب و پربازدیدترین مطالب رو به صورت pill حاضر کردیم. بوت استرپ tab ها و pill ها رو درون کامپوننت Navs قرار داده که میتونید با خوندن " اینجا " متوجه نحوه استفاده از این کامپوننت بشید که البته فقط خوندن این قسمت کافی نیست و فقط در حد یه معرفی هستش. برای اینکه کامل بتونید از این کامپوننت استفاده کنید باید در اصل " اینجا " رو بخونید.

خب، حالا چرا من این دو آدرس رو به شما دادم و گفتم بخونید؟ چون این پکیج bootstrap 3 snippets که روی sublime text نصب کردیم، میانبری برای tab ها و pill ها نداره و مجبوریم کدهایی که لازم داریم رو از خود سایت بوت استرپ برداریم و تغییرش بدیم. البته اگر تو گوگل سرچ کنید پکیج های دیگه ای پیدا میکنید که برای این کامپوننت هم میانبر ایجاد کرده باشند و میتونید اون هارو نصب کنید و ازشون استفاده کنید.

قبل از اینکه بخوایم pill رو ایجاد کنید قبلش لازم داریم تا یه باکس درست کنیم که این pill داخلش قرار بگیره. برای درست کردن باکس میتونید از panelها استفاده کنید. Panelها توسط خود بوت استرپ برای اینکه عناصرمون رو داخل باکس قرار بدیم درست شدند.

داخل بلاکی که جلسه قبل برای سایدبارمون ایجاد کردیم بنویسید bs3-panel و tab رو بزنید یا خودتون کد زیر رو بنویسید:

حالا باید کدهای pill رو داخل این پنل قرار بدیم. شما هم مثل تصویر زیر، کدهای pill رو به پنل اضافه کرده و تغییرات رو اعمال کنید.

RWD-bootstrap3-6-0

کلاس panel-default رو حذف کردیم چون باعث میشه این باکس، مقدار یک پیکسل بوردر با رنگ #DDD داشته باشه که ما نمیخوایم اصلا بوردر داشته باشه.

این هم کدهای فعلی سایدبار که در عکس بالا میبینید:

الان دیگه وقت استایل دادن به pill و panel هست.

اول استایل panel رو درست میکنیم. فایل _panels.scss رو باز کنید و مثل تصویر زیر کدها رو تغییر بدید:

RWD-bootstrap3-6-1

خب، مقدار خصوصیت color رو $gray دادیم که اگر فایل _variables.scss رو نگاه کرده باشید این متغیر اونجا تعریف شده و مقدارش برابر با #555 هست، ضمنا بوردر پنل رو برداشتیم و مقدار box-shadow اون رو هم تغییر دادیم.

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

پس باید دوباره یه متغیر تعریف کنیم و کد این رنگ رو ذخیره کنیم. برای این کار کافیه فایل _variables.scss رو باز کنید و کدهای زیر رو بنویسید و فایل رو ذخیره کنید:

مثل شکل زیر:

RWD-bootstrap3-6-2

حالا دوباره میریم سراغ فایل _panels.scss تا استایل لیستی که درون بدنه ی این پنل هست رو درست کنیم. کد زیر رو داخل این فایل بنویسید:

RWD-bootstrap3-6-3

میتونستیم استایل ها رو برای سلکتور .panel-body بنویسیم ولی از اونجایی که بعدا برای قسمت مطالب هم قراره از panel استفاده کنیم پس این استایل ها رو برای .sidebar .panel-body مینویسیم تا قاطی نشه.

خب، حالا استایل pill ها رو مینویسیم. برای این کار فایل _navs.scss رو باز کنید و مثل تصویر زیر تغییرات رو انجام بدید.

RWD-bootstrap3-6-4

کاملا مشخصه چیکار کردیم. Border-bottom همون خط نارنجی افقی جدا کننده ی pill و محتوای پنل هست. Padding باعث میشه pill ها از پنل فاصله بگیرند. float: right که باعث میشه pill ها سمت راست قرار بگیرند. margin-right هم که باعث میشه pill ها به هم نچسبند. اون colorی هم که خودمون برای سلکتور a تعریف کردیم رو از خط 138 داخل عکس کپی پیست کردیم چون میخوایم رنگ نوشته های pill ها چه در حالت hover و چه در حالت عادی، شبیه به هم باشه.

حالا وقت تغییر رنگ نوشته و بکگراند pill هاست. خیلی سادست.

همونطور که تو عکس بالا هم میبینید، میگه مقدار خصوصیت color متغیر $nav-pills-active-link-hover-color هست.

همچنین مقدار خصوصیت background-color برای حالتی که یک pill کلاس active داره برابر با متغیر $nav-pills-active-link-hover-bg هست.

اگر استایل هایی که برای سلکتور .nav نوشته شده رو ببینید متوجه میشید که padding هر کدوم از این pill ها توسط متغیر $nav-link-padding مقداردهی شده.

و ضمنا خصوصیت background-color این pill ها برای زمانی که رویداد hover یا focus دارند برابر با متغیر $nav-link-hover-bg هست.

پس یعنی فقط باید این متغیرها رو پیدا کنیم و مقدارشون رو تغییر بدیم. از اونجایی هم که میدونیم متغیرها داخل فایل _variables.scss نوشته میشند پس همونجا دنبالشون میگردیم.

کدهای فایل _variables.scss رو مثل تصویر زیر تغییر بدید:

RWD-bootstrap3-6-5

دوستان خسته نباشید؛ من که واقعا خسته شدم. ادامه ی سایدبار رو میذاریم برای قسمت بعد...

سوال یا نظری داشتید خوشحال میشم بشنوم.

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

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

  • ‏‏

    aaaali bud mesle hamiishe
    mamnooon az shomaa

  • ‏‏
    لقمان آوند(۱۳ اردیبهشت ۱۳۹۳)

    ممنون
    خیلی خوب بود …

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

    عالیه مرسی ❓

  • ‏‏

    خیلی خوب و مکملی برای سایت getbootstrap …

  • ‏‏

    با سلام
    من از تب اسلایدر شما خوشم نیومد و به سایت http://bootsnipp.com رفتم و یک تب اسلایدر انتخاب کردم و کد ان را در section قرار دادم


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

  • ‏‏

    سلام خسته نباشید.یه سوال داشتم من یه پنل مثه همینو درست کردم ولی وقتی مثلن میخوام بفرستمش سمته چپ با دستور pull-left میره ولی وقتی صفحه رو کوچیک میکنم بهم میریزه من فقط میخوام بره سمته چپ مثلا 5 پیکسل margin داشته باشه وقتی هم margin میدم اندازش توی صفحه کوچیک بهم میریزه ممنون میشم کمک کنید ❓
    http://uplod.ir/fhfohj5eragw/_strap_my_project.rar.htm

  • ‏‏

    سلام خسته نباشید دوباره یه سوال دیگه هم داشتم اینکه وقتی صفحه رو کوچیک میکنم وقتی میرم روی محصولات وقتی بازش میکنم زیر شاخه هاش به سمته چپ میره نمیدونم مشکل کجاست ممنون میشم کمک کنید. ❓
    http://uplod.ir/fhfohj5eragw/_strap_my_project.rar.htm

  • ‏‏

    با سلام من از این tab ها در سایتم (http://sayerooshan.com) استفاده کردم ولی نمیدونم چرا وقتی روی یک تب دیگه که کلیک میکنم محتویاتش محو میشند؟؟؟؟

  • ‏‏
    آسمان کوچک(۱۹ اسفند ۱۳۹۳)

    عالی عالی عالی
    خسته نباشید و ممنون

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram