campaign-off40

دوره مجازی بوت استرپ (جلسه 6): معرفی و بررسی سیستم شبکه بندی-قسمت چهارم



visibility  
mode_comment   ۶۲

در این جلسه و در قسمت چهارم معرفی و بررسی سیستم شبکه بندی (Grid System) در فریم ورک بوت استرپ می پردازیم و به بیان ناگفته ها و موارد باقی مانده از این مبحث و در آخر هم در قالب یک مینی پروژه ساده آنچه را که تا این جلسه عنوان کردیم رو در قالب چارچوبی ساده از یک قالب پیاده سازی خواهیم کرد...

مطالب مطرح شده در این جلسه عبارتند از :

  • معرفی کلاس pull و بررسی ساختار و کاربرد آن
  • معرفی کلاس push و بررسی ساختار و کاربرد آن
  • بررسی columns ordering و نحوه سفارشی سازی الویت نمایش بلاک های ایجاد شده
  • بررسی column nesting و نحوه ایجاد بلاک های تو در تو
  • معرفی کلاس container-fluid برای طراحی تمام صفحه
  • بررسی چارچوب fluid layout
  • بررسی چارچوب fixed layout
  • معرفی کلاس jombotron برای ایجاد یک باکس در سند
  • نحوه سفارشی سازی کلاس container و ایجاد عرض دلخواه برای آن
  • ایجاد ساختار اولیه یک قالب واکنشگرا در قالب یک مینی پروژه بر پایه آنچه که تا این جلسه آموخته ایم
info توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

comment دیدگاه کاربران
mehdi karimi replyپاسخ

استاد بدون در نظر گرفتن بوت استرپ با مدیا کوئری چه جوری میشه ordering انجام داد ؟

وحید صالحی

سلام آقا مهدی خاصیت و ماهیت ordering براساس float کردن عناصر در مدیا کوئری های مورد نظر به چپ و راست هست شما هم کافیه عانصر رو در حالت عادی جایگاهشون رو در سند مشخص کنید و در مدیا کوئری مورد نظرتون خاصیت position یا float اونها رو تغییر و با هم جا بجا کنید …

mehdi karimi

خیلی ممنون

وحید صالحی

سلامت باشید

hojat replyپاسخ

سلام اگه میشه فایلهای common هرجلسه رو هم که ویرایش میکنید در فایل اون جلسه بزارید چون در اینصورت ما به ویرایش های که توی فایل css ایجاد می کنید دسترسی نداریم و باید خودمون تک تک در هرجلسه اینکارو کنیم

وحید صالحی

سلام آقا حجت اینکار رو انجام میدیم با این حال اگر در فایل های جلسه ای این مورد رو فراموش کردیم اعلام کنید تا فایل ها رو قرا بدیم

میوند

سلام استاد
استاد فایل common همین جلسه رو تغییر دادین ولی توی فایل ها نذاشتین. 🙄 🙄
ممنون . 😎 😎

وحید صالحی

سلام چشم بررسی میکنم و قرارش میدم ممنون از اطلاع رسانیتون
موفق باشی

میوند

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

وحید صالحی

خوب خدا رو شکر موفق باشی

افشین زندی replyپاسخ

سلام استاد صالحی.
خسته نباشید ❓
استاد گرید بندی رو کامل یاد گرفتم. واقعا ممنون
اگه یادتون باشه میخواستم گرید بندی یه قالبی رو پیاده سازی کنم که اون padding: 15px رو از 2طرف تو سایز های بزرگ نداشت . حالا من اومدم با کلاس های خودم اون 15px رو برداشتم و تو میدیا کوئری تعریف کردم براش که تو سایز کوچیک 15px رو بهش بده. اگه وقت کردید فایل ها رو بررسی کنید بهم بگید تا چه حدی کارم استاندارد هست و درست گرید بندی کردم یا ن. راه دیگه ای برای اینکار هست؟
کدها و عکس اون قالبی که میخوام کد بزنم رو هم گذاشتم.
ممنون که وقت میزارید
http://up.ashiyane.org/images/oieq1ywcu9pil3o3p04m.rar

وحید صالحی

سلام افشین جان احسنت به شما واقعا اصول رو خوب رعایت کردی مخصوصا مدیا کوئری رو که خودت بصورت سفارشی در فایل استایل ایجاد کردی و این نشون میده مباحث رو بخوبی درک کردی فقط یه مورد هست که اگر رعایت کنی کدنویسی قالب کاملا استاندارد میشه و اگر زمانی خواستی قالبی رو که طراحی کردی توسعه بدی کارت خیلی خیلی راحت تر خواهد بود و اون اینکه تا جایی که میتونی سعی کن از استایل های درون خطی مشابه برای عناصر مختلف یا مشابه استفاده نکنی و بصورت کلاس یا ای دی پراپرتی های مورد نظر رو براشون در فایل css ست کن و در سند از کلاس ها و ای دی ها بجاشون استفاده کن اینطور کدنویسی تمیز تر و استاندارد تری خواهی داشت و تغییر در استایل ها ی عناصر بصورت کلی انجام میشه و از تغییر کدهای مشابه که در عناصر مختلف استفاده شده جلوگیری و سرعت طراحی بالاتر میره و ساده تر خواهد بود در پایان دوره منتظر یه قالب حرفه ای ازت هستیم…
موفق باشی

افشین زندی

سلام استاد.
ممنون، امیدوار شدم:)
اون استایل درون خطی رو هم فقط برای اینکه بتونم ارتفاع دلخواهم رو به عناصر بدم استفاده کردم.

میوند replyپاسخ

سلام استاد
استاد یه طرحی رو میخوام باهاش جلو برم ولی توی گرید بندی برام یه سوال پیش اومد:
طرح به این صورته که یه قسمت باید container-fluid داشته باشه ولی عناصری که توش هست باید با بقیه عناصر که همون container با عرض 1170px هست برابر باشه حالا من یه container-fluid نوشتم بعد توش یه row و توی اون یه container دیگه! که میشه گفت یه container توی container دیگه اینم یه مثال:لینک
حالا سوالم اینجاست مشکلی نداره آیا استاندارد هست کدوم راه دیگه ای هم وجود داره؟؟؟؟
ممنون.

وحید صالحی

سلام نه مشکلی نداره میشه به اینصورت هم استفاده کرد

میوند replyپاسخ

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

وحید صالحی

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

میوند

ایشاالله مشکلشون حل بشه! آمین!

masouti replyپاسخ

سلام
تو فایل های این جلسه خبری از فایل های بوت استرپ نبود! بوت استرپی که تو این جلسه لطف کرده بودین راست جین کرده بودین!
میشه لطف کنید اونو در اختیار بذارین؟
ممنون

وحید صالحی

سلام از فایل های جلسه هفتم استفاده کنید

masouti

جلسه هفتم هم چیزی داخلش نبود، اگر زحمتی نیس براتون دوباره آپلود کنین مخصوصا جلسه ششم رو
ممنون

وحید صالحی

از جلسه 9 دانلود کنید فایل ها یکسان هستند و مشکلی بوجود نمیاد

ehsan a replyپاسخ

با عرض سلام خدمت استاد صالحی عزیز
بنده یه row دارم که شامل col-md-3 و col-md-9 هستش. قصد دارم col-md-9 را به 7 بخش مساوی و واکنشگرا تقسیم کنم. میشه راهنماییم کنید.

وحید صالحی

اینکار اشتباه و اصولی نیست چون فضایی برای هر ستون باقی نمیمونه ما در بخش nesting توضیح دادیم نهایتا برای کارایی بهتر دورن col ها رو به 2 بخش 6 ستونه تقسیم کنید

زمان الله ابراهیمی replyپاسخ

سلام

وحید صالحی

درود بر شما

زمان الله ابراهیمی replyپاسخ

سلام برشما استاد محترم فقد چندتا سوال دارم
1: استاد وقتی شما col-md-6 دو تا میزارید صفحه مرورگرا گوچیک میکنید تا 750px هیچ مشکل ندار
وقتی من صفحه مرور گرا کوچیک میکنم 992px که میشه col-md-6 از 6 به 12 میره
به نظرشما مشکل از کجا است نا گفته نمانه مانتور من 40 اینج است با خاطر اینه یاخیر
2: سوال دوم ربطی به درس نداره
آیا رنگ گوگل را باید توی سایت های که رنگ بالای داره مثل سون لرن تبلیغات بدم یا
راه کار دیگی داره لطفا” راهنمایی کنید

وحید صالحی

