آزمایشی
آموزش

آموزش بوت استرپ 4 (قسمت دوم)

آموزش بوت استرپ 4 (قسمت دوم)

فصل 2

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

 

سیستم گرید یا شبکه بوت استرپ به وسیله Flexbox ساخته شده و می تواند هر فضایی را به 12 ستون مساوی تقسیم کند. به این معنی که پهنای کل صفحه والد خود را به 12 قسمت مساوی تقسیم بندی می کند و شما می گویید برای هر شی چند قسمت از این دوازده قسمت را نیاز دارید مثلا برای ساخت یک باکس متنی و یک دکمه ارسال نیاز دارید که پنج قسمت به باکس متنی بدهید و یک قسمت به دکمه و این دو در کنار هم باشند و نصف صفحه را اشغال می کنند.

و یا شاید بخواهید صفحه را به سه قسمت مساوی تقسیم کرده و هر کدام را به یک شی یا سه شی کنار هم اختصاص دهید.

نکته: اگر بخش بندی های کنار هم بیش از عدد 12 شود مثلا یک بخش 4 و یک بخش 9 تایی باشد بخش دوم را به خط بعدی انتقال می دهد و جلوی خط اول فضای خالی می ماند.

 

کلاس های گرید

·      کلاس.col- یا خیلی کوچک برای صفحه های نمایش با پهنای کمتر از 576 پیکسل.

·      کلاس .col-sm- یا کوچک برای صفحه های با پهنای مساوی و یا بزرگتر از 576 پیکسل.

·      کلاس .col-md- یا متوسط برای صفحه های با پهنای برابر 768 پیکسل و یا بزرگتر که یکی از پرکاربرد ترین کلاس ها می باشد.

·      کلاس .col-lg- یا بزرگ برای صفحه های با پهنای 992 پیکسل یا بالاتر که شامل تبلت ها و یا لپ تاپ های چند سال قبل می شود.

·      کلاس .col-xl- یا خیلی بزرگ برای صفحه های با پهنای 1200 پیکسل یا بالاتر که شامل تلویزیون ها و مانیتور های عریض می شود.

 

برای استفاده از این کلاس ها باید درون یک Div با کلاس row که خود فرزند یک Div با کلاس container یا container-fluid  می باشد استفاده شود.

 

تلفظ درست تگ Div چیست ؟

دیو یا دایو ؟

تگ div مخففی از کلمه division می باشد به معنی تقسیم شدن و بخش شدن پس دیو درست می باشد اگر می خواست dive (به معنی شیرجه زدن) باشد باید در آخر آن حرف e قرار می گرفت تا دایو تلفظ شود.

البته در این بحث هنوز بین علما و فضلا اختلاف وجود دارد.

 

استفاده از کلاس های گرید

برای استفاده از این کلاس ها باید اول یک تگ div با کلاس row استفاده شود و در داخل آن در تگ های داخلی div از این کلاس ها استفاده کنید.

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

 

نکته 2: این حساس بودن حروف کوچک و بزرگ نام کلاس ها به قوانین CSS  برمی گردد چون در زمان خلق CSS زبان های مورد استفاده از ساختار C و C++ استفاده می شد و در این سینتکس حروف بزرگ و کوچک با هم تفاوت دارند. ولی در نوشتن تگ های HTML فرقی بین حروف کوچک و بزرگ وجود نداردو DIV یا div یا DiV و... همه درست شناسایی می شوند.

 

در بوت استرپ 4 به صورت دو مدل می شود از کلاس های گرید استفاده کرد.

1.     به صورت تعریف شده که برای کدام دستگاه است و چه پهنایی دارد

 <div class="col-md-4"></div>


 که برای سایز متوسط و پهنا 4 قسمت می باشد.

 

2.    به صورت اتوماتیک خود بوت استرپ تصمیم بگیرد که چه پهنایی و برای چه نمایشگری در نظر بگیرد

 <div class="col"></div>


نکته: می توان همزمان برای دستگاه های مختلف سایز های مختلف در نظر گرفت مثلا با کلاس

 

<div class="col-md-4 col-sm-12"></div> 


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