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

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

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

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

amirfff

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

amirfff

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

amirfff

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

وحید صالحی

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

amirfff

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

وحید صالحی

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

amirfff

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

وحید صالحی

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

سید روح اله حسینی

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

amirfff

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

وحید صالحی

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

مصطفی کریم زاده

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

وحید صالحی

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

Somayeh Shams

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

وحید صالحی

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

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

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

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

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

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

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

وحید صالحی

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

وحید صالحی

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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