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

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



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

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

8 7028 ۲۶ خرداد ۹۳

سلام. در قسمت قبلی بخش مطالب رو طراحی کردیم که البته ناقص موند یعنی شمارنده صفحات رو درست نکردیم. در این قسمت شمارنده صفحات و بعد فوتر رو هم درست میکنیم تا فایل index.html رو کامل کنیم و برای قسمت بعدی هم بریم سراغ فایل single.html

فایل index.html رو باز کنید و داخل row که قسمت قبلی درست کردیم و thumbnail ها رو داخلش قرار دادیم بعد از کد thumbnail ها کد زیر رو بنویسید:

برای اینکه کد pagination رو اضافه کنید کافیه بنویسید bs3-pagination و tab رو بزنید. کلاس text-center رو هم برای این اضافه کردیم که شمارنده صفحاتمون وسط قرار بگیره. این کلاس از کلاس های خود بوت استرپ هست.

RWD-bootstrap3-10-1

حالا index.html رو داخل مرورگرتون باز کنید. میبینید که فاصله شمارنده صفحات تا مطالب زیاد هست و مثل دمو نیست. همچنین استایلش هم مثل دمو نیست پس بیاید استایلش رو تغییر بدیم.

فایل _pagination.scss رو باز کنید و تغییرات رو انجام بدید:

RWD-bootstrap3-10-2

margin رو به margin-bottom تغییر دادیم چون میخوایم شمارنده صفحاتمون فقط از پایین فاصله داشته باشه. box-shadow هم که از میکسین های بوت استرپ هست. چون شماره صفحات از سمت چپ به راست چیده میشد float رو از left به right تغییر دادیم تا شماره ها از سمت راست به چپ چیده بشه. بعد از اینکه شماره صفحات راست چین شد border-radius های اولین و آخرین عنصر (همون « و » منظورمه) به هم میریزه به همین خاطر در خط های 30 و 36 تغییراتی دادیم.

اگر دیده باشید بک گراند شماره ی 2 که کلاس .active داشت و منظور اینه که ما الان در صفحه دوم سایت قرار داریم، آبی هست. برای اینکه از آبی به زرد تغییرش بدیم فایل _variables.scss رو باز کنید و مقدار متغیر $pagination-active-bg و $pagination-active-border رو به $color-yellow که قبلا تعریف کرده بودیم تغییر بدید.

RWD-bootstrap3-10-3شمارنده صفحات که درست شد. پس بیاید حالا فوتر رو طراحی کنیم. کدهای اچ تی ام ال فوتر به این شکل هست:

این کدهارو باید داخل container و بعد از row ای که مربوط به بخش سایدبار و محتوا بود قرار بدید.

RWD-bootstrap3-10-4

به سکشن دومی کلاس left دادیم که بعدا برای استایل دهی ازش استفاده کنیم و جهت متن رو از چپ به راست قرار بدیم.

تصویر 7learn-logo.png هم یه تصویر 40پیکسل در 40پیکسل هست که داخل پوشه img ریختیم و شما هم میتونید لوگوی سایت خودتون رو جایگزین این عکس کنید.

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

bootstrap-sass-master\vendor\assets\stylesheets\bootstrap

و بعد از اون این فایل رو در فایل bootstrap.scss ای که کامپایلش میکنیم import میکنیم.

RWD-bootstrap3-10-5

بعد هم فایل _footer.scss رو باز کنید و کدهای زیر رو برای استایل فوتر بنویسید:

RWD-bootstrap3-10-6

خب! خسته نباشید. بالاخره فایل index.htmlمون کامل شد :)

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

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

  • ‏‏

    سلام خسته نباشید
    تاریخ رو میشه بدون وردپرس معکوس نوشت ؟
    یعنی اون قسمتی که نوشتی دو روز پیش با php میشه ؟

  • ‏‏

    سر در نیاوردم 😥

  • ‏‏
    Negar Ghavidel(۲۹ خرداد ۱۳۹۳)

    سلام
    واقعا خسته نباشید
    این آموزش تموم شد؟
    اگر نه چند قسمت دیگه مونده؟
    ممنون

  • ‏‏

    سلام یه نوارلغزان پایین صفحه میاد چجوری ببرمش؟

  • ‏‏

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

  • ‏‏
    سید احسان عظیمی(۲۷ آذر ۱۳۹۳)

    تو بازار کار کدوم روش تو طراحی کلاینت بیشتر کاربرد داره؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram