Bootstrap یک فریم ورک front-end بسیار پرطرفدار برای طراحی قالب وب سایت ها است . این فریم ورک توسط توییتر ایجاد شده است . در نسخه اخر این فریم ورک به نام bootstrap3  بهبودهای زیادی برای طراحی Responsive  معرفی شده است . می توانید از این لینک نسخه اخر این فریمورک را مشاهده کنید.

در این نسخه اولویت بر روی دستگاههای قابل حمل است بدین معنی که طراحی سایت باید به گونه ای باشد که  برروی دستگاههای قابل حمل به درستی نمایش پیدا کند . علت این کار نیز رشد روزافزون استفاده از دستگاههای قابل حمل مثل موبایل و تبلت ها  و استفاده از انها برای وب گردی است و به همین دلیل نیز این فریمورک اولویت طراحی را برای این دستگاهها قرار داده است . این چارچوب با تمامی مرورگرهای استاندارد همخوانی دارد  و  حتی در نسخه های قدیمی مانند اکسپلورر8 نیز به درستی نمایش داده می شود و ظاهر خود را حفظ می کند .

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

اشنایی با نحوه گرید بندی در بوت استرپ 3

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

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

1.xs برای گرید بندی در صفحه نمایش های بسیار کوچک است به طوریکه عرض صفحه نمایش انها از 678 پیکسل کمتر باشد .

2.sm برای گریدبندی در صفحه نمایش های کوچک در نظر گرفته شده است . طوریکه عرض انها از 678 بزرگتر باشد .

3.md برای صفحه نمایش های متوسط در نظر گرفته شده است بطوریکه عرض انها از 992 پیکسل بزرگتر باشد .

4. lg برای صفحه نمایش های بزرگ در نظر گرفته شده است به طوریکه عرض نمایشگر از 1200 باشد.

به عنوان مثال فرض کنید می خواهید صفحه شما در صفحه نمایش هایی با عرض متوسط (md)  دارای چهار ستون باشد. پس div های خود را با استفاده از کلاس های md مقدار دهی می کنید. بدین شکل :

<div class="container">

    <div class="row">

        <div class="col-md-3">..</div>

        <div class="col-md-3">..</div>

        <div class="col-md-3">..</div>

        <div class="col-md-3">..</div>

    </div><!-- end of row -->

</div><!-- end of container -->

با استفاده از col-md-3 هم مشخص می کنید که هر ستون در صفحه شما باید  سه ستون از 12 ستون موجود در گرید را اشغال کند بنابراین مجموعا 12 ستون را اشغال می کنند (3*4=12) . به همین ترتیب می توانید برای دستگاههای مختلف از کلاس های موجود در سیستم گریدینگ بوت استرپ استفاده کنید و به راحتی صفحه وب رسپانسیوی را طراحی کنید . در این صورت باید کلاس های بیشتری را به تگ های Html خود اضافه کنید .

ایجاد فاصله بین ستون ها :

برای اینکه بخواهید بین ستون های گرید فاصله یجاد کنید باید از offset استفاده کرد برای روشن شدن موضوع به مثال زیر توجه کنید :

  <div class="container">

<h4 class="alert alert-info">ایجاد فاصله بین ستون‌ها</h4> 

<div class="row">

<div class="col-lg-3 col-sm-4">

col-lg-3 col-sm-4

</div>

<div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">

col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1

</div>

</div>   <!-- end row -->     

  </div> <!-- /container -->

با استفاده از کلاس col-lg-offset-1  فاصله مورد نظر را در می توانیم ایجاد کنیم . در صورتی که از نسخه rtl  استفاده کنید این فاصله  از سمت راست اضافه خواهد شد .

تعیین ترتیب ستون ها با استفاده از کلاس های pull  و push :

یکی دیگر از قابلیت های بوت استرپ 3 تعیین ترتیب ستون ها است . به عنوان مثال فرض کنید صفحه ای دارید که در سمت راست منو و در سمت چپ نیز محتوای صفحه قرار داشته باشد. اگر خواهیم که با کوچک کردن صفحه ابتدا محتوا نمایش داده شود و سپس منو ها در پایین ان نمایش داده شود باید از کلاس های push و pull استفاده کنیم تا بتوانیم کار مورد نظر را انجام دهیم . به مثال زیر توجه کنید :

  <div class="container">

<h4 class="alert alert-info">تغییر ترتیب ستون‌ها در اندازه‌های مختلف صفحه</h4> 

<div class="row">

<div class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">

col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4

</div>

<div class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">

col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8

</div>

</div>   <!-- end row -->     

  </div> <!-- /container -->