• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

22 18384 ۱۱ فروردین ۹۳

سلام دوستان.

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 22 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Reyhaneh Ezatpanah(۱۲ فروردین ۱۳۹۳)

    سپاس فراوان بابت بخش دوم آموزش ❓

    فقط یک سوال…
    زمانبندی درج قسمت های دیگه رو میشه بگید؟ چند روز به چن روز آپ میشه این مطلب؟

  • ‏‏
    Reyhaneh Ezatpanah(۱۶ فروردین ۱۳۹۳)

    برای استفاده از پکیچ توی ادیتور sublime از کدوم منو باید فعالش کرد؟!

  • ‏‏
    مسعود(۴ خرداد ۱۳۹۳)

    خیلی ممنون از فعالیت ارزنده تون.
    از خود بوتس ترپ ترجمه کردید؟
    بنده 1 سوال داشتم در مورد گرید سیستم بوتس ترپ
    من از div.containerو بعدش div.rowاستفاده میکنم و بعد از اون از div.col-md* هیچ مشکلی ندارم و کارم رو راحت باهاش انجام میدم
    اما یه کاری رو تموم کردم 2 تا مشکل دارم.
    1. در مرورگر های قدیمی خیلی به هم ریخته نمایش میده
    2. در موبایل خیلی بهم ریخته نمایش میده
    تویه مرورگر زوم اوت و زوم این که میکنم ریسپانسیوش مشکلی نداره
    فقط و فقط در موبایل و مرورگر های قدیمی مشکل داره.

    • ‏‏
      مهشاد کلانتری(۴ خرداد ۱۳۹۳)

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

      • ‏‏

        ممنون که جواب دادید !
        اما ترجمه خیلی شبیه به سایت بوتس ترپ هستش…بگذریم
        چرا باید بیخیالش بشم… یعنی هیچ راهی وجود نداره ؟
        خوب من موبایل huawei چک کردم . البته ریسپانسیو قالب در مرورگر دسکتاپ مشکلی نداره در موبایل مشکل داره.
        امکانش هست قالب رو خصوصی نگاه کنید ؟

        • ‏‏
          مهشاد کلانتری(۱۲ خرداد ۱۳۹۳)

          آهان اگر منظورتون فقط همین قسمت گرید هستش که گریدش رو از خود بوت استرپ ترجمه کردم گذاشتم خوب و کامل توضیح داده :)
          خب دلیلی نداره شما قالب رو واسه مرورگر هایی که از رده خارج شدند سازگار کنید! راه که داره ولی دردسر زیاد داره
          اوکی قالبتون رو بفرستید

        • ‏‏
          محمد امین(۱۳ آبان ۱۳۹۳)

          سلام نسخه های جدید بوت استرپ داره با اینترنت اکسپلورر سازگار میشه

  • ‏‏

    عالی بود …
    آموزش بوتسرتپ بازم بزارین

  • ‏‏

    سلام.وقتی divها را ایجاد میکنم خروجی به صورت زیر هم نمایش داده میشه نه کنار هم!

  • ‏‏
    امین خلیلی(۵ بهمن ۱۳۹۳)

    سلام
    عرض هرکدام از این 12ستون پیشفرض چقدر هست و ایا میشه اندازشون را تغییر داد اگه امکان تغییرش هست
    نام متغییر ش چی هست

  • ‏‏

    من یه دیدگاه فرستاده بودم که متاسفانه پاک شده حالا علت چی بوده به کنار!
    پرسیده بودم که من الان چها قسمت از این آموزش رو دو یا سه بار خوندم ولی متوجه نشدم که برای ویرایش فایل های scss از چه ویرایشگری استفاده می کنید که بشه با همون فرمت هم ذخیره کرد

    البته می دونم که برای کامپاین کردن از کوالا استفاده میشه ولی برای ویرایش فایل های scss از چی استفاده کردین؟؟

    امیدوارم که ایندفعه دیدگاه من پاک نشه و پاسخ داده بشه :sad:

    • ‏‏
      وحید صالحی(۲۳ مرداد ۱۳۹۴)

      شلام دیدگاهی از شما دریافت نکردیم در کل باید ruby رو روی سیستمتون نصب کنید یا از comment prompt ویندوز استفاده کنید عبارت نحوه ویرایش فایل های Scss رو گوگل کنید.

  • ‏‏
    اسماعیل(۲۰ بهمن ۱۳۹۴)

    سلام به قدری از آدمهای مثل شما خوشم میاد که حد نداره چه بسا اگه همه مثل شما بودن و به فکر انتقال علمشون به دیگران بودن چه دنیای خوبی میشد بسازیم مرسی از آموزشهای که قرار میدین ُ تا آخرش دنبالش میام

  • ‏‏

    سلام و خسته نباشید و تشکر بابت توضیحات خوبتون
    سوالم اینه که چطور میتونم یه سایت ریسپانسیو رو با بوت استرپ طوری درست کنم که مثلا هدر یا یک div تو صفحه سایتم هم بصورت container-fluid باشه که کل عرض صفحه رو بگیره و هم محتواش در صورت zoom out کردن مثه کلاس container بوت استرپ عمل کنه ینی با نظم خاصی کوچیک شن؟؟؟؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram