با سلام خدمت تمامی دوستان

در این بخش نحوه کار با سیستم Grid بندی بوت استرت رو آموزش میدیم. در قسمت قبل نرم افزارهای مورد نیازمون رو نصب کردیم و… در این بخش قصد داریم با نحوه استفاده از Grid در ستون بندی در بوت استرپ آشنا بشیم! شاید بپرسید Grid چیه؟!

سیستم Grid برای قالب بندی صفحه مورد نظر شما استفاده میشه که در اون از ردیف (row) و ستون ها (columns) استفاده میشه. هر row در بوت استرپ از ۱۲ ستون تشکیل میشه (شکل زیر).bootstrap row-columns

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

  • بوت استرپ دارای دو نوع کلاس برای عرض صفحه است. نوع اول کلاس container. که برای عرض ثابت صفحه (fixed-width) استفاده میشه و نوع دوم کلاس container-fluid. که برای عرض کامل (full-width) صفحه و padding استفاده میشه.
  • برای ساخت یک ردیف افقی از کلاس row استفاده میشه هر row در برگیرنده تعدادی از ستون ها است. تگ دارای کلاس row باید در داخل کلاس container و یا container-fluid قرار بگیره.
  •  محتوا در داخل ستون ها columns قرار میگیره و هر ستون در واقع فرزند یک row به حساب میاد.
  • کلاس های Grid بندی مثل row و col-xs-4. به ما برای قالب بندی سریع صفحه کمک میکنه و با استفاده از این کلاس ها میتونیم قالب مورد نظر خودمون رو پیاده کنیم.
  • بین ستون ها و row یک فضای خالی وجود داره که بهش gutter گفته میشه و این gutter توسط padding ایجاد شده است. مقدار پیش فرض gutter برای ایجاد فاصله ۳۰px است که این مقدار در دو طرف راست و چپ ستون ها قرار میگیره یعنی ۱۵px در سمت راست و ۱۵px در سمت چپ برای ایجاد فاصله استفاده میشه. این مقدار پیش فرض رو میتونید در فایل variables.scss_ قرار داره و میتونید با تغییر مقدار متغییر grid-columns$ ای مقدار رو تغییر بدین. ( در این آموزش این مقدار رو تغییر نمیدیم).
  • در بوت استرپ ۴ نقطه شکست (break point) اصلی وجود داره این چهار نقطه large و medium و small و extra small نام دارند. منظور از نقطه شکست عرض مرورگر و یا صفحه نمایش است که با استفاده از media query در css تعیین شده و هنگامی که عرض صفحه به مقدار مشخصی برسه تعداد ستون هایی که در هر ردیف قرار میگیره تغییر میکنه و قالب بندی صفحه عوض میشه.( در ادامه بیشتر با این موضوع آشنا میشیم)

تصویر زیر رو ببینید. خط های صورتی همون ۱۲ستون پیشفرض بوت استرپ هستند. فضاهای خالی بین این خطوط صورتی رنگ همون gutter هست. تو خط اول یک row داریم که داخل این row باید ستون ها قرار بگیرند. خط دوم هم دو تا بلاک داریم که بلاک سمت راستی ۸ ستون از اون ۱۲ستون رو اشغال کرده و بلاک سمت چپی ۴ستون از اون ۱۲ستون رو اشغال کرده. البته اینجا من این دو تا بلاک رو داخل سطر نذاشتم که بیشتر مشخص باشه.

bootstrap row-columns 2

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

grid system work

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

برای مثال وقتی سایز صفحه Extra small هست از کلاس *-col-xs استفاده میکنیم و یا وقتی سایز صفحه نمایش small باشه یعنی عرضی بین ۷۶۸px و ۹۹۲px داشته باشه از کلاس *-col-sm استفاده میشه. به همین صورت در عرض های بین ۹۹۲px و ۱۲۰۰px از کلاس *-col-md استفاده میشه و در عرض های بالاتر از ۱۲۰۰px باید از کلاس *-col-lg استفاده کنیم.

در کلاس های بالا به جای علامت * باید مقدار ستون های مورد نظرمون رو قرار بدیم.

به عنوان مثال قصد طراحی وب سایتی را داریم که بر روی دستگاه های Extra small,Small,Medium و Large پشتیبانی و قابل نمایش باشد و همچنین در دستگاه های Extra small یک ستونه باشد، در دستگاه های small دو ستوه باشد، در دستگاه های Medium سه ستونه و در دستگاه های Large چهارستونه باشد. برای اینکار به شکل زیر کد را می نویسیم:

توضیح کد بالا را شروع می کنیم: در کد بالا همونطور که گفتیم برای پلتفرم های Extra small تک ستونه می باشد یعنی هر بلوک و یا div تعداد ۱۲ ستون را در خود جای می دهد که از کلاس col-xs-12 استفاده کردیم. برای پلتفرم های Small گفتیم که دو ستون در کنار هم نمایش داده شود یعنی هر بلوک دارای ۶ ستون باشد که از کلاس col-sm-6 استفاده شد. برای پلتفرم های Medium کلاسی را استفاده کردیم که سه ستون در کنار هم نمایش داده شوند و برای این کار از کلاس col-md-4 استفاده کردیم یعنی در هر بلوک ۴ ستون قرار بگیرد و در پایان برای پلتفرم های Large تعیین کردیم که چهار ستون در کنار هم نمایش داده شود و یعنی در هر بلوک و یا div تعداد ۳ ستون قرار بگیرد. چنانچه بخواهیم تصویری از این کد را ارائه دهیم به شکل زیر می باشد:

Untitled-2

خب تا این قسمت امیدوارم همه چیز رو روشن و شفاف توضیح داده باشم.

مبحث دیگه ای که داریم Nesting هست. گفتیم هر ستون باید حتما بلافاصله فرزند یک row. باشه. طبق این گفته، سمت راست تصویر زیر شکل صحیح کدنویسی و سمت چپ اون، شکل غلط کدنویسی به صورت تو در تو هست.

nesting (1)

کد تصویر سمت راستی یه همچین شکلی داره:

nesting (2)

بلاکی که کلاس col-md-9. داره خودش دوباره به ۱۲ستون تقسیم میشه و ضمنا شامل یه row و دو تا بلاک دیگه هست که هرکدوم از این بلاک ها دوباره ۶ستون از این ۱۲ستون جدید رو اشغال میکنه.

سیستم گرید بوت استرپ مباحث دیگه ای از جمله Offsetting columns و Column ordering داره که چون داخل این قالب ازینها استفاده نشده دیگه توضیحشون نمیدم ولی اگر علاقه دارید بدونید چی هست میتونید یه سر به اینجا بزنید.

بحث دیگه که داریم به اسم Responsive utilities که در واقع باعث میشه یه سری از بلاک هاتون رو در سایز های مختلف یا مثلا برای حالت print خیلی راحت بتونید Hidden یا Visible کنید. دو جدول زیر گویای همین ویژگی هست:

Responsive utilities

Print bootstrap classes

دوستان در این قسمت توضیحات سیستم Grid بوت استرپ به پایان رسید.

اگر از sublime text استفاده میکنید یه package برای کار با بوت استرپ ۳ درست کردند. کافیه از Package Control پکیج snippets bootstrap 3 رو نصب کنید. روش استفاده از این package هم به این صورت هست که شما هرجایی که میخواید عبارت -bs3 رو مینویسید و کلیدهای ctrl+space رو میزنید یه لیستی باز میشه که آیتم مورد نظرتون رو انتخاب و Enter رو کلیک میکنید تا براتون کد کاملش رو بنویسه. اگر هم sublime text استفاده نمیکنید مشکلی نیست از سایت بوت استرپ استفاده کنید. درهر صورت من کدها رو همراه با تغییرات لازم مینویسم.

دوستان این بخش آموزش به پایان رسید…یا حق