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

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



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

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

7 6975 ۱۳ تیر ۹۳

سلام دوستان

در این قسمت قراره فایل single.html رو طراحی کنیم. این فایل مربوط میشه به صفحه ای که فقط یک مطلب در اون نشون داده میشه. در سایت ها و وبلاگ ها اگر دقت کرده باشید وقتی روی " ادامه مطلب " یه مطلب کلیک میکنید وارد صفحه ای میشید که مربوط به همون مطلب هست و کل مطلبی که نوشته شده نشون داده میشه.

اولین کاری که باید انجام بدید اینه که محتوای فایل index.html رو کپی و داخل فایل single.html پیست کنید.

بعد باید محتوای درون row رو که در ابتدای قسمت 9 درست کردیم (تا thumbnailها و pagination رو داخلش قرار بدیم) پاک کنید.

RWD-bootstrap3-11-1

حالا باید به جای این کدی که حذف کرده بودید، کد زیر رو بنویسید تا یه بلاک درست بشه که کل عرض قسمت محتوا رو اشغال کنه:

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

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

حالا میتونید به جای عبارت Panel title عنوان مورد نظر خودتون رو بنویسید و به جای عبارت Panel content هم محتوای مد نظرتون رو بنویسید (لینک، عکس و heading ها رو هم قرار بدید که اگر لازم شد بهشون استایل بدیم). تغییرات زیر رو انجام بدید:

RWD-bootstrap3-11-2

توضیح خاصی نداره فقط اینکه به جای این کادر قرمزرنگ سومی میتونید محتوای مد نظر خودتون رو قرار بدید. کدهای کادر قرمزرنگ اخری هم برای قسمت برچسب مطالب هست. خط 122 تصویر هم مربوط میشه به آیکون برچسب بوت استرپ. این هم کدهایی که در تصویر میبینید:

برای استایل دهی به این کدها، فایل _panels.scss رو باز کنید و کدهای زیر رو بنویسید:

RWD-bootstrap3-11-3

میتونستیم استایل ها رو برای خود سلکتور .panel-body و .panel-heading بنویسیم ولی از اونجایی که قبلا برای قسمت سایدبار هم از panel استفاده کرده بودیم، پس استایلهای .panel-heading و .panel-body رو برای سلکتور .content نوشتیم تا استایلها با هم قاطی نشه. این کلاس content رو هم اگر یادتون باشه در قسمت پنجم تعریف کرده بودیم و گفته بودیم که بعدا برای استایل دهی ازش استفاده میکنیم. $gray-lighter هم که از قبل در فایل _variables.scss تعریف شده بوده.

رنگ بک گراند نوشته ای که بین تگ mark قرار داره هم میتونید از طریق فایل _normalize.scss تغییر بدید:

RWD-bootstrap3-11-4

حالا برای قسمت اطلاعات نوشته، کد زیر رو مثل تصویر به فایل single.html اضافه کنید:

RWD-bootstrap3-11-5

میتونستیم از این کدی که الان نوشتیم (کد داخل کادر قرمزرنگ)، کلاس panel-body رو حذف کنیم و این بلاک کد رو ببریم داخل همون panel-body که مطلبمون رو نوشتیم. ولی چون قراره برای این قسمت اطلاعات نوشته، border-top و border-bottom تعیین کنیم و .panel-body مقداری padding راست و چپ داره، باعث میشد که این بوردرهای ما نتونه عرض کامل بلاک مطلب رو اشغال کنه. به همین خاطر کد رو به جای اینکه داخل panel-body بنویسیم، کنار panel-body نوشتیم و کنار کلاس content-meta یه کلاس panel-body اضافه کردیم که استایل های panel-body رو اینجا هم اضافه کنیم.

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

RWD-bootstrap3-11-6

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

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

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

  • ‏‏
    pedram paa(۱۴ تیر ۱۳۹۳)

    درود میشه برای قسمت نظرات از پلاگین bootstrapvalidator هم استفاده کنید ؟؟ دعای خیر پشت سرتون میادا 😀

    • ‏‏
      کیوان علی محمدی(۱۴ تیر ۱۳۹۳)

      سلام خود بوت استرپ کلی کلاس های validation داره که با کمی جی کوئری میشه باهاش رفت فضا :)

      • ‏‏
        pedram paa(۱۴ تیر ۱۳۹۳)

        خب پس چرا این فضاپیمایی ها رو به ما هم یاد نمی دید؟:| 😀
        لطفا اگه میشه یه آموزش به حالت مثال کاربردی از این کلاس ها بذارید. ❓

        • ‏‏
          کیوان علی محمدی(۱۵ تیر ۱۳۹۳)

          شما برین داخل دایکیونت خودش در بخش فرم ها پیداشون میکنی،بعد ترکیب این کلاس با جی کوئری میشه راحت Validation های خوبی به دست آورد.فکر می کنید همون کتابخونه که گفتین چطوره درست شده؟؟؟از فا که نیومده همین کارارو رو کرده.

  • ‏‏

    خیلی عالیه , کی پنل نویسی شروع میشه ؟

  • ‏‏

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram