آموزش گرید بندی در بوت استرپ 4
آموزش گرید بندی در بوت استرپ 4 شامل بررسی سیستم گریدبندی col و col-sm و col-md و col-lg و col-xl همراه با مثال و توضیح کامل.
گرید بندی در بوت استرپ
در این بخش از آموزش بوت استرپ از تاپ سایت 98 به سراغ سیستم گریدبندی می رویم.
گرید بندی در بوت استرپ شامل 12 ستون می باشد.
شما می توانید در یک صفحه به شکل های مختلف از ستون ها استفاده کنید که کامل توضیح خواهیم داد.
سیستم شبکه بوت استرپ (Bootstrap's grid system) به ما کمک می کند که بتوانیم قالب های زیبا و ریسپانسیو را ایجاد کنیم.
همان طور که می دانید امروزه با دستگاه های مختلف وارد سایت ها می شوند.
بوت استرپ به شما کمک می کند تا بتوانید سایت ها را ریسپانسیو یا واکنشگرا کنید تا افراد راحت بتوانند از سایت شما راحت استفاده کنند.
ما می توانیم با استفاده از گرید سیستم (grid system) یک قالب سایت را برای لپ تاپ ، تبلت ، موبایل طراحی کنیم.
از ویژگی های ریسپانسیو بود این است که کاربر که از موبایل استفاده می کند نخواهد اسکرول چپ و راست کند و فقط با بالا و پایین بردن صفحه اطلاعات را ببینید مانند تاپ سایت 98 که واکنشگرا است.
سیستم گریدبندی بوت استرپ 4
در بخش زیر با سیستم گریدبندی بوت استرپ 4 آشنا می شوید.
سیستم گریبندی در بوت استرپ 4 دارای 5 کلاس است که در زیر توضیح می دهیم:
کلاس col برای دستگاه های کوچک که عرض صفحه نمایش آنها کمتر از 576 پیکسل
کلاس col-sm برای دستگاه های کوچک که عرض صفحه نمایش برابر یا بیشتر از 576 پیکسل
کلاس col-md برای دستگاه های متوسط که عرض صفحه نمایش آنها برابر یا بیشتر از 768 پیکسل باشد.
کلاس col-lg برای دستگاه های بزرگ که عرض صفحه نمایش آنها برابر یا بیشتر از 992 پیکسل باشد.
کلاس col-xl برای دستگاه های خیلی بزرگ یا xlarge که عرض صفحه نمایش آنها برابر یا بیشتر از 1200 پیکسل باشد.
با استفاده از کلاس های بالا می توانید برای هر دستگاه یک قالب مشخص بسازید.
قبلا گفتیم یک صفحه به 12 ستون تقسیم می شود.
مثلا ما می خواهیم 3 باکس را در کنار هم در دستگاه های متوسط و بزرگتر قرار دهیم. برای این کار کد زیر را می نویسیم.
در این صورت اگر صفحه کوچکتر از 768 پیکسل شود عناصر زیر هم قرار می گیرند یعنی در موبایل div ها زیر هم قرار می گیرند.
<div class="col-md-4" style="background-color:orange;">33%</div>
<div class="col-md-4" style="background-color:red;">33%</div>
مثال سیستم گرید بندی
بیاییم به مثال سیستم گرید بندی دیگری بپردازیم.
در مثال زیر ما دو حالت را در کنار هم قرار دادیم یعنی کلاس col-sm-6 و col-md-4 در این صورت اگر سایز صفحه بزرگتر یا مساوی 768 پیکسل باشد 3 عنصر در کنار هم قرار می گیرند.
اگر صفحه کوچکتر از 768 باشد و بزرگ تر از 576 باشد دو عنصر در کنار هم قرار می گرند و عنصر سوم زیر آنها قرار می گیرد.
در صورتی که کمتر از 576 باشد هر 3 عنصر در زیر هم قرار می گیرند.
<div class="col-sm-6 col-md-4" style="background-color:orange;">TopSite98</div>
<div class="col-sm-6 col-md-4" style="background-color:red;">TopSite98</div>
استفاده از کلاس های container و row
پیشنهاد می شود در سیستم گریدبندی از کلاس های container-fluid و container استفاده کنید.
کلاس container از دو طرف راست و چپ یک فاصله خالی ایجاد می کند.
کلاس container-fluid از چپ و راست هیچ فاصله خالی ندارد.
از کلاس row برای ایجاد گروه افقی ستون ها استفاده کنید.
در مثال زیر هیچ فاصله خالی از دو طرف نمی بینید و باکس ها مرتب در کنار هم قرار گرفته اند.
محتوا در درون هر ستون یا col قرار می گیرد.
<div class="row">
<div class="col-sm-6 col-md-4" style="background-color:yellow;">TopSite98</div>
<div class="col-sm-6 col-md-4" style="background-color:orange;">TopSite98</div>
<div class="col-sm-6 col-md-4" style="background-color:red;">TopSite98</div>
</div>
</div>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید