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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

26 10649 ۱۹ خرداد ۹۳

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

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

و حالا باید این کدهارو مثل تصویر زیر تغییر بدید:

RWD-bootstrap3-9-1

تصویر و تاریخ رو داخل یه div با کلاس header قرار دادیم که بعدا پوزیشن .header رو relative بذاریم و پوزیشن time رو هم absolute که بتونیم زمان رو روی تصویر قرار بدیم. hidden-xs به خاطر این هست که نمیخوایم تصویر و زمان در سایز extra small نشون داده بشه.

کلاس img-responsive رو خود بوت استرپ ساخته و حاوی خصوصیات و مقادیر زیر هستش:

و باعث میشه تصاویر ریسپانسیو بشه. به این صورت که حداکثر عرض تصویر رو 100درصد عنصر والدش قرار میده و متناسب با اون ارتفاع تغییر میکنه.

و اینکه چرا اینجا به عکس img-responsive دادیم با این حال که قرار نیست تصویر رو سایز extra small نشون داده بشه؟ دلیل اینه که عرض تصویری که من قرار دادم از عرض thumbnail بیشتر هست و باعث میشه تصویر از thumbnail بیرون بزنه ولی وقتی کلاس img-responsive رو گذاشتم باعث شد تا عرض تصویر حداکثر برابر با عرض thumbnail بشه. متناسب با این تغییر عرض، ارتفاع تصویر هم تغییر کرد که باعث میشه تصویر ظاهر خودش رو از دست نده و کِش نیاد :)

بعدش هم که عنوان مطلب رو نوشتیم و به صفحه single لینک دادیم و بعد هم متن مورد نظرمون رو نوشتیم.

در آخر هم یه لینک برای رفتن به ادامه مطلب قرار دادیم و کلاس btn-cream رو نوشتیم تا بعدا بهش استایل بدیم. ضمنا چون این لینک سمت راست قرار میگرفت با استفاده از کلاس pull-left اون رو به سمت چپ فرستادیم. pull-left چون با استفاده از float:left عنصر رو سمت چپ قرار میده یه مشکل به وجود میاره:

RWD-bootstrap3-9-2

متن ادامه مطلب دقیقا روی بوردر thumbnail قرار میگیره علتش هم قبلا در سری آموزشی css توضیح داده شده. برای رفع این مشکل کافیه از کلاس clearfix که قبلا بوت استرپ اون رو ساخته استفاده کنیم.

کدهایی که داخل row نوشته بودیم بعد از تغییرات شدن این:

خب! حالا میتونید این کد رو کپی کنید و هر چندباری که دلتون خواست داخل همون rowی که اول این آموزش درست کرده بودیم پیست کنید تا چند تا مطلب در صفحه داشته باشید.

نوبت استایل دادن thumbnail ها میرسه. فایل _variables.scss رو باز کنید و خط های زیر رو تغییر بدید:

RWD-bootstrap3-9-3

چون نمیخوایم تصویرمون از بلاک thumbnail فاصله داشته باشه $thumbnail-padding رو برابر با صفر میذاریم و برای تغییر رنگ بکگراند thumbnail هم مقدار $thumbnail-bg رو تغییر میدیم.

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

RWD-bootstrap3-9-4

و بعدش داخل فایل _thumbnails.scss تغییرات زیر رو انجام بدید:

RWD-bootstrap3-9-5

کد توضیح خاصی نداره فقط بوردر رو که لازم نداشتیم کامنت کردیم، box-shadow و border-top-radius هم از میکسین های بوت استرپ هستند.

و حالا تنها قسمتیش که موند دکمه ادامه مطلب هست. اگر دقت کرده باشید بوت استرپ یه سری کلاس پیشفرض برای دکمه داره مثل .btn .btn-primary و استایل این دکمه رو در فایل _buttons.scss تعریف کرده. خب حالا ما هم یه سر به این فایل میزنیم ببینیم استایل .btn-primary رو چطوری نوشته که ما هم ازش تقلید کنیم و استایل .btn-cream رو بنویسیم:

RWD-bootstrap3-9-6

میکسین button-variant که از میکسین های بوت استرپ هست سه تا پارامتر میگیره پارامتر اول رنگ نوشته دکمه، پارامتر دوم رنگ بکگراند دکمه و پارامتر سوم رنگ بوردر دکمه هست. پس طبق همین کد ما هم کدهای دکمه خودمون رو مینویسیم:

RWD-bootstrap3-9-7

خب کار تموم شد. اگر قالب رو تست کنید میبینید فقط بک گراند و رنگ نوشته عوض شده و دکمه اصلا شبیه دکمه نیست. اگر دقت کرده باشید موقعی که از بوت استرپ استفاده میکنید و میخواین به دکمه استایل بدین مثلا به این شکل عمل میکنید:

یعنی کلاس btn و btn-primary رو باهم به کار میبرید. درواقع کلاس btn شامل padding و بوردر و ... هست ولی btn-primary فقط حاوی رنگ بک گراند و نوشته و بوردر هست. پس ما هم باید کلاس btn-cream رو همراه با btn به کار ببریم. بنابراین فایل index.html رو باز کنید و هرجا که نوشته بودید btn-cream یه کلاس btn هم کنارش اضافه کنید. مثلا:

RWD-bootstrap3-9-8

و نکته دیگه اینکه دکمه ادامه مطلب داخل دمو یکم سایه هم داره پس میتونید برای اضافه کردن سایه به این دکمه، خط زیر رو هم اضافه کنید:

RWD-bootstrap3-9-9

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

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

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

  • ‏‏
    سامان کیانی(۱۲ بهمن ۱۳۹۳)

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

    من یک قالب ریسپانسیو برای وردپرس طراحی کردم و یک مشکل در منوی سایت دارم

    من یک منو درست کردم که زیرمجموعه داره
    حالا وقتی در دسکتاپ سایت رو مشاهده می کنم ، منویی که زیرمجموعه داره کنارش یک فلش (جهت رو به پائین) داره که حتما باید رو منو کلیک کنیم تا زیرمجموعه نمایش داده بشه
    من میخوام وقتی نشانه گر موس میره روی منو زیرمجموعه ها نمایش داده بشه
    یعنی دقیقا عملکردش مثل منوی سایت شما باشه
    ممنون میشم راهنمایی کنید
    2 روز هستش که تو این مورد گیر کردم

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

      سلام
      تو قسمتی که کد های جی کوئری مینویسید این کد رو کپی کنید درست میشه..
      $(document).ready(function () {
      jQuery(‘ul.nav li.dropdown’).hover(function() {
      jQuery(this).find(‘.dropdown-menu’).stop(true, true).show();
      jQuery(this).addClass(‘open’);
      }, function() {
      jQuery(this).find(‘.dropdown-menu’).stop(true, true).hide();
      jQuery(this).removeClass(‘open’);
      });

      });

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram