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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت 12 (آخر) - صفحه نمایش مطلب - بخش دوم

43 12378 ۲۳ تیر ۹۳

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

اول قسمت دیدگاه های ارسال شده رو باهم درست میکنیم و بعد هم فرم ارسال دیدگاه.

فایل single.html رو باز کنید. مثل جلسه قبل که یه panel-body دیگه برای قسمت اطلاعات نوشته اضافه کردیم، اینبار هم یه panel-body برای قسمت نظرات اضافه میکنیم و کدهای مربوط به نمایش دیدگاه هایی که ارسال شده رو مینویسیم:

RWD-bootstrap3-12-1

برای دکمه ی پاسخ از کلاس btn-cream که قبلا ایجاد کرده بودیم استفاده کردیم. برای استایل دادن به این کدهایی که الان نوشتیم فایل _panels.scss رو باز کنید و کدهای زیر رو همونجایی که در تصویر مشخص شده بنویسید:

RWD-bootstrap3-12-2

بوت استرپ چند مدل form داره مثل inline form و horizontal form و یه مدل اولیه هم داره که میتونید همه این مدل هارو اینجا به همراه کدهاشون ببینید.

ما برای فرم ارسال دیدگاه از مدل اولیه فرم ها استفاده کردیم. برای ایجاد این فرم اولیه کافیه در فایل single.html و درجای مناسب بنویسید bs3-form و tab رو بزنید تا کدش ایجاد بشه یا مستقیا کد زیر رو بنویسید:

بعد مثل تصویر تغییرات رو انجام بدید تا فرم دیدگاه رو کامل کنیم:

RWD-bootstrap3-12-3

این هم کدهای فرم بعد از تغییرات:

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

RWD-bootstrap3-12-4

شاید براتون این سوال پیش اومده باشه که خط 111 تا 113 تصویر، دقیقا چه کاری انجام میده. اگر این خط رو پاک کنید و فایل single.html رو داخل مرورگرتون باز کنید، روی یکی از فیلدهای فرم کلیک کنید میبینید که به این شکل در میاد:

RWD-bootstrap3-12-5

یعنی وقتی فیلد حالت focus داشته باشند، یه بوردر و سایه آبی رنگ به فیلد اضافه میشه که من فکر میکنم برای این قالب خیلی جالب نیس و اگر رنگش با رنگ های قالب همخونی داشته باشه بهتره! به همین خاطر از میکسین form-control-focus بوت استرپ استفاده کردیم.

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

RWD-bootstrap3-12-6

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

.: فقط کاربران VIP سايت مجاز به ديدن اين قسمت هستند :.
در صورتي که عضو سايت هستيد می توانید لاگین شويد و عضو VIP شوید .
در غير اين صورت در کمتر از 1 دقيقه مي توانيد در سايت عضو شويد.

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

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

  • ‏‏
    الهه گیتی روان(۷ اردیبهشت ۱۳۹۴)

    بسیار ممنونم . آموزش مفیدی بود . تشکر فراوان از شما . ❓ ❓ ❓

  • ‏‏

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

  • ‏‏

    ضمن عرض سلام و وقت بخیر
    خانم کلانتری مرسی از زحماتتون بسیار عالی بود خسته نباشید و خدا قوت و انشاالله که راهتون رو ادامه بدین و براتون آرزوی موفقیت و سربلندی میکنم ❓

  • ‏‏

    درود و سپاس از آموزش تون
    البته من هنوز آغاز به فرا گیریش نکردم! چون من تو پروژم از بوت استرپ 3.3.5 بهره می برم و نسخه ای که شما آموزش دادید انگارنسبت به اونی که من بکار میبرم قدیمی تره.با این حساب آیا آموزش های شما بدرد من میخوره؟ و اینکه من با نرم افزار براکتس کار میکنم و شما با یه برنامه دیگه این آموزش رو دادید.این دو برنامه کارکردشون باهم خیلی فرق داره یا نه با براکتس هم می تونم از آموزش شما بهره ببرم؟
    سپاس پیشاپیش برای پاسخ گویی تون

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

      سلام مشکلی نیست میتونید استفاده کنید فقط کد نویسی css این دوره تحت sass هست که اون رو هم باید بلد باشید و حتما نسخه بوت استرپ باید rtl و راست چین باشه. برای آموزش تحت css میتونید در دوره آموزشی فریم ورک بوت استرپ که در سایت در حال برگزاری هست ثبت نام کنید در این دوره خیلی با جزئیات بیشتر بوت استرپ رو تدریس میکنیم
      بله از براکت هم میتونید استفاده کنید
      موفق باشید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram