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

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

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

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

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

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

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

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

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

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

  • کلیه سطرها (Rows ) باید در کلاسی به نام  container. برای داشتن ترازی مناسب قرار گیرند.
  • از سطرها (Rows ) برای ایجاد ستون های (columns ) افقی استفاده می کنیم.
  • محتوا باید در داخل ستون ها (columns) قرار گیرد
  • کلاس های Grid  از پیش تعریف شده ای مانند  row. و col-xs-4. برای ایجاد سریع لایه ها وجود دارد.
  • ستون های Grid به وسیله ۱۲ ستون موجود باید مشخص شوند  به عنوان مثال ۳ ستون مساوی در صفحه از این کلاس استفاده می کنند: 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">....

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

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

<div class="container">
   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6"  style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
         </p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. 
         </p>
      </div>

      <div class="col-md-6" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem. 
         </p>
   </div>
</div>

bootstrap_grid_systemجزئیات :

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

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

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

<div class="col-md-6">....</div>
<div class="col-md-6">....</div>

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

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-4">....</div>

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

 

<div class="container">
   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6 col-lg-4"  style="background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
         </p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. 
         </p>
      </div>

      <div class="col-md-6 col-lg-8"" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem. 
         </p>
   </div>
</div>

bootstrap-grid-medium-larg

 

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

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

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

در این مثال ۳ لایه مختلف برای ستون ها در نظر گرفته شده است. بر روی موبایل %۲۵ در چپ و ۷۵ % در راست در نظر گرفته شده است. برروی تبلت ۵۰% به ۵۰% و برروی مانیتور ها ۳۳% به ۶۶%.

 

<div class="container">
   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-sm-3 col-md-6 col-lg-8"  
         style="background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
         </p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. 
         </p>
      </div>

      <div class="col-sm-9 col-md-6 col-lg-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem. 
         </p>
   </div>
</div>

Boostrap-grid-moble-table-pc

 

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

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

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

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>Second Column- Split into 4 boxes</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
 </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

bootstrap-grid-neted

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

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

درباره‌ی asadi

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

آموزش ux/ui

۱۰ نکته ی مهم که در طراحی UX/UI باید بدانید

طراحی UX/UI یکی از بهترین فرصت های شغلی می باشد که هر روز به اهمیت …

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

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