برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

آموزش گرید بندی در بوت استرپ ۴ + ویدئو

سلام دوستان عزیز و همراهان همیشگی سبزلرن، مستقیم میرم سر اصل مطلب، همونطور که میدونین بوت استرپ یک فریمورک برای ریسپانسیو کردن صفحات وب هست، تو این مقاله میخوایم در مورد گرید بندی در بوت استرپ ۴ یا Bootstrap صحبت کنیم؛

 

سیستم گرید بندی در بوت استرپ ۴ (bootstrap)

بوت استرپ برای سهولت در امر ریسپانسیوسازی، هر صفحه را به ۱۲ ستون مساوی تقسیم میکند
نکته: برای درک بیشتر این موضوع پیشنهاد میکنم اکستنشن Design Grid Overlay را روی مرورگر کروم خودتون نصب کنین،
با نصب این اکستنشن اگر وارد سایت بشین و روی اسن اکستنشن کلیک کنین، سایت رو به ۱۲ ستون هم اندازه(دقیقا سیستم گرید بندی بوت استرپ) تقسیم میکند
همون طور که در شکل میبینین سایت رو به ۱۲ ستون تقسیم کرده،

این اکستنشن یادگیری گریدبندی بوت استرپ رو برای شما آسان تر میکند:

سیستم گرید بندی در بوت استرپ 4 (bootstrap)

 

مقدمات گریدبندی در بوت استرپ ۴

شما در بوت استرپ میتونین تعیین کنین که یک المنت در دیوایس های اندازه لپتاپ ۴ ستون از این ۱۲ تا ستون رو دربر بگیره؛ میتونین تعیین کنین المنتی در دیوایس های با اندازه تبلت ۶ ستون رو در بر بگیره و …

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

گرید بندی در بوت استرپ 4

همون طور که میبینین در سطر اول هر باکس فقط به اندازه ۱ ستون اندازه گرفته(در هر سطر ۱۲ باکس)
در سطر دوم هر باکس به اندازه ۲ ستون اندازه گرفته(هر سطر میشه ۶ باکس)
در سطر سوم هر باکس ۳ به اندازه ۳ ستون اندازه گرفته(هر سطر میشه ۴ باکس)
در سطر چهارم هر باکس به اندازه ۴ ستون اندازه گرفته(هر سطر میشه ۳ باکس)
و به همین ترتیب سطرهای بعدی …

مقاله اموزش نصب بوت استرپ ۴

کلاس های سیستم گریدبندی در بوت استرپ ۴

بوت استرپ کلاس هایی رو برای گرید بندیش تعیین کرده که در ادامه به آن ها میپردازیم:
کلاس -col. برای دیوایس های خیلی کوچک / عرض نمایشگر دیوایس کمتر از ۵۷۶ پیکسل
کلاس -col-sm. مخفف small برای دیوایس های کوچک / عرض نمایشگر برابر با ۵۷۶ پیکسل یا بیشتر از آن
کلاس -col-md. مخفف medium برای دیوایس های متوسط / عرض نمایشگر برابر با ۷۶۸ پیکسل یا بیشتر از آن
کلاس -col-lg. مخفف large برای دیوایس های بزرگ / عرض نمایشگر برابر با ۹۹۲ پیکسل یا بیشتر از آن
کلاس -col-xl. مخفف x large برای دیوایس های خیلی بزرگ / عرض نمایشگر برابر با ۱۲۰۰ پیکسل یا بیشتر از آن

بعنوان مثال اگر اندازه نمایشگر یک دیوایسی بین ۷۶۸ و ۹۹۲ باشد و بخوایم به اندازه ۶ ستون عرض بگیرد از کلاس col-md-6 استفاده میکنیم
در اینجا col کلمه مشترک تمامی کلاس ها بوده و مخفف column می باشد؛

کلمه دوم که md هست بخاطر اندازه دیوایس می باشد و عدد ۶ موجود در کلاس به این معنی هست که المنت مدنظر ما به اندازه ۶ ستون اندازه بگیرد.

 

قوانین و نکات مربوط به گرید بندی بوت استرپ ۴

اگه بخواین به دیوایس هایی با اندازه md و sm به یک شکل از گریدبندی استفاده کنین،

کافیه به المنت مدنظرتون فقط اندازه sm رو مشخص کنین و نیازی به تعیین md نیست(اگه تعیین کنین مشکلی پیش نمیاد ولی اضافه کاری محسوب میشه)
هر ردیف از وب سایت در سیستم گرید بندی بوت استرپ ۴ باید عرض مشخصی داشته باشد،

به این منظور باید آنها را داخل div هایی با کلاس container(عرض ثابت ۱۹۷۰ پیکسل) و کلاس container-fluid(عرض المنت به اندازه کل دیوایس) قرار بدین
المنت ها با کلاس های مربوط به col باید داخل یک خط قرار بگیرند

و برای ایجاد یه خط از کلاس آماده row در گرید بندی بوت استرپ ۴ استفاده میکنین
این موضوع رو هم در نظر داشته باشین که در تمامی دیوایس ها با هر اندازه ای ۱۲ ستون در اختیار داریم

و تعداد ستون های گرید بندی بوت استرپ به عرض دیوایس ارتباطی ندارد(با واحد درصد محاسبه میشوند)

 

یک مثال برای گرید بندی 

به کد زیر توجه کنین:

با توجه به اطلاعاتی که تا اینجا بهتون دادم، هر عکس، متن، ویدیو و هر محتوایی که داخل هر کدوم از div های با کلاس col-sm-4 قرار بگیرد،

در دیوایس های با اندازه sm و md اندازه ای برابر با عرض ۴ ستون رو در بر میگیرند؛

همچنین محتوای داخل این تگ های div بخاطر کلاس col-12 در اندازه های خیلی کوچک (عرض نمایشگر کمتر از ۵۷۶ پیکسل) کس ۱۲ ستون رو در بر میگیرند

و المنت بعدی باید از خط بعدی شروع شود.

 

سفارشی سازی بوت استرپ ۴

شما مجبور نیستین حتما خودتونو طبق میل بوت استرپ تغییر بدین و هیچ لزومی نیست که سایتتون رو طبق خصوصیات کلاس های بوت استرپ طراحی کنین
شما میتونین یک فایل css با اسم style.css ایجاد کرده و به داکیومنت خودتون لینک بکنین

و هر کلاسی از بوت استرپ رو که از استایل هاش خوشتون نمیاد، در فایل style.css تغییرات لازم رو اعمال کنین
نکته: فقط این نکته یادتون نره که فایل style.css خودتون رو بعد از فایل bootstrap.css لینک بکنین،

چون به دلیل اجرای خط به خط کدها اگر غیر از این باشه

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

 

نتیجه گیری

از طرفی با ظهور دیوایس های مختلف با اندازه های متفاوت،

یادگیری عمل ریسپانسیوسازی برای طراحان وب امری واجب و ضروری به حساب میاد؛

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

 

سخن پایانی

تو این مقاله سعی کردم سیستم گرید بندی بوت استرپ ۴ رو در حد درک مقدماتی بهتون توضیح بدم
اگه سوال، انتقاد یا پیشنهادی در مورد این مقاله داشتین حتما تو کامنت های همین مقاله بنویسین

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

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *