آموزش
آموزش بوت استرپ 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>
می توان به مرورگر های مختلف گفت که اگر صفحه با موبایل باز شد این دیو کل پهنا را بگیرد و اگر با کامپیوتر باز شد فقط یک سوم پهنای صفحه را بگیرد.
