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

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

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

اگر دقت کرده باشید کلمه ی " آخرین مطالب " و " پربازدیدترین ها " بین تگ h5 قرار گرفته. پس میتونیم برای اینکه فونت این دو تا کلمه رو به DroidKufi تغییر بدیم، فونت heading ها رو عوض کنیم.

برای این کار دوباره فایل _variables.scss رو باز کنید. دنبال متغیر $headings-font-family بگردید و مقدارشو از inherit به $droid-font-family تغییر بدید. با این کار، خیلی راحت فونت همه ی heading ها عوض میشه. ایرادی هم نداره که فونت همشون عوض بشه چون سایز اکثرشون زیاده و با فونت Tahoma قیافه بیریختی پیدا میکنه.

اگر روی کلمه " پربازدیدترین ها " کلیک کنید میبینید که هیچ تغییری نمیکنه و این pill ها عوض نمیشه. برای اینکه کار کنه کافیه فایل tab.js رو از مسیر bootstrap-sass-master\vendor\assets\javascripts\bootstrap بردارید و به پوشه js داخل پوشه قالب خودتون بریزید و بعدش هم کد زیر رو قبل از بسته شدن تگ body بنویسید:

<script src="js/tab.js"></script>

حالا دیگه کار میکنه!

بریم سراغ بلاک بعدی سایدبارمون. داخل فایل index.html بین تگ aside بنویسید bs3-panel:heading و tab رو بزنید یا کد های زیر رو بنویسید:

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body">
		Panel content
	</div>
</div>

بعد کدهارو مثل شکل زیر تغییر بدید.

RWD-bootstrap3-7-0

عکس me.png یه عکس 32 پیکسل در 32 پیکسل هست که ریختیم تو پوشه img . شما هم میتونید عکس آواتار خودتون رو 32 در 32 پیکسل save کنید و به جای این عکسی که من گذاشتم بذارید. کدهامون بع

حالا میخوایم واسه این پنل استایل بنویسیم. استایل panel-body که نیازی به دست کاری نداره ولی باید به panel-heading استایل بدیم.

فایل _panels.scss رو باز کنید.

RWD-bootstrap3-7-1

اولین قسمتی که باید دقت کنید اینه که این استایل ها رو برای .sidebar .panel-heading نوشتیم و برای سلکتور .panel-heading ننوشتیم. دلیلش هم در قسمت قبلی گفتم. چون هم برای بخش محتوا از پنل استفاده کردیم و هم برای بخش سایدبار و استایل هر کدوم متفاوته باید این کار رو کرد.

جاهایی که لازم نبود رو کامنت کردیم تا کامپایل نشه. رنگ بک گراند و رنگ نوشته ی panel-heading رو مشخص کردیم. -1 رو پاک کردیم چون مقدار متغیر $panel-border-radius به صورت پیشفرض 2پیکسل هست که حالا شما فرض کنید اگر از این 2پیکسل یه واحد کم شه دیگه چیزیش نمیمونه!

بعد هم که استایل کلاس about و تگ img رو نوشتیم.

حالا بلاک بعدی سایدبار. دوباره داخل تگ aside در فایل index.html بنویسید bs3-panel:heading و tab رو بزنید، بعد دوباره کدهارو مثل تصویر زیر تغییر بدید:

RWD-bootstrap3-7-3

توضیح خاصی نداره قبلا استایلش رو درست کرده بودیم 🙂

حالا برای بلاک آخر سایدبار در فایل index.html باز هم بنویسید bs3-panel:heading و tab رو بزنید و کدها رو مثل کدهای تصویر زیر تغییر بدید:

RWD-bootstrap3-7-4

از این tagcloud برای استایل دهی استفاده میکنیم که استایل ها قاطی نشه.

فایل _panels.scss رو باز کنید و برای .sidebar .panel-body کدی که تو تصویر میبینید رو بنویسید.

RWD-bootstrap3-7-5

البته درستش اینه که برای padding و margin و border-radius متغیر تعریف کنیم ولی خب حالا چون یکی بیشتر نیست دیگه تعریف نمیکنیم. $gray-lighter هم از قبل در فایل _variables.scss تعریف شده بوده.

این قسمت هم تموم شد. خسته نباشید!

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

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

محمد

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

محمد اسفندیاری

موفق باشید دوست عزیز

سید احسان عظیمی

واقعا توضیحات کاملن.ممنون خانم کلانتری

karim mos

همینجور که تعریف ها رو سریع تایید میکنید اگه سوالی هم که نظر قبل کرده بودم پاسخ میدادید چقدر خوب بود 😉

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

شرمنده دیگه نت نداشتم!

لقمان آوند

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

karim mos

واقعا پاسخ گوییتون حرف نداره! 🙂

karim mos

سلام خسته نباشد یه سوالی داشتم اگه تعداد ایتم های منو زیاد باشه وا صفحه رو زوم کنیم تو زوم 150% به هم میرسن و منو واکنش نشون نمیده تا فشرده بشه میخواستم ببنم راه حل چیه تا بتونیم زودتر منو رو فشرده کنیم البته واسه منو خود سایت سون لرن که امتحان کردم این مشکل به وجود نمیاد و منو به موقع واکنش نشون میده
این عکس رو هم برای تفهمیم بهتر سوال میگذارم
http://uploadkon.ir/fl/dd/40728

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

مقدار متغیر های $grid-float-breakpoint و $grid-float-breakpoint-max رو در_variables.scss تغییر بدید

narges

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

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

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

aref taker

ببخشید مشکل حل شد!
با عرض پوزش.

aref taker

ببخشید ولی شما اصلا بلاکی رو طراحی نکردید که بهش کلاس about داده باشید ؟
منظورتون از

 &amp;.about

چیه ؟

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

تصویر اول رو نگاه کنید
اگر منظورتون معنی & هست سری sass رو ببینید اونجا توضیح داده شده

nasrin

این مشکلم حل شد فقط مکان سایدبار دقیقا چسبیده به صفحه هستش وسایزشم بزرگتر از چیزی هست که توی دمو گذاشتین

لقمان آوند

با استفاده از خصوصیات CSS می تونید اندازه و فاصله تا اطراف سایدبار رو معلوم کنید .

نازنین

سلام خسته نباشید
خواهشا ادامه شو بذارید
خیلی بین آموزش هاتون وقفه هست
تنها دلخوشی من سایت شماس

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

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

نیاز به لاگین

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