سیستم Grid در Bootstrap 4

با فرازنتورک همراه باشید ما در این بخش در مورد سیستم Grid در Bootstrap بحث خواهیم نمود.

ساختار Grid چیست؟

در طراحی گرافیکی ، Grid ساختاری (معمولا دو بعدی) است که از یک سری خطوط مستقیم (عمودی ، افقی) متقاطع ساخته شده است.

که برای ساختاربندی محتوا استفاده می شود.

این ساختار ، به طور گسترده ای برای طراحی چیدمان و ساختار محتوا در طراحی چاپ استفاده می شود.

در طراحی وب ، این ساختار ، متد بسیار کارآمدی برای ایجاد یک چیدمان سازگار سریع و مؤثر با استفاده از HTML و CSS است.

به بیان دیگر با واژه های سادتر ساختار Grid در طراحی وب ، محتوا را سازماندهی و ساختاربندی می کند .

و باعث می شود وب سایت ها به راحتی مرور شده و باعث درک و شناخت بهتر آن می شود.

سیستم Grid در Bootstrap

سیستم grid در بوت استرپ4  بر اساس flexbox ساخته شده است و به شما اجازه می دهد تا 12 ستون هم در یک صفحه ایجاد کنید.

البته اگر نمی خواهید از 12 ستون استفاده کنید می توانید از تعداد کمتری بهره ببرید.

ساختار سیستم Grid در Bootstrapبه شکل زیر است

نکاتی درباره سیستم Gride

اگر ازسیستم Grid در بوت استرپ استفاده می کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت.

در واقع زمانی که برای صفحه ی خود grid طراحی کنید نیازی نیست نگران جای عناصر باشید

چرا که عناصر نمی توانند از grid خود (خانه ی مشبکی مربوطه) خارج شوند.

نکته مهم در خصوصیت Grid که به صورت پیش فرض در CSS وجود دارد در مرورگر Internet Explorer 15 و قبل تر کار نمی کند اما Grid هایی وجود دارند .

که توسط توسعه دهندگان به عنوان کدهای جداگانه ساخته شده اند.

شما می توانید با دانلود کردن این نوع Grid ها از آن ها در هر مرورگری استفاده کنید.

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

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

کلاس col. : مخصوص دستگاه بسیار کوچک (extra Small devices)

که عرض صفحه نمایش آن ها معادل 575 پیکسل یا کمتر است.
کلاس .col-sm-: مخصوص دستگاه هایی با صفحه نمایش کوچک (small devices)

که عرض صفحه نمایش آن ها 576 پیکسل یا بیشتر است.
کلاس .col-md-: مخصوص دستگاه هایی با صفحه نمایش متوسط (medium devices)

که عرض صفحه نمایش آن ها 768 پیکسل یا بیشتر باشد.
کلاس .col-lg-: مخصوص دستگاه هایی با صفحه نمایش بزرگ (large devices)

که عرض صفحه نمایش آن ها 992 پیکسل یا بیشتر باشد.
کلاس .col-xl: مخصوص دستگاه هایی با صفحه نمایش بسیار بزرگ (xlarge devices)

که عرض صفحه نمایش آن ها از 1200 پیکسل بیشتر است.

کلاس های بالا را می توان جهت پویا تر کردن طرح خود در هم ادغام کنیم.

نکته: هر کلاس مقیاس پذیر است (بزرگ و کوچک می شود) بنابراین اگر می خواهید

از اندازه های یکسانی برای sm و md استفاده کنید می توانید تنها sm را قرار دهید.

ساختار اصلی شبکه بندی در bootstrap

در زیر ساختار اصلی شبکه Bootstrap 4 ارائه شده است:

<span class="token comment"><!-- Control the column width, and how they should appear on different devices --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-*-*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-*-*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-*-*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-*-*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-*-*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

<span class="token comment"><!-- Or let Bootstrap automatically handle the layout --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

به طور مثال یک ردیف می سازیم (<"div class="row>) و سپس تعداد ستون های دلخواه را اضافه می کنیم.

(تگ هایی که از ساختار *-*-col. تبعیت می کنند) در این ساختار ستاره ی اول (*) نشان دهنده ی واکنش گرا بودن

(sm, md, lg یا xl) و ستاره ی دوم عددی است که جمع آن برای هر ردیف برابر باید 12 باشد.

همچنین می توان به جای اضافه کردن عدد به col، اجازه بدهیم که خود بوت استرپ طرح را مدیریت کند.

(دو ستون “col” با عرض 50 درصد، یا سه ستون با عرض 33.33 درصد یا چهار ستون با عرض 25 درصد و غیره می سازد).

همچنین می توان از ساختار col-sm|md|lg|xl. استفاده کرد تا ستون ها واکنش گرا شوند.

در این قسمت با مبحث پایه ی سیستم grid در bootstrap آشنا شدیم و در قسمت های آینده بیشتر در مورد آن صحبت خواهیم کرد.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده : زهرارضوانی