آموزش Grid یا جدول بندی در بوت استرپ

سیستم Grid

Bootstrap با CSS

در این فصل ما در مورد سیستم Grid در Bootstrap بحث خواهیم نمود.

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

برگرفته از ویکیپدیا :

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

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

سیستم Grid در Bootstrap چیست؟

همان طور که در مستندات رسمی Bootstrap برای سیستم Grid آورده شده است ، داریم :

Bootstrap شامل یک سیستم Grid واکنش گرا و سیال mobile first می باشد ، که به 12 ستون مقیاس بندی می شود ، که متناسب با اندازه دستگاه یا اندازه نمایشگر ، افزایش می یابد. این سیستم ، شامل کلاس های از پیش تعریف شده برای گزینه های چیدمان آسان (easy layout) ، و هم چنین ترکیب قدرتمند (powerful mixins) جهت تولید چیدمان های مفهومی تر است.

بیایید بیانیه فوق را برای درک بهتر ، کمی بشکافیم. بوت استرپ 3 دارای مفهوم mobile first می باشد ، به طوری که کدهای Bootstrap اکنون توسط صفحه نمایش های کوچک تر مانند دستگاه های تلفن همراه ، تبلت ها مورد استفاده قرار می گیرند و سپس به مؤلفه ها و ساختارهای grid برای صفحه نمایش های بزرگ تر مانند لپ تاپ ها ، دسکتاپ ها توسعه می یابند.

استراتژی Mobile First

• محتوا
  • مشخص می کنیم که چه چیزی مهم ترین محتوا می باشد.
• چیدمان
  • ابتدا طراحی برای عرض های کوچک تر را انجام می دهیم.
  • CSS پایه ای بر دستگاه تلفن همراه ؛ پرس و جوهای رسانه ای (media query) بر تبلت ها ، دسکتاپ ها اشاره دارند.
• پیشبرد تصاعدی
  • افزودن عناصر بر اساس افزایش اندازه صفحه نمایش صورت می گیرد.

کار با سیستم Bootstrap Grid

سیستم های Grid ، برای ایجاد چیدمان های صفحه از طریق یک سری از سطرها و ستون ها استفاده می شوند ؛ به طوری که مطالب ما را در خود جای می دهند. در اینجا نحوه عملکرد سیستم Bootstrap Grid آورده می شود:

• سطرها باید درون یک کلاس container. قرار بگیرند تا هماهنگی و فاصله گذاری مناسب داشته باشند.
• از سطرها برای ایجاد گروه افقی ستون ها استفاده می شود.
• محتواها باید داخل ستون ها قرار گیرند و تنها ستون ها امکان دارند که فرزندان بلاواسطه سطرها باشند.
• کلاس های grid از پیش تعریف شده مانند row. و col-xs-4. برای ساخت سریع چیدمان grid در دسترس هستند. ترکیب های LESS نیز می توانند برای چیدمان مفهومی تر مورد استفاده قرار گیرند.
• ستون ها از طریق فاصله گذاری (padding) ، شیارها (شکاف بین محتوای ستون) را ایجاد می کنند. این فاصله گذاری در سطر اول و آخرین ستون از طریق حاشیه منفی در rows. خنثی می شود.
• ستون های grid از طریق تعیین تعداد دوازده ستون در دسترس که ما می خواهیم برپا نماییم ، ایجاد می شوند. به عنوان مثال ، سه ستون برابر ، از سه . col-xs-4. استفاده می کنند.

پرس و جوهای رسانه

پرس و جوی رسانه (Media query) یک اصطلاح واقعاً فانتزی برای " conditional CSS rule" (قانون شرطی CSS ) است. این پرس و جو ، به سادگی چند CSS را بر اساس تنظیم شرایط خاصی به کار می برد. اگر این شرایط رخ دهند ، سبک (style) موردنظر اعمال می شود.

پرس و جو های رسانه ای در Bootstrap به ما امکان می دهند که محتواها را بر اساس اندازه نمایشگر حرکت دهیم ، نشان دهیم یا پنهان نماییم. دنبال کردن پرس و جوهای رسانه ای ، در فایل های LESS برای ایجاد breakpoint های کلیدی در سیستم Bootstrap grid استفاده می شوند.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

