شبکه بندی مقدماتی بوت استرپ

سیستم شبکه بندی بوت استرپ - Bootstrap Grid System

Wiki

سیستم شبکه بندی بوت استرپ اجازه ی استفاده از حداکثر 12 ستون را در صفحه به ما می دهد. به عبارت دیگر، بوت استرپ صفحه ی وب را به 12 ستون تقسیم می کند. حالا شما می توانید با استفاده از کلاس های بوت استرپ، این ستون ها را با یکدیگر ادغام کنید تا بتوانید ستون های بزرگتری به دست بیاورید. به تصویر زیر نگاه کنید؛ در ردیف شماره ی 1، دوازده ستون وجود دارند؛ این یعنی صفحه ی ما در بوت استرپ، می تواند حداکثر به 12 ستون تقسیم شود. اما اگر به ردیف شماره ی 2 نگاه کنید، می بینید که سه ستون وجود دارند که هر کدام از آنها از ادغام 4 ستون واحد به دست آمده اند. حالا به ردیف شماره ی 3 نگاه کنید؛ همان طور که مشاهده می کنید، یک ستون 8 تایی و یک ستون 4 تایی وجود دارند که از ادغام دیگر ستون ها به وجود آمده اند. در ردیف شماره ی 4 هم دو ستون وجود دارند که هرکدام از 6 واحد به وجود آمده اند. اگر به هریک از این ردیف ها دقت کنید، مشاهده می کنید که جمع اعداد آنها، همواره برابر با 12 است. 

سیستم شبکه بندی بوت استرپ، واکنش گرا(responsive) می باشد و ستون ها بطور اتوماتیک بر اساس اندازه ی صفحه ی نمایش، تنظیم خواهند شد.

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

Wiki

سیستم شبکه بندی بوت استرپ، دارای 4 کلاس می باشد:

• xs(برای موبایل ها)
• sm(برای تبلت ها)
• md(برای رایانه های رومیزی)
• lg(برای رایانه های بزرگتر)

ما می توانیم کلاس های بالا را با یکدیگر ترکیب کنیم تا مشخص کنیم که یک ستون در دستگاه های مختلف چگونه نمایش داده شود. 

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

Wiki

ساختار کلی استفاده از بوت استرپ به صورت زیر است؛ به این ساختار دقت کنید:

در بوت استرپ، برای قرار دادن محتوا و عناصر، ابتدا باید با استفاده از کلاس row یک ردیف ایجاد کنیم. وقتی که ردیف ایجاد شد، باید این ردیف را با استفاده از کلاس های شبکه بندی، به یک یا چند ستون تقسیم کنیم. برای ایجاد یک ستون، کافی است از کلاس col استفاده کنیم و به دنبال آن، نوع کلاس شبکه بندی را قرار دهیم و سپس در ادامه ی آن با استفاده از یک عدد، میزان پهنای آن ستون را مشخص کنیم. برای متوجه شدن این موضوع به مثال های زیر دقت کنید.

نکته: توجه کنید که به جای ستاره ها(*) باید از نام کلاس های شبکه بندی و اندازه ی آنها، استفاده کنید.

ایجاد سه ستون مساوی در بوت استرپ

Wiki

به مثال زیر دقت کنید؛ همان طور که مشاهده می کنید، ابتدا با استفاده از کلاس row یک ردیف در صفحه ایجاد کرده ایم، و سپس این ردیف را در تبلت ها( که از کلاس sm استفاده می کنند ) به سه ستون مساوی تقسیم کرده ایم. اگر به کلاس هریک از این ستون ها دقت کنید، مشاهده می کنید که اول کلمه ی col آمده است و سپس کلمه ی sm و سپس عدد 4 آمده است. کلمه ی sm و عدد 4 پس از آن، مشخص می کنند که این ستون در تبلت ها و بالاتر، چهار ستون واحد را اشغال کند. دقت کنید که همواره باید جمع این اعداد پس از کلمه ی sm (یا هر کلاس دیگری) برابر با 12 باشد. پس الان ما یک ردیف داریم که در داخل آن سه ستون مساوی وجود دارند. البته باید گفت که این سه ستون، تنها در تبلت ها به بالا نمایش داده می شوند. و در موبایل ها چون هنوز کلاسی برای آن تعریف نکرده ایم، به طور اتوماتیک این ستون ها دسته بندی می شوند.

ایجاد دو ستون نامساوی در بوت استرپ

Wiki

در مثال زیر، ابتدا با استفاده از کلاس row، یک ردیف ایجاد کرده ایم و سپس در داخل آن دو ستون برای تبلت ها و بالاتر ایجاد کرده ایم. به طوری که ستون اول، از 12 ستون واحد، چهار ستون را اشغال می کند و ستون دوم هم 8 واحد را اشغال می کند. 

	نکته: در آموزش های بعدی، درباره ی شبکه بندی بوت استرپ مطالب بیشتری را فرا خواهید گرفت.

{nice1}

• قبلی
• بعدی