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



visibility  
mode_comment   ۳۴

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

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

  • معرفی انباشت افقی یا stacked to horizontal
  • معرفی و بررسی کلاس col-md
  • معرفی و بررسی کلاس col-sm
  • معرفی و بررسی کلاس col-xs
  • بررسی دلیل ایجاد row های (ردیف های) مجزا برای ایجاد بخش های مختلف در سند
  • استفاده از کلاس های ترکیبی ستون بندی  و دلایل این کار
  • معرفی کلاس clearfix ,فواید و  دلایل استفاده از آن و بررسی معادل آن در css
  • بررسی کلاس های مخفی سازی المان ها و دستورات:
    • کلاس hidden-xs
    • کلاس hidden-sm
    • کلاس hidden-md
    • کلاس hidden-lg
info توجه

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

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

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

سلام آقای صالحی لینک دانلود مشکل داره و درست نیست.
ارور 404 میده

وحید صالحی

با عرض پوزش اصلاح شد…

حمید

لینک دانلود فایل جلسه چهارم هنوزخرابه

وحید صالحی

سلام اصلاح شد.

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

سلام استاد. لینک دانلود مشکل داره…

وحید صالحی

اصلاح شد افشین جان

Diako Dindar replyپاسخ

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

وحید صالحی

ممنون از اطلاع رسانی شما اصلاح شد…

hasan_elc replyپاسخ

سلام اقای صالحی
لینک فایل های جلسه مشکل داره

وحید صالحی

سلام اصلاح شد.

Negar Ghavidel replyپاسخ

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

وحید صالحی

سلام اصلاح شد.

hasan8 replyپاسخ

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

وحید صالحی

سلام اصلاح شد.

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

سلام استاد صالحی. ممنون بابت این جلسه، مثل همیشه عالی بود و پر از نکته و مثال.
استاد من چون دوره طراحی وب تمرین زیادی داشتم کاملا کدهای هسته بوت استرپ مربوط به گرید بندی رو درک کردم، بجز یه چیزی. تو مثالهای متعددی که داخل ویدیو انجام دادید از کلاس well استفاده کردید، و دلیل ایجاد اون فاصله هایی هم که بین ستون ها ایجاد شد از دو طرف همین کلاس بود.
حالا من یه psd رو برای تمرین انتخاب کردم که قصد دارم بعد اتمام هر مبحث اون مورد رو پیاده سازی کنم. تو گرید بندی اون قالب که لینک تصویرش رو پایین قرار دادم، محتوا از سمت چپ و راست container فاصله ندارن و فقط بین باکس ها فاصله ایجاد شده. برای اینکار باید خودمون دستی بیایم و margin هاش رو برداریم یا خود فریم ورک همچین قالبلیتی رو داره؟؟
http://uupload.ir/files/2qsm_untitled-1.jpg

وحید صالحی

نه نیازیی به تغییر دستی مارجین نیست فقط باید اصول رو رعایت کنید شما div با کلاس row ایجاد کردی و دوباره یه row دیگه دورن row قبلی ایجاد کردی که باعث شده این حالت بوجود بیاد.اون div که کلاس row داره و بعد از تگ بسته section هست رو کلا کات کن و قرارش بده بعد از تگ بسته div ی که کلاس row اولی رو بهش دادی.

افشین زندی

استاد خیلی ممنون.
ولی مشکلم اینه که اون 2تا بخش sidebar و content باید به container بچسپن و اون 15px فاصله رو نداشته باشن تا مثل طرح جلو برم. کلا تو طرح تا آخر به همین شکل هست

وحید صالحی

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

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

استاد با همون کلاس well اومدم اون گرید بندی عکسی که بالا گذاشتم رو انجام بدم ولی یه مشکلی داره. اگه وقت کردین این فایل رو نگا کنید. به smو xs که میرسه اسکرول افقی میخوره
البته با ابزار responsive که شما داخل آموزش استفاده میکنید درست نشون میده ولی وقتی به صورت عادی مرورگر رو کوچیک میکنم اون اسکرول پیداش میشه!
اگه میشه لطف کنید اشتباهم رو بهم بگید.
ممنون

وحید صالحی

سلام افشین جان فایلی رو که برای دانلود قرار دادی مشکلی نداره و در xs sm اسکرول افقی نمیخوره اون عکس رو هم اگر منظورته باید فالیش رو بزاری تا بررسی کنیم

افشین زندی

سلام استاد. ممنون که وقت گذاشتین. استاد شرمنده حواسم نبود، اگه میشه تو style.css اون overflow-x: hidden رو بردارید:) صورت مسئله رو پاک کردم 😀
استاد اینم فایل قالب. ممنون.
http://s6.picofile.com/file/8199140918/color_red_turquoise.zip.html

وحید صالحی

افشین جان مشکل از همون حالت 2 کلاس row رو که درون هم ایجاد کردی هست طبق کامنت قبلی که گفتم جای div هایی که کلاس row رو بهشون دادی اصلاح کنی درست میشه و دیگه اسکرول افقی نمی خوره فایل اصلاح شدش رو هم فرستادم به ایمیلت چک کن تا بهتر متوجه بشی.راستی فایل psd رو که ارسال کردی مشکلی نداره منظورم فایلی که اسکرول افقی میخورد بود که اونو دان کردم ومشکلشو رو هم برات توضیح دادم
موفق باشی

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

ببخشید فایل رو یادم رفت بزارم:)
http://s3.picofile.com/file/8199109550/j4_grid.zip.html

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

استاد الان این لینک فایل اصلاح شدس که میخوام نتیجه کارم تا آخر اینجوری باشه. یعنی محتوا از سمت راست و چپ کلاس container فاصله ای نداشته باشن. تو این فایل من خودم اومدم و دستی padding ها رو 0 گذاشتم ولی میخواستم بدونم میشه با گرید بندی و کلاس های خود بوت استرپ همچین کاری کرد یا ن؟
http://s6.picofile.com/file/8199158050/j4_grid.rar.html

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

استاد تکی 😉 خیلی ممنون از آموزش شما من که خیلی لزت بردم
فقد استاد بعداز این دوره شما چی آموزش در نظر دارید با تشکر از شما استاد گلم دست مریضا 😆

وحید صالحی

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

dariosh babaii replyپاسخ

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

کیوان علی محمدی

سلام اطلاعات پروژه برای نرم افزار Php Storm هستش و نیازی نیست در هاست آپلود بشه.

شایان سلیم زاده replyپاسخ

سلام خسته نباشید
واقعا عالی تدریس می کنید خسته نباشید.
یه سوالی هست این تعداد 12 تا استاندارد ستون هامون میشه padding هاشو که 15 پیکسله خودمون دستکاری کینم کمتر بشه؟ فکر کنم همه چی بهم بریزه درسته؟
اما خب یه کم زیاده فاصله 30 پیکسل بین box هایی که میخوایم بدیم مثلا 3 تا باکس کنار هم 90 پیکسل رو هم فاصله!!!

لقمان آوند

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

وحید replyپاسخ

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

وحید صالحی

سلام باید ارتفاع ثابت براشون برابر با ارتفاع بزرگ ترین عنصرتون (div) در نظر بگیرید

وحید

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

وحید صالحی

اگر ارتفاع ثابت باشه نباید تغییری درش ایجاد بشه

ارسال نظرات

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