سیستم Grid در بوت استرپ به شما اجازه میدهد که بر مبنای 12 ستون صفحه ی خود را ایجاد کنید. در این فصل با ستون بندی صفحه وب با استفاده از سیستم Grid در بوت استرپ آشنا خواهیم شد.
سیستم Grid در بوت استرپ
سیستم Grid در بوت استرپ (Bootstrap) به شما اجازه میدهد که بر مبنای 12 ستون صفحه ی خود را ایجاد کنید. اگر شما نمیخواهید از 12 ستون به طور مشخص استفاده کنید. میتوانید ستون ها را با هم ترکیب کرده و ستون های عریض تری ایجاد کنید :
سیستم Grid در بوت استرپ واکنش گرا است، و اندازه ستون ها بسته به اندازه ی صفحه نمایش به طور خودکار تغییر میکند.
کلاس های Grid
سیستم Grid در بوت استرپ 4 نوع کلاس دارد :
- xs (برای تلفن ها - صفحه نمایش هایی با عرضی کمتر از 768 پیکسل)
- sm (برای تبلت ها - صفحه نمایش هایی با عرضی برابر یا بزرگتر از 768 پیکسل)
- md (برای لپتاب های کوچک - صفحه نمایش هایی با عرضی برابر یا بزرگتر از 992 پیکسل)
- lg (برای لپتاب ها و دسکتاپ ها - صفحه نمایش هایی با عرضی برابر یا بزرگتر از 1200 پیکسل )
کلاس های بالا میتوانند با هم ترکیب شده و صفحاتی پویا تر و قابل انعطاف تر را ایجاد کنند.
ساختار پایه ی یک Grid در بوت استرپ
در نمونه مثال زیر میتوانید یک ساختار Grid در بوت استرپ را مشاهده کنید :
<div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div>
در نمونه مثال بالا ابتدا یک row ایجاد میکنیم، سپس تعدادی ستون را اضافه میکنیم (ستون هایی که با کلاس *-*-col. مشخص شده اند). دقت داشته باشید که مجموع اعداد در ستون هایی که با *-*-col. برای هر row مشخص میشوند باید برابر با عدد 12 باشد.
در زیر نمونه مثال هایی آورده شده است که میتوانید با استفاده از آنها سیستم گرید در بوت استرپ را به سادگی فرا بگیرید.
سه ستون با پهنایی برابر
در نمونه مثال زیر میتوان مشاهده نمود که چطور میتوان به ساختاری سه ستونی با پهنایی برابر رسید که از تبلت ها تا دسکتاپ های بزرگ مقیاس پذیر است و در تلفن های همراه یا صفحه نمایش هایی که پهنای آنها از 768 پیکسل کمتر باشد ستون ها به صورت خودکار در زیر هم قرار میگیرند :
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div>
دو ستون با پهنای متفاوت
در نمونه مثال زیر میتوان مشاهد کرد که چطور میشود به ساختاری دو ستونی با پهنایی نابرابر رسید که از تبلت ها تا دسکتاپ های بزرگ مقیاس پذیر است :
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>