دوره های آموزشی
خانه / طراحی وب / آموزش 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 :

مثال سیستم Grid  در Bootstrap :

در این قسمت یک مثال ساده  Grid  به همراه یک لایه ایجاد می کنیم که شامل 2 ستون که هر ستون شامل 2 پارگراف می شود:

bootstrap_grid_systemجزئیات :

  • عنصر <div class=”container”>…</div> به این دلیل اضافه شده است که مطمئن شویم لایه ایجاد شده حداکثر عرض صفحه را داراست و در مرکز قرار دارد.
  • بعد از افزودن container نیاز به افزودن سطر با استفاده از  <div class=”row”>…</div> و همچنین ستون درون هر سطر با استفاده از <div class=”col-md-6″></div> می باشد.
  • هر سطر در grid به وسیله 12 واحد ایجاد شده است و شما می توانید اندازه ستون ها را با استفاده از این واحد ها مشخص کنید. در این مثال ما 2 ستون که هر کدام از 6 واحد تشکیل شده است و مجموع آنها 12 می شود استفاده کرده ایم.

مثال سیستم Grid  در Bootstrap : صفحه نمایش متوسط و بزرگ

در مثال قبل ما از 2 div استفاده کرده و عرض صفحه را به 2 قسمت مساوی 50%/50% تقسیم کردیم

اما در طراحی مانیتور های بزرگ می توان این درصد را به 33%/66%  تغییر داد.برای انجام این کار تغییرات زیر را اعمال می کنیم:

به Bootstrap گفته می شود  در مانیتور های متوسط به  کلاسی که مقدار md  دارند مراجعه کند و در مانیتور های بزرگ به کلاسی که مقدار   lg دارد. در این مورد دو div به صورت 50%/50% و سپس 33%/66% تقسیم می شوند:

 

bootstrap-grid-medium-larg

 

مثال سیستم Grid  در Bootstrap : موبایل ، تبلت ، مانیتور

در مثال قبل سایز های تبلت و مانیتور را در سیستم Grid  مشخص کردیم در این مثال می خواهیم برای موبایل نیز درصد 75%/25% را مشخص کنیم :

در این مثال 3 لایه مختلف برای ستون ها در نظر گرفته شده است. بر روی موبایل %25 در چپ و 75 % در راست در نظر گرفته شده است. برروی تبلت 50% به 50% و برروی مانیتور ها 33% به 66%.

 

Boostrap-grid-moble-table-pc

 

ستون های تو در تو

برای محتواهای تودرتو یک  row. جدید با ستون های *-col-md. آن درون یک ستون *-col-md. موجود اضافه کنید. سطر های تو در تو باید شامل مجموعه از سطرها به مقدار 12 باشد.

در مثال زیر صفحه شامل 2 ستون می شود که ستون دوم به چهار باکس در 2 سطر تقسیم شده است.

bootstrap-grid-neted

درباره ی asadi

همچنین ببینید

فیلم آموزش jQuery

فیلم آموزش jQuery قسمت 3

در قسمت سوم از سری فیلم آموزش jQuery به بررسی نحوه ساخت یک افکت انیمیشنی در ...

پاسخ دهید

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