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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۱۹ خرداد ۱۳۹۳

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

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

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
	<div class="thumbnail">
		<img data-src="#" alt="">
		<div class="caption">
			<h3>Title</h3>
			<p>
				...
			</p>
			<p>
				<a href="#" class="btn btn-primary">Action</a>
				<a href="#" class="btn btn-default">Action</a>
			</p>
		</div>
	</div>
</div>

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

RWD-bootstrap3-9-1

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

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

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

و باعث میشه تصاویر ریسپانسیو بشه. به این صورت که حداکثر عرض تصویر رو 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 نوشته بودیم بعد از تغییرات شدن این:

<div class="col-sm-6">
	<div class="thumbnail">
		<div class="header hidden-xs">
			<img src="img/example.jpg" class="img-responsive" alt="Lorem ipsum">
			<time datetime="2014-02-14">2 روز پیش</time>
		</div>
		<div class="caption">
			<a href="single.html">
				<h4>لورم ایپسوم</h4>
			</a>

			<p><a href="#">لورم ایپسوم</a> متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد...</p>

			<div class="clearfix">
				<a href="single.html" class="btn-cream pull-left">ادامه مطلب</a>
			</div>
		</div>
	</div>
</div>

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

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

RWD-bootstrap3-9-3

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

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

$color-yellow: #e1c35b;
$color-yellow-dark: darken($color-yellow, 15%);
$color-yellow-darker: darken($color-yellow, 35%);
$color-yellow-light: lighten($color-yellow, 25%);

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

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

<a href="#" class="btn btn-primary">Action</a>

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

RWD-bootstrap3-9-8

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

RWD-bootstrap3-9-9

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

چه امتیازی به این مقاله می دید؟
نویسنده مهشاد کلانتری

نظرات کاربران

سامان کیانی

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

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

من یک منو درست کردم که زیرمجموعه داره
حالا وقتی در دسکتاپ سایت رو مشاهده می کنم ، منویی که زیرمجموعه داره کنارش یک فلش (جهت رو به پائین) داره که حتما باید رو منو کلیک کنیم تا زیرمجموعه نمایش داده بشه
من میخوام وقتی نشانه گر موس میره روی منو زیرمجموعه ها نمایش داده بشه
یعنی دقیقا عملکردش مثل منوی سایت شما باشه
ممنون میشم راهنمایی کنید
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’);
});

});

زهرا

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

لقمان آوند

سلام
لیست کامل مطالب رو اینجا ببینید.

پدرام

سلام . یه سوال داشتم من آموزش رو کاملا تا اینجا پیش اومدم اما جای ساید بار و بخش کانتنت به هم ریخته یعنی اصلا زیر منو نیستن و هر کدوم یه طرف رفتن . مشکل از چیه ؟:|

مهشاد کلانتری

سلام
فایل های پروژتون رو یه جایی آپلود کنید لینک بدید بررسی کنم

پدرام

ممنون حل شد ❓

ناهید

یه سوال دیگم داشتم برچسب مطالب به درد موتورهای جستجو میخوره ؟

لقمان آوند

بله
اگر برچسب های مرتبط و خوب استفاده کنید مفیده .

ناهید

ممنون باشه حتما تست میکنم
یه سوال دیگه هم دارم اندازه text box رو چه جوری میشه عوض کرد ؟

مهشاد کلانتری

سلام
راحت ترین راهش اینه که form-group رو داخل row بذارین و با استفاده از مثلا col-md-6 سایزش رو مشخص کنید
مثال

ناهید

نسخه 8
http://uplod.ir/ckd651cthrye/mytheme.rar.htm

مهشاد کلانتری

سلام
قالبتون رو تست کردم مشکلی نداشت
احتمالا شما صفحه رو تو مرورگر از طریق file:// باز میکنید به همین خاطر فایل Respond.js نمیتونه کار کنه و شما قالب رو بهم ریخته میبینید
اگر قالب رو روی لوکال هاست یا یه هاست معمولی تست کنید مشکلی نداره

ناهید

سلام مهشاد جون ضمن تشکر از مطالب خیلی خوب و مفیدت یه سوال دارم :
من سایتم رو که با ie باز میکنم مثل موبایل نمایش داده میشه با این که صفحه جا داره اما زیر هم میاد علتش چیه ؟
ممنون میشم جواب بدین. 😉

مهشاد کلانتری

سلام
با ie نسخه چند تست کردین؟
سایتتون رو بدین ببینم شاید بتونم کمکتون کنم

بهرام

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

بهرام

سلام
من این مورد رو چند جای دیگه هم در قسمت نظرات این آموزش دیدم که دوستان تذکر دادن. میشه بگین چه جوری باید تغییرات رو در یک فایل دیگه ایجاد کنیم و با سورس اصلی کاری نداشته باشیم. در عین حال اون استایل هایی که تو اون فایل داریم ایجاد میکنیم اعمال بشه. من متوجه نشدم.

لقمان آوند

روشی که در این سری انجام شده تغیر در سورس اصلی بوده.
برای کاری که شما می خواید باید استایل ها جداگانه ایجاد می کردید و با استفاده از کیورد !important برای ویژگی های css در فایل جداگانه اولویت ایجاد می کردید ..

لقمان آوند

من هم وارد بحث بشم و چیزی بگم ;D
حرف هایی که دانیال میگه درسته . وقتی سورس بوت استرپ رو ویرایش می کنیم portable بودن کارمون رو کم می کنیم . برای جاهایی که آدم می خواد چندین سایت رو با یه فریمورک مثل بوت استرپ طراحی کنه بهتره که دست به سورس اون نزنه و کلاس های css اون رو override کنه . در عین حال من فکر می کنم خانم کلانتری به خاطر آموزش سریعتر از این روش استفاده کردند وگرنه اصولی تر اینه که هسته ی فریمورک دستکاری نشه (مگر به دلایل خاص) . درسته کار ایشون portable بودن کار رو از بین میبره ولی مزیت هایی مثل سرعت و راحتی کار (البته برای تک پروژه) و سبک تر شدن فایل های css رو هم داره !

مهشاد کلانتری

سرعت در کدنویسی شما یه بحثه
کیفیت کار هم یه بحث دیگه
من هم خودم قبلا از این روشی که شما گفتید استفاده کردم
ولی تغییر در هسته بوت واقعا 1روز هم وقت نمیبره همون کدهایی که میخواید تو یه فایل سی اس اس دیگه بنویسید تو هسته بوت بنویسید و ضمنا کدهایی که لازم ندارید رو از هسته حذف کنید تا حجم فایلتون سبک تر بشه
و یه بحث دیگه هم اینه که با انتشار نسخه جدید از بوت دلیلی نداره شما از ورژن قبلی به ورژن جدید مهاجرت کنید
فریم ورک های سی اس اس اینطوری نیستن که باگ داشته باشن که ما هم احتیاج داشته باشیم اونهارو آپدیت کنیم و وقتی نسخه جدیدی از اونها منتشر میشه به خاطر اضافه کردن امکانات جدید هست
وقتی هم قالب شما با یه ورژن داره به خوبی کار میکنه دیگه چه احتیاجی به آپدیت هست؟

نیاز به لاگین

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