نحوه تاثیر گزاری کلاس ها در بوت استرپ

نحوه اثرگذاری کلاس پایین دست روی کلاس های بالادست در بوت استرپ :
اگر در بوت استرپ از کلاسی استفاده کنیم و کلاس بالادست را برای تگ مورد نظر تعریف نکنیم، کلاس پایینی، بر مدیاهای بالاتر هم اعمال میشود.
نکته : دقت کنید که فقط تعداد ستون های کلاس پایینی به کلاس بالادست منتقل میشود ولی عرض ستون ها در مدیای بالادست همان مقدار پیش فرض است.
به عنوان نمونه برای عنصری کلاس col-sm تعریف میکنیم ولی کلاس های lg-md را مشخص نمی کنیم، فریم ورک بوت استرپ به اندازه تعداد ستون کلاس sm برای سایزهای lg و md هم در نظر میگیرد. فقط عرض ستون را مطابق کلاسهای lg-md میگیرد نه تعداد ستون را، تعداد ستون براساس کلاس col-sm میباشد یعنی sm جایگزین lg وmd میشود.
نکته: کلاس های بالادست روی کلاس های پایین دست اثر ندارند.
معرفی ستونهای برابر و نابرابر در بوت استرپ  equal columns-  unequal columns
در حالت ستون های برابر (equal) تعداد ستونها در هر کلاس به یک اندازه می باشد، مثلا ۱۲ تا بلاک (ستون) با واحد یک داریم یا ۳ تا ستون با واحد ۴
در حال Unequal  تعداد ستون هر کلاس یکسان نیست.
در مثال زیر در حالت xs تعداد ستونها برابر است.

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

columns wrapping
با یک مثال مبحث columns wrapping را شرح میدهیم :

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>

<div class="col-xs-12 col-md-6"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

با اجرای کد بالا، مشاهده میکنید که مشکل در نمایش المان ها ایجاد میشود چون ارتفاع بلاک زیاد شده است، ارتفاع ردیف هم زیاد میشود و عنصری که درون آن ردیف هست push داده میشود، در نتیجه ما از حالت wrapping استفاده میکنیم و کلاس clearfix را بکار میبریم. این کلاس خاصیت clear:boath را به عنصر میدهد.

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
<div class="clearfix"></div>
<div class="col-xs-12 col-md-6"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

معرفی کلاس های offsetting
column offsetting

مبحث آفست در طراحی هایی که عرض وب سایت، تمام صفحه می باشد، کاربرد بیشتری دارد.
با کلاس offset بین بلاک ها از سمت چپ، گپ یا فاصله ایجاد میشود.

<div class="container">
<div class="row">
<div class="col-md-6"><div class="well"><p class="title-red"بوت استرپ</p></div></div>
<div class="col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>

</div>

در مثال بالا دو تا ستون اضافه داریم که بدون استفاده از آفست، این ستون های اضافی به انتهای row اضافه میشود.
پس برای ایجاد فاصله از کلاس های offset بین بلاک ها استفاده میکنیم :
•    col-lg-offset
•    col-md-offset
•    col-sm-offset
•    col-xs-offset
دقت کنید که باید تعیین کنیم که آفست روی چه مدیا کوئری باید اعمال شود :

col-md-offset-1

به اندازه یک ستون با gutterها به انتهای بلاک مورد نظر در مدیا md اضافه میکند.
در مثال زیر آفست برای کلاسهای lg هم در نظر گرفته میشود، در واقع آفست ها در مورد کلاسهای پایین دست و بالادست مثل کلاسهای col عمل میکنند.

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>

</div>

پس اگر برای کلاس های بالایی آفست در نظر نگیریم، آفست کلاسهای پایینی را به آنها اختصاص میدهد :

<div class="row">
<div class="col-sm-5 col-sm-offset-2 col-md-6">
<div class="well"><p class="title-red">بوت استرپ</p></div>
</div>
<div class="col-sm-5 col-md-6">
<div class="well"><p class="title-blue">بوت استرپ</p></div>
</div>


</div>
</div>

در مثلا بالا آفست sm را به md اختصاص میدهد و چون کلاسهای md کل ۱۲ ستون را دربرگرفته اند و آفست دو است، درنتیجه بهم میریزد، پس در نتیجه در مثال بالا باید به md هم offset بدهیم :

<div class="row">
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
<div class="well"><p class="title-red">بوت استرپ</p></div>
</div>
<div class="col-sm-5 col-md-6">
<div class="well"><p class="title-blue"بوت استرپ</p></div>
</div>


</div>
</div>

نکته : اگر برای کلاس پایین دست offset گذاشتیم، باید به تعداد ستونهای کلاس بالایی توجه کنیم اگر نیاز داشت که برای کلاس بالادست هم آفست تعیین میکنیم.
همانند کلاسهای col میتوانید بصورت ترکیبی از آفست ها استفاده کنید :

<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 col-md-6 col-md-offset-2"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-xs-5 col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>