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

- visibility ۱۵ mode_comment

سلام دوستان.

قبل از هر چیز، من بابت تاخیر در حاضر کردن این قسمت از آموزش عذرخواهی میکنم؛ هم از مدیر سایت و هم از دوستانی که آموزش بنده رو دنبال میکردن. یکم درگیر بودم ولی انشاالله قسمت های بعدی رو سریعتر حاضر میکنم.

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

قبلا داخل containerمون یه row درست کرده بودیم و کدهای مربوط به منوی سایت رو داخلش نوشته بودیم. برای قسمت محتوا و ساید بار هم باید یک row داشته باشیم و کدهای مربوط به محتوا و ساید بار رو داخل این row قرار بدیم. پس دوباره داخل container بنویسید bs3-row و tab رو بزنید یا کد زیر رو بنویسید:

حالا باید دو تا بلاک ایجاد کنیم که یکی از اونها مخصوص سایدبار و یکی دیگه مخصوص محتوا و همچنین اسلاید شو هست. همونطور که در دموی قالب میبینیم بلاک محتوا سمت راست هست و بلاک سایدبار سمت چپ، همچنین در سایزهای medium و large عرض بلاک محتوا دو برابر بلاک ساید بار هست؛ یعنی بلاک محتوا باید 8ستون گرید رو اشغال کنه و بلاک سایدبار هم 4ستون گرید. در سایز های small و extra small هم میخوایم که این بلاک ها همه ی 12ستون گرید رو اشغال کنه.

در واقع در سایزهای small و extra small باید هم 12ستون رو اشغال کنه چون عرض صفحه نمایش کم هست و اگر بلاک سایدبار و بلاک محتوا کنار هم دیگه قرار بگیره، سایت خوانایی و زیبایی خودش رو از دست میده.

خب، پس داخل این row جدیدی که الان ایجاد کردیم مینویسیم:

اینم بگم که دو تا کلاس content و sidebar جزو کلاس هایی که خود بوت استرپ تعریف کرده نیستند، کلاس هایی هستند که بعدا برای استایل دهی لازممون میشه و خودمون تعریفش کردیم.

چون نسخه بوت استرپی که داریم استفاده میکنیم نسخه rtl نیست، بلاک اولی یعنی بلاک محتوا سمت چپ میفته و بلاک دومی که بلاک ساید بار هست سمت راست. برای اینکه سایدبار بیاد سمت چپ و محتوا بره سمت راست 2 راه داریم:

  • راه اول اینه که از تکنیک column ordering استفاده کنید و مثلا از .col-md-pull-* و .col-md-push-* استفاده کنید. مثلا اینجا باید به بلاک محتوا کلاس col-md-push-4 بدیم که یعنی این بلاک رو به اندازه 4ستون گرید هل دادیم سمت راست و بعد باید به بلاک سایدبار کلاس col-md-pull-8 بدیم یعنی بلاک ساید بار رو به اندازه 8ستون گرید میکشیم سمت چپ.

    و مهمه که کدوم بلاک pull بشه و کدوم یکی push

    بلاکی که سمت چپ هست و میخوایم اون رو به سمت راست بفرستیم (هل بدیم) باید push بشه و بلاکی که سمت راست هست و میخوایم اون رو به سمت چپ بفرستیم (بکشیم) باید pull بشه.

    یعنی کد رو باید به شکل زیر بنویسید:

  • راه دوم هم اینه که ترتیب قرار گرفتن ستون های گرید بوت استرپ رو تغییر بدیم. منظورم اینه که در حالت فعلی، ستون های گرید به ترتیب از سمت چپ چیده میشند ولی ما باید کاری کنیم که از سمت راست شروع به چیده شدن کنند. برای اینکار کافیه فایل _mixins.scss رو باز کنید و داخل فایل با ctrl+f عبارت float: left رو جستجو کنید و تغییرش بدید به float: right . داخل این فایل _mixins.scss در 5جای مختلف نوشته شده float: left که باید همه ی اینها به float: right تغییر داده بشه. بعد هم فایل bootstrap.scss رو کامپایل کنید.

info نکته :

توجه کنید که ساختار فایل ها در نسخه 3.2.0 بوت استرپ تغییراتی داشته و اگر میخواید از راه دوم استفاده کنید باید تغییرات گفته شده رو در فایل های _grid.scss و _grid-framework.scss که در پوشه mixins هستند انجام بدید. ما برای این آموزش از نسخه 3.1.1 استفاده کرده بودیم

حالا شما از هرکدوم از راه های بالا که راحت تر هستید استفاده کنید، فرقی نمیکنه، ولی نکته ای که باید بگم اینه که اگر از راه دوم استفاده کردید، اونوقت قضیه pull و push فرق میکنه. یعنی مثلا در کد بالا ، باید به جای col-md-push-4 بنویسیم col-md-pull-4 و به جای col-md-pull-8 بنویسیم col-md-push-8

من از راه دوم استفاده کردم و به نظرم بهتره شما هم ترتیب قرار گرفتن ستون های گرید بوت استرپ رو تغییر بدید و بعدش اگر جایی لازم شد از push و pull استفاده کنید.

ضمنا چون سایدبار نسبت به قسمت محتوا و اسلاید شو کار کمتری میبره اول قسمت سایدبار رو طراحی میکنیم، ولی در قسمت بعدی...

میدونم بعد از وقفه طولانی ای که بین آموزش افتاده بود، این قسمت واقعا کوتاه بوده ولی برای اینکه مطالب نظم بیشتری داشته باشه سایدبار رو در قسمت بعدی درست می کنیم.

comment دیدگاه کاربران
koohyar

baa tashakore faravaan az jenaabe kalantar, man matalebe shoma ro hamishe donbal mikonam va vagheaaan estefaade kardam. omidvaram hamishe movafagh bashid

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

از دست شما 🙂
ممنون

Reyhaneh Ezatpanah

خیلی خیلی زیاد ممنونم… ❓

راد نمازی

ممنون برای به اشتراک گذاشتن مطالب

Reyhaneh Ezatpanah

میشه لطفا در مورد تگ های section , aside توضیح بدین؟

آیا در خود بوت استرپ تعریف شده؟!

تو خود آموزش اشاره یی به اینا نشده!!!

سپاس

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

اینها تگ های html5 هستند. اینجا رو بخونید

پدرام

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

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

سلام
به نظر میاد ساختار فایل ها تغییر کرده
فایل های _grid.scss و _grid-framework.scss که در پوشه mixins هستند رو ویرایش کنید

پدرام

درود . تو گرید فریم ورک یه فلوت و تو گرید 5تا فلوت بود اما بعد از تغییرشون باز هم اتفاقی نیفتاد.

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

حتما فایل هارو کامپایل نکردید

محمد

چرا وقتی فایل های با پسوند scss رو تو sublime باز میکنم به صورت رنگ آمیزی شده نیستند و همگی به رنگ سفیدن ؟ در حالی که در تصاویری که مثلا شما از navbar.scss قرار دادید رنگ بندی وجود داره ؟ با آرزوی قبول طاعات و عبادات

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

پکیج sass رو برای sublime نصب کنید

محمد

خیلی متشکرم از شما خانم کلانتری پاینده باشید

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

پکیج Syntax Highlighting for Sass رو هم نصب کنید بهتر میشه

sib_Sabz00

سلام خسته نباشید
ممنون از آموزشتون
من navigation رو curve کردم، حالا که میخوام row تعریف کنم برای محتویات سایت،از navigation عریضتر میشه
میشه راهنماییم کنید
ممنونم

نیاز به لاگین

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