طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت دوم - سیستم گرید

- visibility ٢٢ mode_comment

سلام دوستان.

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

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

  • داخل صفحه یک .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 استفاده نمیکنید مشکلی نیست از سایت بوت استرپ استفاده کنید. درهر صورت من کدها رو همراه با تغییرات لازم مینویسم.

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

comment دیدگاه کاربران
الهه گیتی روان

بسیار ممنونم . آموزش مفیدی بود . تشکر فراوان از شما . ❓ ❓ ❓

Ali Abedian

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

مصطفی

ضمن عرض سلام و وقت بخیر
خانم کلانتری مرسی از زحماتتون بسیار عالی بود خسته نباشید و خدا قوت و انشاالله که راهتون رو ادامه بدین و براتون آرزوی موفقیت و سربلندی میکنم ❓

رضا

درود و سپاس از آموزش تون
البته من هنوز آغاز به فرا گیریش نکردم! چون من تو پروژم از بوت استرپ 3.3.5 بهره می برم و نسخه ای که شما آموزش دادید انگارنسبت به اونی که من بکار میبرم قدیمی تره.با این حساب آیا آموزش های شما بدرد من میخوره؟ و اینکه من با نرم افزار براکتس کار میکنم و شما با یه برنامه دیگه این آموزش رو دادید.این دو برنامه کارکردشون باهم خیلی فرق داره یا نه با براکتس هم می تونم از آموزش شما بهره ببرم؟
سپاس پیشاپیش برای پاسخ گویی تون

وحید صالحی

سلام مشکلی نیست میتونید استفاده کنید فقط کد نویسی css این دوره تحت sass هست که اون رو هم باید بلد باشید و حتما نسخه بوت استرپ باید rtl و راست چین باشه. برای آموزش تحت css میتونید در دوره آموزشی فریم ورک بوت استرپ که در سایت در حال برگزاری هست ثبت نام کنید در این دوره خیلی با جزئیات بیشتر بوت استرپ رو تدریس میکنیم
بله از براکت هم میتونید استفاده کنید
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3