گاهی اوقات پرس و جوهای رسانه ای توسعه می یابند تا حداکثر عرض (max-width) صفحه را برای محدود کردن CSS به مجموعه ای باریک از دستگاه ها ، تحت پوشش قرار دهند.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

پرس و جو رسانه ها دارای دو بخش ، مشخصات دستگاه (device specification) و سپس یک قانون اندازه (size rule) است. در مورد فوق ، قانون زیر تنظیم می شود.

نگاهی به خط کد زیر بیاندازیم:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

برای تمام دستگاه ها بدون توجه به min-width: @screen-sm-min ، اگر عرض صفحه کوچک تر از screen-sm-max@ باشد ، سپس باید کاری انجام دهیم.

گزینه های سیستم grid

جدول زیر خلاصه ای از جنبه های چگونگی عملکرد سیستم grid بوت استرپ در چندین دستگاه را توضیح می دهد.

ساختار Grid پایه

ساختار پایه Bootstrap grid به صورت زیر است:

<div class = "container">
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

بیایید چند مثال ساده grid را با هم ببینیم. برای مشاهده هر مثال ، روی موضوع مثال کلیک نمایید.

• مثال : Stacked-to-horizontal
• مثال : دستگاه های متوسط و بزرگ
• مثال : موبایل ها ، تبلت ها و دسکتاپ ها

تنظیم مجدد ستون واکنش گرا

با چهار ردیف grid در دسترس ، ما محدود به اجرای مواردی هستیم که در آنها breakpoint های خاصی قرار دارند ، ستون ها کاملاً درست نمایان نمی شوند ، زیرا یکی بلندتر از دیگری است. برای رفع آن ، از ترکیب یک کلاس clearfix. و کلاس های utility واکنش گرا استفاده کنیم ، همان طور که در مثال زیر نشان داده شده است :

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" 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.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" 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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" 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</p>
      </div>
      
   </div>
</div>

کد فوق ، نتیجه زیر را تولید خواهد نمود :

با تغییر اندازه نمایشگر خود و یا چک کردن کد فوق بر روی تلفن همراه خود ، نتیجه مطلوب این مثال را مشاهده خواهیم نمود.

ستون های آفست

آفست ها ، یک ویژگی مفید برای چیدمان های تخصصی هستند. آنها می توانند برای push کردن ستون ها برای ایجاد فاصله بیشتر استفاده شوند (برای مثال). کلاس های *=col-xs. از آفست ها پشتیبانی نمی کنند ، اما با استفاده از یک سلول خالی ، می توان آن را به راحتی تکرار نمود.

برای استفاده از آفست ها در صفحه نمایش های بزرگ ، از کلاس های offset-md-* class استفاده می کنیم. این کلاس ها ، حاشیه چپ ستون را با columns*  افزایش می دهند که * از 1 تا 11 می باشند.

در مثال زیر ، ما <div class = "col-md-6">..</div> داریم ، با استفاده از کلاس col-md-offset-3. ، ما محتوا را در مرکز خواهیم داد.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" 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.</p>
      </div>

   </div>
	
</div>

کد فوق ، خروجی زیر را تولید خواهد نمود :

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

برای تو در تو کردن محتویات خود با grid پیش فرض ، یک ردیف جدید row. و مجموعه ستون های
*-col-md. را درون یک ستون موجود *-col-md.اضافه می کنیم. ردیف های تودرتو شده باید شامل مجموعه ای از ستون هایی باشند که به 12 اضافه می شوند.

در مثال زیر ، چیدمان دارای دو ستون است ، و ستون دوم آن به چهار کادر که بیش از دو ردیف دارد ، تقسیم می شوند.

<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 این است که ما به راحتی می توانیم ستون ها را در یک ترتیب بنویسیم و آنها را در یک ستون دیگر نشان دهیم. ما می توانیم به راحتی ترتیب ستون های grid داخلی را با کلاس های اصلاح کننده
*-col-md-push. و *-col-md-pull. تغییر دهیم که در آنها * دامنه بین 1 تا 11 می باشد.

در مثال زیر ، ما دو ستون چیدمان داریم که ستون سمت چپ ، باریک ترین ستون است و به عنوان یک نوار کناری (sidebar) عمل می کند. ما ترتیب این ستون ها را با استفاده از کلاس های *-col-md-push. و *-col-md-pull.تعویض خواهیم نمود.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

کد فوق ، خروجی زیر را تولید خواهد نمود :