مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، سیستم گرید بندی ( Grid )
آموزش بوت استرپ ، سیستم گرید بندی ( Grid )

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

سیستم شبکه بندی یا گریدبندی در Bootstrap به ۱۲ ستون در یک سطر تقسیم بندی می شودبه هرکدام از این ستون ها گرید شبکه ) گفته می شود که می توانید مطالب خود را داخل هر گرید بنویسید و هر گرید را به صورت جداگانه طراحی کنید.

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

کلیه تقسیم بندی های صفحه بایستی بر اساس این ۱۲ ستون انجام بگیردفرض کنید یک سطر از صفحه مربوط به نمایش ۳ تا از آخرین اخبار منتشر شده باشد. پس نیاز به ۳ ستون در یک سطر داریم تا در هر ستون یک خبر را نمایش دهیممی توانیم سه تا از تک ستون ها را انتخاب کنیم . ولی در نمایشگرهای بزرگ فضای بیشتری لازم داریم. پس هر ۴ ستون را با هم ادغام کرده و تبدیل به یک ستون می کنیم. پس تقسیم بندی در این سطر باید ادغام هر ۴ تا از این ۱۲ ستون باشد

آموزش سیستم گرید بندی در بوت استرپ

آموزش بوت استرپ سیستم گرید بندی

می توانید در هر نمایشگر موبایل، تبلت ، دسکتاپ و … ) سیستم گرید بندی متفاوتی را به کاربران نمایش دهید. این پایه اصلی یک سیستم واکنشگرا می باشدمثلا در مثال قبل در دسکتاپ تان در یک سطر سه ستون از آخرین اخبار را به کاربر نمایش دادیم. ولی در موبایل چون فضای کمتری در نمایشگر دارید اخبار را به صورت تک ستون نمایش می دهیم.

تذکر : قبل از معرفی کلاس های مربوط به گریدها ابتدا موارد زیر را به یاد داشته باشید.

  1.  کلیه سطر ها و کدها بایستی بین یک کلاس container قرار بگیرند. کلاس container یک باکس کلی برای صفحه ایجاد کرده که تمامی اجزای صفحه درون آن قرار می گیرند. اندازه این باکس ۱۱۷۰ پیکسل می باشد که به صورت وسط چین در صفحه قرار می گیرد.
    نکته : اگر وب سایت کل عرض صفحه را فرا می گیرد بایستی از کلاس container-fluid استفاده کنید. 
    نکته : یک container نمی تواند داخل container  دیگری قرار گیرد
  2. ستون های هر سطر از صفحه را در یک کلاس row قرار دهید. کلاس row یک سطر در صفحه ایجاد می کند.

ساخت ستون در هر سطر توسط فرمت  

در فرمت بالا ستاره اول تعیین نوع دستگاه نمایش است که یکی از چهار نام زیر می باشد :

  • xs ( برای موبایل ها و دستگاه های کوچک ) – مخفف extra small
  • sm ( برای تبلت ها ) – مخفف small
  • md (برای کامپیوترهای رومیزی ) – مخفف medium
  • lg (برای کامپیوترهای بزرگتر ) – مخفف large

ستاره دوم هم برای مشخص کردن طول ستون که عددی بین ۱ تا ۱۲ می باشد.

مثال :
در مثال زیر ۳ ستون برای صفحه های خیلی عریض و هم اندازه تشکیل می دهیم:

 

و یا در این مثال برای دستگاه های موبایل یک سطر با یک ستون ۴ تایی و یک ستون ۸ تایی ایجاد می کنیم

 

تاریخ آخرین بروزرسانی : ۲۴ مهر ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.
3نظر برای

آموزش بوت استرپ ، سیستم گرید بندی ( Grid )


  1. سلام

    اگه نخوام از bootstral استفاده کنم و خودم بخوام این کار هارو درست کنم باید برای هر device یه سایت طراحی کنم؟

    میگن سرعت لود این سایت ها پایینه

    اطلاعاتم خیلی کمه دربارش

    میشه کمک کنید لطفا

  2. سایت خیلی خوبی دارید موفق باشید 

  3. عالی بود

    موفق باشید

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.