سلام ممنون از لطفتون
1-نه ارتباطی با اندازه صفحه نمایش نداره کدهاتون باد بررسی بشه!در فایل استایلتون مقدار مدیا کوئری جدیدی قرار ندادید ؟
2-تبلیغ و لینک دادن در سایت های با رنک بالاتر یکی از ده ها راهکار های افزایش رنک هست بشرطی که follow باشه و در سایتی که تبلیغ و لینک میدید مرتبط با ساییتون باشه

زمان الله ابراهیمی replyپاسخ

اول این که خیلی ممنون زود جواب دایدتشکر
نه استاد کد ها هیچ مشکل نداره این دوست عزیز که قالب توی بخش دیدگاه گذاشته اند اسم شریف شون است میوند است
را دانلود کردم این این جور است
col-md-8 گذاشته وقتی به 992px میرسه به صورت خود کار میره 12ستون میشه

وحید صالحی

ایشون مدیا کوئری ها رو خودشون سفارشی کردن یعنی مدیا کوئری های هسته بوت استرپ رو مطابق با نیاز خودشون طبق آموزش ها تغییر دادن

محسن امانی replyپاسخ

سلام آقای صالحی من در مورد این این مینی پروژه به شما پیام دادم میشه لطف کنید جواب من بدید

وحید صالحی

پیامی از شما دریافت نکردم !!! از طریق ایمیل سوالتون رو ارسال کنید.

حمید رضا مصطفی زاده replyپاسخ

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

وحید صالحی

سلام آقا حمید برای این کار هم فریم ورکی وجود داره که بر پایه بوت استرپ هست و میشه ازش استفاده کرد به آدرس زیر مراجعه کنید
http://metroui.org.ua/v2/

سید احسان عظیمی replyپاسخ

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

وحید صالحی

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

سید احسان عظیمی replyپاسخ

ببخشید سوالی داشتم…
در سایت 7لرن منو آبی رنگ بالایه و فوتر صفحه به صورت containder-fluid هست و قسمت کانتنت و ساید بار container هستند؟

وحید صالحی

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

وحید صالحی

بله

سید احسان عظیمی replyپاسخ

آقای صالحی چه فایده ای داره برای شخصی سازی کلاس container از width ثابت در cssاستفاده کنیم،پس هدف اصلیمون که طراحی رسپانسیو هست که در اینجا دچار مشکل میشه؟

وحید صالحی

دوست عزیز ظاهرا مبحث گرید رو بخوبی درک نکردید این عرض ثابت برتی کلاس container نهایت عرض هست و در صفحه های کوچک تر عرضش کم میشه نه این که در صفحات کوچک عرض تغییر نکنه این میشه خاصیت رسپانسیو

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

جناب صالحی وقتی شما به container عرض مثلا 700 میدین تا عرض 700 حالت رسپانسیو برقراره و پایینتر این اندازه داخل container دچار مشکل نمیشه ولی خود container اگر دارای رنگ باشه دیگه رسپانسیو نیس،امیدوارم منظورمو واضح رسونده باشم

وحید صالحی

دوست عزیز عرض ثابت نباید بدیدکه باید از خاصیت max-width براش استفاده کنید که بگید مثلا نهایت عرض 700 هست اما کمتر هم می تونه باشه پیشنهاد می کنم ابتدا مباحث css رو فرا بگیرید تا با مشکل مواجه نشید در ضمن زمانی که از فریم ورک استفاده می کنید نیازی به تغییرات کلی در ساختار container نیست

سید احسان عظیمی replyپاسخ

متاسفانه شما از max-width در آموزش استفاده نکرده بودین، منم در سوال اولم فقط خواستم بگم اگه از width استفاده کنیم رسپانسیو بهم میریزه و از هدفمون دور میشیم ک شما در جواب گفتین ظاهرا بحث گرید بندی رو متوجه نشدین و الان هم میگین ابتدا css رو یاد بگیرین،با تشکر از زحمات شما …روز بخیر

وحید صالحی

دوست عزیز شما سوالتون رو مبهم بیان می کنید اصلا اشاره به استفاده بنده در دوره نکردید لطفا فایلی رو که درش مشکل دارید رو به ایمیل بنده ارسال کنید تا بررسی و در صورت نیاز تصیح کنم تا جایی که یادم میاد در دوره بنده به از max-width استفاده نکردم و راه حل رو گفتم مشکلات اینچنینی رو در قالب پرسش و پاسخ نمیشه بخوبی بیان کرد فایلی که درش مشکل درید رو ارسال کنید تا بررسی و نتیجه بهتر بده بنده هم از در دوره به max-width اشاره نکردم حتما نیاز نبوده ازش استفاده بشه و این تذکرات نباید باعث دلخوری شما بشه ما اینجاییم تا مشکلات شما رفع کنیم بشرطی که مشکلتون واضح بگید نه کلی موفق باشید

