خانه / وب / آموزش Bootstrap – ساختار Grid

آموزش Bootstrap – ساختار Grid

Grid (شبکه) چیست ؟

در طراحی گرافیکی یک شبکه ساختاری است ( معموملا دو بعدی) که به وسیله خطوط متقاطع (عمودی ،افقی)  ایجاد می شود. این روش به صورت گسترده ای در محتواهایی که برای چاپ استفاده می شوند کاربرد دارد. در طراحی وب این روش ماثری برای ایجاد سریع لایه های قالب و استفاده از HTML  و CSS است.

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

ساختار Grid  در Bootstrap  چگونه است؟

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

در Bootstrap 3 طراحی ابتدا برای صفحات نمایش کوچک مثل موبایل وتبلت در نظر گرفته شده است و سپس کامپوننت ها و Grid برای صفحات نمایش بزرگ گسترش داده می شود.

استفاده از سیستم Grid در Bootstrap  

سیستم Grid برای ایجاد لایه هایی در صفحه که از سطر ها و ستون ها تشکل شده است و محلی برای محتوای شما می باشد تشکیل شده است .

نحوه کار سیستم Grid  به شرح زیر است :

  • کلیه سطرها (Rows ) باید در کلاسی به نام  container. برای داشتن ترازی مناسب قرار گیرند.
  • از سطرها (Rows ) برای ایجاد ستون های (columns ) افقی استفاده می کنیم.
  • محتوا باید در داخل ستون ها (columns) قرار گیرد
  • کلاس های Grid  از پیش تعریف شده ای مانند  row. و col-xs-4. برای ایجاد سریع لایه ها وجود دارد.
  • ستون های Grid به وسیله 12 ستون موجود باید مشخص شوند  به عنوان مثال 3 ستون مساوی در صفحه از این کلاس استفاده می کنند: col-xs-4.

 ساختار پایه Grid

 

ساختار پایه سیستم Grid :

<div class=”container”>

<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>…</div>
</div>
<div class=”container”>

 

 

پاپ کده

درباره‌ی majidkingkm

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *