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

در مقاله قبلی نحوه ایجاد ساختار اولیه قالب رسپانسیو، توسط فریم ورک بوت استرپ را بیان کردیم. در این مقاله در مورد نحوه استفاده از کلاس های بوت استرپ برای ستون بندی صحبت خواهیم کرد.
کلاس های ترکیبی ستون بندی :
زمانی از حالت ترکیبی در ستون بندی صفحات وب استفاده میکنیم که میخواهیم در صفحه نمایش های مختلف، المان ها رفتار متفاوت داشته باشند.
بهترین حالت اصولی و استاندارد ترکیب کلاس ها، استفاده از کلاس md و xs برای نرمال سازی است.
مثال :
۱-کابر با هر وسیله ای که صفحه وب را باز میکند، دو تا بلاک ۶ ستونه را مشاهده کند :

<div class="row">
<div class="col-xs-6 col-md-6"><div class="well">lg</div></div>
<div class="col-xs-6 col-md-6"><div class="well">lg</div></div>
</div>

۲-وقتی رزولوشن کمتر از ۷۶۸ (XS) باشد، کل صفحه را پوشش میدهد :

<div class="row">
<div class="col-xs-12 col-md-6"><div class="well">tarkibi</div></div>
<div class="col-xs-12 col-md-6"><div class="well">tarkibi</div></div>
</div>

پس در ترکیب کلاس های ستون بندی بصورت زیر عمل کنید :
برای منو یا هر div ای که کل صفحه را می پوشاند یک کلاس col-md-12 تعریف کنید.
اگر هدر و سایدبار داشتید یا بطور کلی دو بخش مجزا داشتید که میخواستید در رزولوشن های مختلف واکنش های متفاوت داشته باشند، از ترکیب کلاس های xs وmd استفاده کنید.
معرفی کلاس clearfix و دلایل استفاده از آن :
اگر کدهای زیر را مشاهده کنید و در مرورگر اجرا کنید متوجه میشوید که بلاک ها به اصطلاح کیک میشوند، یعنی بلاک هایی که هم ارتفاع نیستند، بهم میریزند :

<div class="row">
<div class="col-xs-6 col-md-3"><div class="well">1بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ</div></div>
<div class="col-xs-6 col-md-3"><div class="well">2بوت استرپ</div></div>
<div class="col-xs-6 col-md-3"><div class="well">3بوت استرپ</div></div>
<div class="col-xs-6 col-md-3"><div class="well">3بوت استرپ</div></div>
</div>

در این مواقع از کلاس clearfix بوت استرپ استفاده میکنیم. این کلاس یک خط شکست ایجاد میکند و به کامپایلر دستور میدهد، که هرجا به div مورد نظر رسید، آن خط را ببندد و در خط بعدی المان ها را نمایش دهد. ( مثل کلید enter در ویرایشگرها )
نکته : این کلاس مانند دستور clear:both در css عمل میکند.
بررسی کلاس های مخفی سازی و نمایش المان ها :
شما میتوانید برای کنترل این دستور و دستورات دیگر در مدیا کوئری های مختلف از کلاس های زیر استفاده کنید. در واقع با این کلاس ها به کامپایلر دستور میدهیم که در چه مدیا کوئری هایی ( چه سایزی و چه ستون هایی ) کلاس مورد نظر hidden باشد یا نمایش داده شود.
مثلا کلاس hidden-xs در سایزهای extra small عنصر را مخفی میکند و در بقیه سایزها عنصر را نمایش میدهد.

<div class="clearfix hidden-md hidden-lg"></div>

در این مثال در مدیا کوئری های مربوط به lg,md این div مخفی میشود.