سلام دوستان.

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

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

  • داخل صفحه یک .container یا .container-fluid داریم. .container برای یک عرض ثابت و مشخص (fixed-width) و .container-fluidبرای عرض کامل (full-width) استفاده میشه. .row ها برای ترازبندی و padding مناسب باید داخل یکی از این دوتا (همون .container یا .container-fluid) قرار بگیرند.
  • از .row استفاده میشه تا دربر گیرنده گروهی از ستون هایی باشه که به صورت افقی و کنار هم قرار گرفتند.
  • محتویات داخل ستون ها قرار میگیره و هر ستون باید حتما بلافاصله فرزند یک .row باشه. این مورد رو پایین بیشتر توضیح میدم.
  • کلاس های گرید از قبل تعریف شده ای مثلا .row و .col-xs-4 وجود داره که برای صفحه بندی به ما کمک میکنه و ما میتونیم خیلی سریع صفحه مون رو اونطوری که مخوایم تقسیم بندی کنیم.
  • بین ستون ها یک فضای خالی توسط padding ایجاد شده که بهش میگن gutter و مقدار این gutter به صورت پیشفرض 30پیکسل هست که تقسیم بر 2 میشه و نهایتا 15پیکسل به سمت چپ و 15پیکسل به سمت راست هر ستون اضافه میشه تا ستون ها از هم فاصله داشته باشند. البته این مقدار پیشفرض به راحتی قابل تغییره.
  • تعداد پیشفرض ستون های سیستم گرید بوت استرپ، 12 تا هست که البته خیلی راحت میتونید از داخل فایل _variables.scss با تغییر مقدار متغیر $grid-columns این عدد رو تغییر بدید. ولی ما برای این آموزش از همون 12ستون بوت استرپ استفاده میکنیم.
  • 4 نقطه شکست اصلی (break point) یعنی extra small و small و medium و large داره. نقطه شکست ها در واقع عرض مرورگر هست، که با استفاده از یک media query مشخص شده وقتی عرض مرورگر در فلان محدوده بود صفحه بندی تغییر کنه.

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

RWD-bootstrap3-2-0جدولی که بوت استرپ اینجا گذاشته خلاصه ای از ویژگی های سیستم گرید فعلی بوت استرپ رو نشون میده. عکس زیر دقیقا همون جدوله.

RWD-bootstrap3-2-1

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

مثلا وقتی صفحه نمایشمون Extra small هست یعنی سایز کمتر از 768پیکسل داره با استفاده از کلاس .col-xs-* میتونیم اندازه ی هر کدوم از بلاک هامون رو مشخص کنیم.

وقتی صفحه نمایش Small هست و سایز بزرگتر یا مساوی 768پیکسل داره با استفاده از کلاس .col-sm-* میشه اندازه ی هرکدوم از بلاک هارو مشخص کرد.

همینطور برای صفحه نمایش های Medium که سایز بزرگتر یا مساوی 992پیکسل دارند با استفاده از کلاس .col-md-* و صفحه نمایش های Large که سایز بزرگتر یا مساوی 1200پیکسل دارند با استفاده از کلاس .col-lg-* میشه اندازه هرکدوم از بلاک هارو مشخص کرد.

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

یه مثال میزنم. فرض کنید میخوایم یه سایتی داشته باشیم که رو دستگاه های extra small یه ستونه باشه، رو دستگاه های small و medium دو ستونه باشه و رو دستگاه های large چهار ستونه باشه. چنین چیزی رو میشه با این کد پیاده سازی کرد:

اول یه توضیحی راجع به کد بالا میدم و بعدش هم تصویری از نحوه قرارگیری این بلاک ها در device های مختلف رو میذارم. اگر به کد دقت کنید میبینید که اولا از کلاس .col-xs-12 استفاده نکردیم چون هر بلاک به صورت پیشفرض در سایزهای Extra small کل 12ستون گرید رو استفاده میکنه.

دوما اینکه صفحه بندی رو برای device های small انجام دادیم ولی برای medium نه، یعنی از کلاس .col-sm-6 استفاده کردیم ولی از .col-md-6 نه. دلیل این امر هم اینه که بالاتر گفتیم برای صفحه نمایش با سایز بزرگتر یا مساوی 768پیکسل از کلاس .col-sm-* استفاده میکنیم پس یعنی اگر .col-md-*و .col-lg-* نوشته نشه، بوت استرپ از همون .col-sm-* برای سایزهای medium و large استفاده میکنه. عدد 6 در .col-sm-6 به معنی این هست که اون بلاک، 6ستون از 12ستون گرید رو اشغال میکنه.

سوم اینکه گفتیم میخوایم سایتمون رو صفحه نمایش های large چهار ستونه باشه پس از کلاس .col-lg-3 استفاده میکنیم. عدد 3 یعنی اون بلاک، 3ستون از 12ستون گرید رو اشغال میکنه.

RWD-bootstrap3-2-2

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

RWD-bootstrap3-2-3

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

RWD-bootstrap3-2-4

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

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

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

RWD-bootstrap3-2-5

RWD-bootstrap3-2-6

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

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

خب! خسته نباشید. در قسمت بعدی یاد میگیریم منو رو بسازیم.

برچسب ها : طراحی ریسپانسیو ، گریدبندی در بوت استرپ ، آموزش گریدبندی در بوت استرپ ، آموزش بوت استرپ ،
+ تعداد بازدید : 6 |
نوشته شده توسط مینا برفی در پنجشنبه 18 مرداد 1397 و ساعت 21:02
ساخت وبلاگ رایگان تور روسیه بلیط هواپیما بلیط هواپیما تدریس خصوصی زبان انگلیسی هوشمند سازی ساختمان خانه هوشمند
بستن تبلیغات [X]