موسی الرضا سنگ سفیدی replyپاسخ

جناب صالحی من عرض رو که مثلا 1024 وارد میکنم دیگه رسپانسیو نیست.علت چیه ؟

موسی الرضا سنگ سفیدی replyپاسخ

من جوابم رو گرفتم آقای صالحی ممنون(max-width)

Somayeh Shams replyپاسخ

سلام استاد.خسته نباشید
ببخشید کلاس های well-lg , well-sm که گفتید، برای سایزهای lg و sm هستند یا در همه ی مدیاها قابل استفاده اند؟

وحید صالحی

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

مصطفی کریم زاده replyپاسخ

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

وحید صالحی

سلام برای سفارشی سازی بجای width از پراپرتی max-width استفاده کنید

amirfff replyپاسخ

سلام استاد صالحی
در قسمت مینی پروژه زمانیکه به کلاس menu , مارجین bottom دادین به ارتفاع آن اضافه شد می خواستم علتش رو بدونم , آخه من برای اولین بار هست که با یه همچین موردی برخورد می کنم که مارجین bottom به ارتفاع اضافه کنه…

وحید صالحی

به عنصر درونی menu مارجین داره اعمال میشه

سید روح اله حسینی replyپاسخ

سلام و عرض ادب
من فایل تمرینات شما را درمرورگر فابرفاکس ( آخرین ورژن ) باز میکنم ولی فونت ها به صورت معمولی نمایش میده و استایل فونت بی یکان را نمیگیرد . حتی تکس اینکودینک را روی unicode تنظیم کردم ولی بازم همون طوره …جالبه با انترنت اکسپلور و کروم خوب نمایش میده فقط با فابرفاکس مشکل داره لطفا راهنمایی کنید.

amirfff replyپاسخ

سلام استاد
زمانیکه می خواهیم یک قالب را سفارشی کنیم ، و یک عرض را به آن اختصاص می دهیم ، المان در رسپانسیو دچار مشکل می شه و صفحه اسکرول افقی می خوره ، حتی کد شمارو هم چک کردم بازم اسکرول افقی می خورد ….

وحید صالحی

سلام بجای استفده از width از max-width استفاده کنید

amirfff replyپاسخ

استاد این راه حلی که شما می گید برای عرض هایی کمتر از عرض container جواب می ده ،
مثلا در حالت md که عرض container برابر با 970px می باشد ، ما اگر از max-width استفاده کنیم و مقدار max-width را از 970 کمتر بدهیم (مثلا 920px) مشکلی نیست کد به درستی ایجاد می شود ولی اگر مقدار max-width را از 970 بیشتر بدهیم (مثلا 1000) ، container همان عرض 970 را می گیرد فارغ از اینکه ما مقدار بیشتر از 970 را به آن اختصاص داده ایم ….

وحید صالحی

دوست عزیز بهتره ابتدا یکم رو موارد پایه ای css مسلط بشید از min-width براش استفاده کنید

amirfff replyپاسخ

استاد بنده رو موارد css مسلط هستم ، روشی که شما پیشنهاد دادید کامل نیست و اصلا با این روش نمی شه به صورت اختصاصی عرض تعیین کرد ، بهتر بود شما نحوه ی تعریف مدیاکوعری رو عنوان می کردید ، چون با اون روش می شه عرض container رو سفارشی کرد

وحید صالحی

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

amirfff replyپاسخ

اگه از min-width استفاده کنیم صفحه اسکرول افقی می خوره

amirfff

استاد اول از همه بخاطر پاسخگویی سریع از شما نهایت تشکر رو دارم ، ممنون که برای دانشجوهاتون وقت می ذارید و رفع اشکال می کنید ،خداخیرتون بده
چشم بنده تا 24 ساعت آینده براتون فایل رو ایمیل می کنم و دلیل خودم رو براتون می گم که چرا استفاده از روش max-width و min-width کامل نیست ، و دچار نقص هستش …

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.