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

- visibility ٣۶ mode_comment

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

خب، برای اینکار اول فایل index.php رو باز کنید و دنبال عبارت content and slideshow will be here (که در قسمت پنجم نوشته بودیم) بگردید و این عبارت رو پاک کنید. به دلیل اینکه پکیج bootstrap 3 snippets میانبری برای کدهای اسلایدشو نداره مجبوریم کدها رو از سایت بوت استرپ برداریم و به جای عبارت پاک شده بنویسیم:

خب حالا باید کدهارو یکم تغییر بدیم. منظورم اینه که عکس های مورد نظرمون رو بهش اضافه کنیم و توضیحات مربوط به هر عکس رو هم براش بنویسیم. میتونید مثل عکس زیر کدها رو ویرایش کنید:

RWD-bootstrap3-8-1

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

بعد از اینکه کدهارو مثل تصویر بالا ویرایش کردید از همین کدهای داخل مستطیل قرمز کپی بگیرید و زیر این مستطیل به جای " ... " پیست کنید. البته چون طبق کدهای بالا ما سه تا indicator داریم پس باید داخل اسلاید شو هم سه تا آیتم داشته باشیم. Indicator در این اسلایدشو منظور همون دایره هایی هست که نشون میده کدوم عکس الان داره در اسلایدشو نشون داده میشه.

کدها بعد از کپی پیست کردن آیتم های اسلایدشو به این صورت میشن:

RWD-bootstrap3-8-2

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

حالا که اسلایدشو حاضر شد بیاید تستش کنیم، رو دکمه های قبل و بعد کلیک کنید. اصلا اسلایدشو کار نمیکنه! کافیه فایل carousel.js رو از مسیر bootstrap-sass-master\vendor\assets\javascripts\bootstrap برداریم و داخل پوشه js قالب خودمون قرار بدیم و در آخر هم کد زیر رو قبل از بسته شدن تگ body بنویسیم:

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

RWD-bootstrap3-8-3

margin-bottom دادیم که بعدا قسمت مطالب رو اضافه کردیم اسلایدشو و مطالب به هم نچسبه. ممکنه بگین من از کجا میدونم که الان margin-bottom بدم. چون من قبلا کار کردم میدونم اینطوریه. ولی شما اگر نمیدونین مشکلی نیست وقتی قسمت مطالب رو ایجاد کردید و دیدین مطالب و اسلایدشو چسبید به هم، میتونید بعدش بیاید به اسلایدشو margin-bottom بدید.

مقدار $border-radius-base که از قبل در _variables.scss تعریف شده بود و ما فقط ازش استفاده کردیم. box-shadow هم از قبل توسط خود بوت استرپ داخل فایل _mixins.scss به عنوان یه میکسین آماده شده بود.

حالا استایل فلش ها رو عوض کنیم. مثل تصویر زیر تغییراتی رو داخل فایل _carousel.scss ایجاد کنید:

RWD-bootstrap3-8-4

خط 92 و 97 رو کامنت کردیم که کامپایل نشه علتش هم اینه که استایل پیش فرض بوت استرپ برای دکمه های بعد و قبل رو لازم نداریم و استایل خودمون (خطوط 83 تا 85) رو برای این دکمه ها مینویسیم. متغیر $gray-darker هم که قبلا در فایل _variables.scss تعریف شده بوده. خب حالا اسلایدشو رو ببینید چطوری شد:

RWD-bootstrap3-8-5

دکمه های قبل و بعد این تصویر کجا و دکمه های دمو کجا 🙂

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

RWD-bootstrap3-8-6

ترتیب کار اینطوری بود که اول width و height برای دکمه ها گذاشتیم که سایز دکمه هارو درست کنیم و فایل رو سیو کردیم و اسلاید شو رو نگاه کردیم، بعد دیدیم که دکمه ها چسبیدن به بالای اسلاید شو که به خاطر top:0 بود برای همین مقدار top رو به 45% تغییر دادیم تا بیاد وسط. و ضمنا چون دکمه ها از سمت چپ و راست به اسلاید شو میچسبیدن و فاصله نداشتن مقدار left:0 و right:0 رو به 10پیکسل تغییر دادیم.

حالا اگر اسلاید شو رو نگاه کنید مشکلی که داره فلش های اسلاید شو خیلی بزرگ هستند و همچنین فلش دکمه سمت راستی اصلا جای مناسبی نیست. همیشه میشه با inspect element متوجه شد که مشکل از کجاست. الان روی فلش سمت راستی کلیک راست کنید و inspect element رو بزنید:

RWD-bootstrap3-8-7

میبینید؟ وقتی سایز صفحه بزرگتر از 768پیکسل باشه:

  1. به خاطر font-size:30px اندازه آیکون های فلش بزرگه.
  2. margin-left: -15px داره ولی margin-right: -15px نداره به خاط همین هست که اون فلش سر جای درستی قرار نداره.

پس حالا باید در فایل _carousel.scss دنبال همچین خطی بگردیم و یکی اینکه font-size رو حذف کنیم و یکی هم اینکه margin-right: -15px رو اضافه کنیم. ولی من میگم بیاین کلا قسمتی که مدیا کوئری واسه سایز بزرگتر از 768پیکسل نوشته رو حذف کنیم. اگر میپرسین چرا، کافیه قسمت مدیاکوئری رو حذف کنید و ببینید که چه تو سایز 768پیکسل به بالا چه کمتر از اون اصلا مشکلی وجود نداره که بخوایم مدیاکوئری بنویسیم 🙂

RWD-bootstrap3-8-8

بعد از اینکه اینارو کامنت کردیم اگر اسلاید شو رو ببینید دکمه ها به این صورت هستن:

RWD-bootstrap3-8-9

حالا خوب شد. کافیه یکم آیکون بره بالا یکم هم بیاد اینور:

RWD-bootstrap3-8-10

درست شد.

حالا استایل caption آیتم ها رو درست میکنیم:

RWD-bootstrap3-8-11

نکته خاصی نداره فقط اینکه border-bottom-radius و opacity جزو میکسین های از قبل تعریف شده ی بوت استرپ هستند. ضمنا متغیر $border-radius-base هم جزو متغیرهای از قبل تعریف شده هست.

و حالا قسمت indicator های اسلایدشو:

RWD-bootstrap3-8-12

همه ی تغییراتی که در این تصویر انجام دادیم باعث عوض کردن محل قرار گیری indicator ها میشه، به جز direction . درواقع قبل از نوشته شدن direction وقتی روی دکمه بعدی کلیک کنید تا اسلاید بعدی رو ببینید به جای اینکه indicator بعدی فعال بشه، قبلیش فعال میشد که با نوشتن direction: ltr مشکل رو حل کردیم.

اگر منظورم رو متوجه نشدید کافیه direction: ltr رو ننویسید و روی دکمه های قبل یا بعد اسلایدشو کلیک کنید و به دایره هایی که بالای اسلاید شو هستند با دقت نگاه کنید.

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

RWD-bootstrap3-8-13

این موضوع برمیگرده به همون gutter که در جلسه دوم راجع بهش صحبت کردیم. کافیه مقدار gutter رو تغییر بدیم.

برای اینکار فایل _variables.scss رو باز کنید و دنبال متغیر $grid-gutter-width بگردید و مقدارش رو از 30پیکسل به 17پیکسل تغییر بدید.

خسته نباشید. این قسمت هم به پایان رسید.

comment دیدگاه کاربران
الهه گیتی روان

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

Ali Abedian

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

مصطفی

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

رضا

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

وحید صالحی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3