
سلام دوستان، اگر یادتون باشه در قسمت پنجم برای اسلایدشو و محتوامون یه بلاک ساختیم که در این قسمت میخوایم اون بلاک رو پر کنیم و اسلایدشو رو بسازیم.
خب، برای اینکار اول فایل index.php رو باز کنید و دنبال عبارت content and slideshow will be here (که در قسمت پنجم نوشته بودیم) بگردید و این عبارت رو پاک کنید. به دلیل اینکه پکیج bootstrap 3 snippets میانبری برای کدهای اسلایدشو نداره مجبوریم کدها رو از سایت بوت استرپ برداریم و به جای عبارت پاک شده بنویسیم:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
خب حالا باید کدهارو یکم تغییر بدیم. منظورم اینه که عکسهای مورد نظرمون رو بهش اضافه کنیم و توضیحات مربوط به هر عکس رو هم براش بنویسیم. میتونید مثل عکس زیر کدها رو ویرایش کنید:
عکس slide1.jpg یه عکس دلخواهه شما میتونید هرعکسی که مد نظرتون هست رو اینجا قرار بدید.
بعد از اینکه کدهارو مثل تصویر بالا ویرایش کردید از همین کدهای داخل مستطیل قرمز کپی بگیرید و زیر این مستطیل به جای " ... " پیست کنید. البته چون طبق کدهای بالا ما سه تا indicator داریم پس باید داخل اسلاید شو هم سه تا آیتم داشته باشیم. Indicator در این اسلایدشو منظور همون دایره هایی هست که نشون میده کدوم عکس الان داره در اسلایدشو نشون داده میشه.
کدها بعد از کپی پیست کردن آیتمهای اسلایدشو به این صورت میشن:
راستی شاید براتون سوال پیش اومده که من چرا گفتم این دو کلاس active رو پاک کنید. خب درواقع برای آیتمهای اسلایدشو باید فقط یه کلاس active داشته باشیم که نشون دهنده این هست کدوم آیتم اسلایدشو باید وقتی سایت باز میشه نشون داده بشه. اگر این دو کلاس active که تو عکس معلوم کردم رو پاک نکرده باشید اونوقت میبینید که وقتی قالب رو باز میکنید، هر سه عکس زیر هم نشون داده میشه.
حالا که اسلایدشو حاضر شد بیاید تستش کنیم، رو دکمههای قبل و بعد کلیک کنید. اصلا اسلایدشو کار نمیکنه! کافیه فایل carousel.js رو از مسیر bootstrap-sass-master\vendor\assets\javascripts\bootstrap برداریم و داخل پوشه js قالب خودمون قرار بدیم و در آخر هم کد زیر رو قبل از بسته شدن تگ body بنویسیم:
<script src="js/carousel.js"></script>
نوبت میرسه به استایل دهی اسلایدشو. فایل _carousel.scss رو باز کنید و مثل تصویر کدهارو اضافه کنید:
margin-bottom دادیم که بعدا قسمت مطالب رو اضافه کردیم اسلایدشو و مطالب به هم نچسبه. ممکنه بگین من از کجا میدونم که الان margin-bottom بدم. چون من قبلا کار کردم میدونم اینطوریه. ولی شما اگر نمیدونین مشکلی نیست وقتی قسمت مطالب رو ایجاد کردید و دیدین مطالب و اسلایدشو چسبید به هم، میتونید بعدش بیاید به اسلایدشو margin-bottom بدید.
مقدار $border-radius-base که از قبل در _variables.scss تعریف شده بود و ما فقط ازش استفاده کردیم. box-shadow هم از قبل توسط خود بوت استرپ داخل فایل _mixins.scss به عنوان یه میکسین آماده شده بود.
حالا استایل فلشها رو عوض کنیم. مثل تصویر زیر تغییراتی رو داخل فایل _carousel.scss ایجاد کنید:
خط 92 و 97 رو کامنت کردیم که کامپایل نشه علتش هم اینه که استایل پیش فرض بوت استرپ برای دکمههای بعد و قبل رو لازم نداریم و استایل خودمون (خطوط 83 تا 85) رو برای این دکمهها مینویسیم. متغیر $gray-darker هم که قبلا در فایل _variables.scss تعریف شده بوده. خب حالا اسلایدشو رو ببینید چطوری شد:
دکمههای قبل و بعد این تصویر کجا و دکمههای دمو کجا 🙂
برای اینکه درستش کنیم باید کدهارو مثل تصویر زیر بنویسیم:
ترتیب کار اینطوری بود که اول width و height برای دکمهها گذاشتیم که سایز دکمه هارو درست کنیم و فایل رو سیو کردیم و اسلاید شو رو نگاه کردیم، بعد دیدیم که دکمهها چسبیدن به بالای اسلاید شو که به خاطر top:0 بود برای همین مقدار top رو به 45% تغییر دادیم تا بیاد وسط. و ضمنا چون دکمهها از سمت چپ و راست به اسلاید شو میچسبیدن و فاصله نداشتن مقدار left:0 و right:0 رو به 10پیکسل تغییر دادیم.
حالا اگر اسلاید شو رو نگاه کنید مشکلی که داره فلشهای اسلاید شو خیلی بزرگ هستند و همچنین فلش دکمه سمت راستی اصلا جای مناسبی نیست. همیشه میشه با inspect element متوجه شد که مشکل از کجاست. الان روی فلش سمت راستی کلیک راست کنید و inspect element رو بزنید:
میبینید؟ وقتی سایز صفحه بزرگتر از 768پیکسل باشه:
- به خاطر font-size:30px اندازه آیکونهای فلش بزرگه.
- margin-left: -15px داره ولی margin-right: -15px نداره به خاط همین هست که اون فلش سر جای درستی قرار نداره.
پس حالا باید در فایل _carousel.scss دنبال همچین خطی بگردیم و یکی اینکه font-size رو حذف کنیم و یکی هم اینکه margin-right: -15px رو اضافه کنیم. ولی من میگم بیاین کلا قسمتی که مدیا کوئری واسه سایز بزرگتر از 768پیکسل نوشته رو حذف کنیم. اگر میپرسین چرا، کافیه قسمت مدیاکوئری رو حذف کنید و ببینید که چه تو سایز 768پیکسل به بالا چه کمتر از اون اصلا مشکلی وجود نداره که بخوایم مدیاکوئری بنویسیم 🙂
بعد از اینکه اینارو کامنت کردیم اگر اسلاید شو رو ببینید دکمهها به این صورت هستن:
حالا خوب شد. کافیه یکم آیکون بره بالا یکم هم بیاد اینور:
درست شد.
حالا استایل caption آیتمها رو درست میکنیم:
نکته خاصی نداره فقط اینکه border-bottom-radius و opacity جزو میکسینهای از قبل تعریف شده ی بوت استرپ هستند. ضمنا متغیر $border-radius-base هم جزو متغیرهای از قبل تعریف شده هست.
و حالا قسمت indicatorهای اسلایدشو:
همه ی تغییراتی که در این تصویر انجام دادیم باعث عوض کردن محل قرار گیری indicatorها میشه، به جز direction . درواقع قبل از نوشته شدن direction وقتی روی دکمه بعدی کلیک کنید تا اسلاید بعدی رو ببینید به جای اینکه indicator بعدی فعال بشه، قبلیش فعال میشد که با نوشتن direction: ltr مشکل رو حل کردیم.
اگر منظورم رو متوجه نشدید کافیه direction: ltr رو ننویسید و روی دکمههای قبل یا بعد اسلایدشو کلیک کنید و به دایره هایی که بالای اسلاید شو هستند با دقت نگاه کنید.
کار اسلاید شو تموم شد. راستی به فاصله بین اسلایدشو و سایدبار دقت کردید؟ فاصلش خیلی بیشتر از فاصله دو بلاک سایدبار از همدیگه هست. یعنی تقریبا دو برابر هست. البته این مشکل نیست ولی برای قشنگتر شدن قالب بهتره فاصله ی بلاکها از هم دیگه یکسان باشه.
این موضوع برمیگرده به همون gutter که در جلسه دوم راجع بهش صحبت کردیم. کافیه مقدار gutter رو تغییر بدیم.
برای اینکار فایل _variables.scss رو باز کنید و دنبال متغیر $grid-gutter-width بگردید و مقدارش رو از 30پیکسل به 17پیکسل تغییر بدید.
خسته نباشید. این قسمت هم به پایان رسید.
سلام خانم کلانتری برای ساخت سلایدر به جای کپی کردن متن میتونید bs3-car رو بزنید تا منو خودش ساخته بشه حتی میتونید تو همون قسمت Id هم واسه المان هاتون تعریف کنید 😉
سلام و ممنون
سلام
من دارم سایتی رو با بوتسترپ طراحی میکنم و میخوام از دو اسلایدر متفاوت در سایت استفاده کنم
ایندکس یک اسلایدر مجزا داشته باشه
و بلاگ هم اسلایدری جدا
چیکار باید بکنم؟
میشه راهنماییم کنید
ممنون
سلام.
شما چطوری بدون اینکه استایل ریسپانسیو بوت استرپ را به صفحه اضافه کنید از آن استفاده کردید؟
سلام.ممنون بابت آموزش.من یه سوالی دارم. مثلا اگه بخواهیم برای قسمت ساید بار اون قسمت های پربازدید کننده ها و حالا کلا قسمت های دیگه ساید بار را خودم توی فتوشاپ طراحی کنم و از طراحی خوذم برای گرافیک و بک گراند آن استفاده کنم باید چی کار کنم(حتی مثلا قسمت جستجو هم طرح شخصی خودم را بزارم).منظورم از چیکار کنم اینه که قسمت کد نویسی psd به بوت استرپ هست..و در ضمن از کجا ساز اون قسمت ساید بار را در بیارم که توی فتوشاپ طبق اون سایز طراحی کنم .توی ریسپانسیو بودن هم کاری باید کنم؟ تا اینجا را میدونم که باید بک گراند اون سلکتور را اون عکس طراحی خودم را بزارم ولی تو بوت استرپ و با توجه به ریسپانسیو بودن چه کنم؟).توی حالت عادی و طراجی قالب که سایز اون div را تعریف مکنیم و یه عکس با اون سایز میسازیم و به بک گراند اون div میدیم اما تو بوت استرپ چگونه هست که ریسپانسیو بشه.
انشا الله منظورم را گرفته باشید.ممنونم
دوست عزیز سوالتون رو در انجمن مطرح کنید.
با سلام اگه ما یه فایل css داشته باشیم (که خودمان ساخته ایم )در کدام یک از پوشه ها باید قرار دهیم تا بتوانیم آن را لینک داده و از آن استفاده کنیم؟
سلام
تو هر پوشه ای خواستید قرار بدید بعد لینک به همون پوشه بدید
اگر پوشه css دارید که بهتره تو همین پوشه قرار بدید
سلام و خسته نباشید از مطالب خوبتونن سپاسگزارم. لطفا ویرایش less بوت استرپو با ویژوال استودیو 2013 هم توضیح بدید. تو آپدیت 2 ویژوال استودیو و با نصب webessential2013 میشه less فایل ها رو تو خود ویژوال استودیو ویرایش کرد و سی اس اسشو گرفت. ممنون میشم اینم بگید ماهایی که .net کاریم به شدت احتیاج داریم
سلام ممنون
چشم اگر فرصت شد حتما
شرمنده یه سوال دیگه هم دارم خانوم کلانتری، من اگر بخواهم حداکثر سایز صفحه ام به جای 1200 بشه 1040 مثلا، فقط باید تو فایل سی اس اس بوت استرپ این دو جارو تغییر بدم؟ و در ضمن تغییر این سایز استاندارد تو تغییر اندازه سایت تو دیوایس های مختلف مشکلی ایجاد نمی کنه؟
@media (min-width: 992px) and (max-width: 1199px) {
.visible-xs.visible-md {
display: block !important;
}
@media (min-width: 1200px) {
.visible-xs.visible-lg {
display: block !important;
}
سلام
به جز این قسمت که الان گفتید، چندجای دیگه هم همچین کدی نوشته شده که باید تغییرش بدید. ضمنا عرض container رو هم باید تغییر بدید
فکر نمیکنم مشکلی داشته باشه
سلام دوباره.
یه سوال دیگه درباره اسلایدشو واسم پیش اومد!
امکانش هست جهت حرکت تصویر رو هم عوض کنیم؟
جهت حرکت تصویر خلاف جهت دکمه های کنترلی هستش، یه کم عجیب به نظر می رسه وقتی تصاویر جا به جا می شن!
سلام
فایل carousel.scss_ رو باز کنید و مثل این عکس تغییرات رو انجام بدید.
هورا! حالا خیلی بهتر شد! 😀
مرسییی!
دست شما درد نکنه.
و یک سوال دیگه :
من از sass استفاده نمیکنم ، آیا اشکالی داره ؟ استفاده کردن از sass مهمه ؟
اشکال که نمیشه گفت اشکال داره
واسه شخصی سازی بوت از sass استفاده میکنیم، البته میتونید از less هم استفاده کنید
اگر شخصی سازیش براتون مهم نیست و همون استایل های پیش فرض بوت رو میخواین استفاده کنید نیازی به sass یا less نیست
درغیر این صورت یا باید فایل css بوت رو تغییر بدید که کار نسبتا مشکلی هست یا اینکه یه فایل css دیگه برای استایل های مدنظرتون درست کنید و اون رو در کنار فایل css بوت load کنید که کار درستی نیست، حجم فایل css بوت همینطوریش هم زیاد هست.
سلام دوباره . نگفتید آیا آموزش بوت استرپ ادامه داره یا اینکه تموم شد ؟ پیگیر باشیم یا نه ؟
ممنون
سلام
همین چندروز پیش این قسمت منتشر شده و دو سه روز دیگه قسمت بعدیش میاد
اوه! ممنونم از لطفتون. اتفاقا اولین چیزی که بررسی کردم همون آدرس پوشه توی variables بود، ولی متوجه این اختلاف نشدم.
از وقتی که گذاشتید خیلی تشکر می کنم.