آریا بوت استرپ | آموزش

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

معرفی ستون‌های شبکه:

همان‌طور که اشاره شد 12 ستون در شبکه بوت استرپ وجود دارد. این ستون‌ها بنابر سایزهای مختلف صفحات نمایش عرض‌های مختلفی را به خود اختصاص می‌دهند. همچنین می‌توان تعیین نمود که یک المان در سایزهای مختلف صفحه نمایش چند ستون را اشغال نماید. تعیین تعداد ستون در سایزهای استاندارد صفحه نمایش عملی است که منجر به واکنش‌گرا شدن صفحات طراحی شده منجر می‌شود.

معرفی سایزهای استاندارد در بوت استرپ:

در بوت استرپ 5 صفحه سایز تصویر استاندارد وجود دارد که عبارتند از:

• دستگاه‌های موبایل سایز کوچک (کمتر از 576 پیکسل)
• دستگاه‌های موبایل (کمتر از 768 پیکسل و بزرگ‌تر از 576 پیکسل)
• دستگاه‌های تبلت (کمتر از 992 پیکسل و بزرگ‌تر از 768 پیکسل)
• دستگاه‌های صفحه بزرگ (کمتر از 1200 پیکسل و بزرگ‌تر از 992 پیکسل)
• دستگاه‌های صفحه خیلی بزرگ (بزرگ‌تر از 1200 پیکسل)

استفاده از شبکه ستونی بوت استرپ:

برای استفاده از شبکه ستون‌های بوت استرپ ابتدا باید مشخص نمود که محتوای صفحه بر اساس سایزهای استاندارد چیده شود یا شناور باشد. اگر ستون‌ها بر اساس سایز استاندارد صفحات نمایش تنظیم شوند، وقتی کاربر صفحه مروگر خود را تغییر سایز می‌دهد، مثلا از 1190 پیکسل کوچک‌تر می‌کند، در این حالت سایز محتوای صفحه به اندازه سایز استاندارد پایینتر تنظیم می‌شود، یعنی عرض محتوای قابل استفاده به 992 پیکسل کاهش پیدا می‌کند. در این حالت، مقداری فضای خالی در دو طرف محتوای صفحه قرار می‌گیرد. در حالت شناور، عرض قابل استفاده به عرض مرورگر تغییر می‌باید و هر مقدار کاربر صفحه مرورگر را کوچک‌تر یا بزرگ‌تر نماید، فضای محتوای شبکه به همان اندازه کوچک‌تر یا بزرگ‌تر می‌شود. برای مثال وب سایت آریا بوت استرپ به روش سایز استاندارد طراحی شده است، پس با تغییر سایز مرورگر می‌توانید محتوای صفحه را در سایز استاندارد مشاهده کنید، که در برخی سایزها مقداری فضای خالی در اطراف محتوا قرار می‌گیرد.
بنابراین مطابق با طراحی مد نظر باید یکی از روش‌های سایز استاندارد یا شناور را انتخاب نمود. این عمل توسط کلاس‌های container و container-fluid قابل تنظیم است:

محتوای استاندارد:

1
2
3

<div class="container">
  <!-- Content here -->
</div>

محتوای شنارو:

1
2
3

<div class="container-fluid">
  <!-- Content here -->
</div>

پس از تعیین عرض محتوای صفحه به سراغ ستون‌ها می‌رویم، همان‌طور که پیشتر نیز گفته شد، در بوت استرپ 12 ستون به صورت پیش‌فرض وجود دارد. و برای انواع سایزهای صفحه نمایش (5 سایز استاندارد) تعریف شده است. لازم به ذکر است که ستون‌ها باید در ردیف (div با کلاس row) قرار گیرند.

سایزهای استاندارد صفحات نمایشگر به شکل زیر نام گذاری شده‌اند: (معادل سایزهای استاندارد معرفی شده قبلی)

• Extra Small: بدون پیشوند، پیش‌فرض بوت استرپ برای دستگاه‌های موبایل کوچک
• Small: با پیشوند sm برای دستگاه‌های موبایل
• Medium: با پیشوند md برای دستگاه‌های تبلت
• Large: با پیشوند lg برای صفحات مانیتور
• Extra Large: با پیشوند xl برای صفحات نمایشگر بزرگ

بنابراین وقتی می‌خواهیم تصویری را در نصف صفحه قرار دهیم می‌توانیم آن را در 6 ستون قرار دهیم. یا وقتی به سه ستون مساوی نیاز داریم، می‌توانیم از کدی مشابه کد زیر استفاده کنیم:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

در این مثال سه ستون مساوی با پیش‌فرض نمایش در موبایل در یک ردیف و یک سایز استاندارد محتوا طراحی شده است.

طراحی واکنش‌گرا:

طراحی واکنش‌گرا یا رسپانسیو به این معنی است که محتوای صفحه طراحی شده به ازای سایزهای مختلف صفحه نمایش صحیح و مناسب دیده شود. برای مثال وقتی می‌خواهیم یک گالری از تصاویر را نمایش دهیم، در صفحات بزرگ می‌توانیم سه تصویر را کنار یکدیگر بگذاریم، در صفحات تبلت دو تصویر و در صفحات موبایل که بسیار کوچک هستند، یک تصویر را در هر ردیف قرار دهیم (به تصویر پیوست دقت کنید). برای این منظور کافی است از پیشوندهای تعیین ستون‌های استاندارد استفاده کنیم:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <img ...>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <img ...>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <img ...>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <img ...>
    </div>
    . . .
  </div>
</div>

به کدهای مثال فوق توجه کنید: ابتدا یک محدوده استاندارد محتوا معرفی شده است، سپس برای قرار دادن ستون‌ها یک ردیف معرفی شده است. ردیف‌ها می‌توانند به عنوان فرزند یا لایه‌های پایینتر زیر محتوا قرار گیرند، اما ستون‌ها باید دقیقا زیر ردیف و به عنوان فرزند ردیف معرفی شوند. با استفاده از سه سایز پیش‌فرض (موبایل)، تبلت (پیشوند md) و صفحه مانیتور (پیشوند lg) عرض ستون‌ها معرفی شده‌اند. وقتی عرض‌های مختلفی به یک المان (در مثال فوق div) داده می‌شود، به این معنی است که این المان در هر یک از سایزهای استاندارد صفحه نمایش با چه عرضی قرار گیرد. در مثال فوق سایز برای موبایل 12 ستون، برای تبلت 6 ستون و برای مانیتور 4 ستون در نظر گرفته شده است. بنابراین در موبایل فقط یک تصویر، در تبلت دو تصویر و در مانیتور 3 تصویر خواهیم داشت.

اگر همانند مثال فوق div های متعددی معرفی شوند، هر div به اندازه تعیین شده فضا اشغال می‌کند و در صورتی که فضایی برای گزینه بعدی نباشد، به صورت خودکار به خط بعد می‌رود. بنابراین اگر 9 div وجود داشته باشد، در سایز کوچک 12 خط، در سایز تبلت 5 خط (خط پنج یک گزینه) و در مانیتور 3 خط وجود خواهد داشت.