امتیاز دهید:
سیستم گریدبندی در بوت استرپ

 

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

در زیر شکل ستون های بوت استرپ را مشاهده میکنید:

 

همانطور که در بالا ملاحظه میکنید ، ردیف اول دارای 12 ستون کوچک، ردیف دوم دارای 3 ستون پهن تر است که هر کدام از این ستون ها خود دارای عرضی به اندازه 4 ستون هستند، ردیف سوم داری دو ستون 4 و 8 تایی، ردیف چهارم دو ستون هم اندازه 6 تایی و ردیف پنجم یک ستون پهن به عرض همه 12 ستون دارد.

برای درک عینی این مطلب به یک مثال از سایت واقعی توجه کنید:

همانطور که در سایت بالا ملاحظه میکنید، این سایت دارای سیستم گریدبندی دو ستونه ی 8 و 4 تایی هست.

سیستم بوت استرپ ریسپانسیو است و بسته به سایز صفحه نمایش میتواند تغییر کند ، برای مثال اگر در حالت صفحه نمایش مانیتور pc، دو ستونه است میتواند در حالت موبایل به شکل تک ستونه تعریف شود.

کلاس های گریدبندی در بوت استرپ:

سیستم گرید بوت استرپ دارای 4 کلاس می باشد:

  • کلاس xs : صفحات نمایش بسیار کوچک یا xs، مانند موبایل‌ها (کمتر از 768 پیکسل)
  • کلاس sm: صفحات نمایش کوچک یا sm مانند تبلت‌ها (بیشتر از 768 پیکسل و کمتر از 992 پیکسل)
  • کلاس md: صفحات نمایش با اندازه متوسط یاmd مانند سیستم‌های دسکتاپ (بیشتر از 992 پیکسل و کمتر از 1200 پیکسل)
  • کلاس lg: صفحات نمایش با اندازه بزرگ یاlg مانند سیستم‌های خاص دسکتاپ (بیشتر از 1200 پیکسل)

 

کلاس های بالا میتوانند برای ایجاد یک layout  قابل انعطاف تر و پویاتر با هم ترکیب شوند.

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

<div class="row">
  <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 باشد، که ستاره اول نوع دیوایس را (xs-sm-md-lg) مشخص میکند و ستاره دوم شماره ستون را مشخص میکند

نکته: مجموع ستون ها در هر ردیف باید 12 باشد.

مثال هایی از نحوه استفاده از این سیستم را در زیر مشاهده میکنید:

<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>

نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )