بوت‌استرپ

چارچوب اصلی

بوت‌استرپ از شبکه‌ها، لایه‌ها و اجزای ۱۲ ستونه تشکیل شده‌است.

تنظیمات کلی

به doctype اچ‌تی‌ام‌ال ۵ نیاز دارد

بوت‌استرپ از اجزای خاص اچ‌تی‌ام‌ال و خصوصیات خاص سی‌اس‌اس استفاده می‌کند که نیاز به استفاده از doctype اچ‌تی‌ام‌ال ۵ است. آن را از ابتدای پروژه قرار دهید.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

گرافیک قلم و پیوندها

بوت‌استرپ برای نمایش نوشته‌ها و پیوندها شیوهٔ نمایش کلی پایه خود را قرار می‌دهد. به‌خصوص ما:

  • margin تگ body را حذف می‌کنیم
  • رنگ پس‌زمینه تگ body را background-color: white; قرار می‌دهیم.
  • از خصوصیات @baseFontFamily، @baseFontSize و @baseLineHeight در گرافیک قلم خود استفاده می‌کنیم.
  • رنگ کلی پیوندها را با @linkColor مشخص می‌کنیم و آن را فقط در :hover زیرخط‌دار می‌کنیم.

این شیوه‌های نمایش را شما می‌توانید در فایل scaffolding.less بیابید.

بازنشانی با استفاده از Normalize

در بوت‌استرپ ۲، بلاک بازنشانی قدیمی را با Normalize.css تعویض کردیم. این پروژه توسط Nicolas Gallagher و Jonathan Neal که HTML5 Boilerplate را نیز اجرا کرده‌اند، نوشته شده‌است. از آن‌جایی که در داخل reset.less ما از Normalize زیاد استفاده می‌کنیم، ما یک سری از عناصر را به‌طور مشخص برای بوت‌استرپ حذف کردیم.

سامانه شبکه‌ای پیش‌فرض

نمونه‌ای از شبکه زنده

سامانه شبکه‌ای پیش‌فرض بوت‌استرپ صفحه را به ۱۲ ستون تقسیم می‌کند، بدون استفاده از ویژگی پاسخگو عرض صفحه ۹۴۰ پیکسل می‌شود. اگر سی‌اس‌اس پاسخگو را به آن اضافه کنیم، شبکه اندازه ۷۲۴ پیکسل یا ۱۱۷۰ پیکسل را، بسته به اندازهٔ صفحهٔ شما، انتخاب می‌کند. اگر اندازه صفحهٔ شما از ۷۶۷ پیکسل کوچک‌تر باشد، ستون‌ها بر روی هم و به‌صورت عمودی و متحرک قرار می‌گیرند.

۱
۱
۱
۱
۱
۱
۱
۱
۱
۲
۳
۴
۴
۵
۹

اچ‌تی‌ام‌ال شبکه پایه

برای ساخت یک لایه دو ستونه ساده، از کلاس .row و اعداد مناسب برای ستون‌ها .span* استفاده می‌کنیم. از آن‌جایی که شما از شبکهٔ ۱۲ستونه استفاده می‌کنید، توجه کنید که مجموع اعداد ستون‌ها باید ۱۲ باشد.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

در این مثال، ما .span4 و .span8 را داریم که مجموع آن‌ها ۱۲ ستون است و یک ردیف کامل را برای ما می‌سازد.

جدا کردن ستون‌ها از یکدیگر

برای حرکت دادن ستون‌ها به چپ از کلاس‌های .offset* استفاده می‌کنیم. هر کلاس حاشیهٔ راستی به اندازه یک ستون به طرف چپ ایجاد می‌کند .برای مثال، .offset4 به اندازه ۴ ستون .span4 آن را حرکت می‌دهد.

۴
ستون به اندازه ۳ و فاصله ۲
ستون به‌اندازه ۳ و فاصله ۱
ستون به‌اندازه ۳ و فاصله ۲
ستون به‌اندازه ۶ و فاصله ۳
<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

ستون‌های تودرتو

برای قرار دادن ستون در داخل شبکهٔ پیش‌فرض، یک ردیف جدید .row ایجاد کنید و یک .span* ستونه در داخل ستون .span* دیگر قرار دهید.

سطح ۱ ستون
سطح ۲
سطح ۲ 
<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">سطح ۲</div>
      <div class="span3">سطح ۲</div>
    </div>
  </div>
</div>

سامانه شبکه‌ای متحرک

نمونه‌ای زنده از شبکه متحرک

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

۱
۱
۱
۱
۱
۱
۱
۱
۱
۱
۱
۱
۴
۴
۴
۴
۸
۶
۶
۱۲

اچ‌تی‌ام‌ال پایه برای استفاده از شبکه متحرک

برای استفاده از شبکه متحرک هر ردیف را از .row به .row-fluid تغییر دهید. کلاس‌های ستون به‌مانند قبل است و تغییری نمی‌کند، این امکان تغییر به شبکه ثابت و متحرک را آسان می‌کند.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

جابه‌جایی شبکه متحرک

این عمل هم به‌مانند جابه‌جایی سامانه شبکه‌ای ثابت است. با اضافه کردن .offset* به هر ستون جابه‌‌جایی اعمال می‌شود.

۴
ستون به اندازه ۴ و فاصله ۴
ستون به‌اندازه ۲ و فاصله ۳
ستون به‌اندازه ۳ و فاصله ۳
ستون به‌اندازه ۶ و فاصله ۶
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

ردیف‌های تودرتو در شبکه متحرک

ردیف‌های تودرتو در شبکه متحرک مقداری با ثابت فرق می‌کند: هر سطح تودرتوی ستون‌ها تا ۱۲ ستون را در خود جای می‌دهند. این به خاطر این‌است که شبکه‌بندی متحرک از درصد به‌جای پیکسل برای عرض استفاده می‌کند.

متحرک ۱۲
متحرک ۶
متحرک ۶
متحرک ۶
متحرک ۶ 
<div class="row-fluid">
  <div class="span12">
    متحرک ۱۲
    <div class="row-fluid">
      <div class="span6">
        متحرک ۶
        <div class="row-fluid">
          <div class="span6">متحرک ۶</div>
          <div class="span6">متحرک ۶</div>
        </div>
      </div>
      <div class="span6">متحرک ۶</div>
    </div>
  </div>
</div>

لایه‌ها

لایه ثابت

برای ایجاد یک لایه با عرض ثابت (می‌تواند پاسخگو نیز باشد) از <div class="container"> استفاده می‌کنیم.

<body>
  <div class="container">
    ...
  </div>
</body>

لایه متحرک

برای ساخت یک لایه متحرک، که دارای دو ستون باشد از <div class="container-fluid"> استفاده می‌کنیم. این نوع لایه برای برنامه‌ها و نوشته‌ها مناسب است.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--محتویات نوار کناری-->
    </div>
    <div class="span10">
      <!--محتویات بدنه-->
    </div>
  </div>
</div>

طراحی پاسخگو

فعال کردن ویژگی پاسخگو

با قرار دادن تگ‌های فراداده و قرار دادن سی‌اس‌اس مورد نظر در تگ <head> قابلیت پاسخگو را شما فعال می‌کنید. اگر بوت‌استرپ را از صفحه سفارشی کامپایل کرده باشید شما فقط نیاز دارید که تگ فراداده را قرار دهید.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

توجه کنید! بوت‌استرپ به‌صورت پیش‌فرض قابلیت پاسخگو را فعال نمی‌کند. به‌جای آن توسعه‌دهندگان را تشویق می‌کند که در هنگام نیاز از این ویژگی استفاده کنند.

درباره بوت‌استرپ پاسخگو

Responsive devices

درخواست‌ها براساس چندین پارامتر نظیر نسبت، عرض و نوع صفحه نمایش، سی‌اس‌اس را تغییر می‌دهد که معمولا دو پارامتر min-width و max-width تاثیر بیشتری دارند.

  • اندازه عرض ستون در سامانه شبکه‌ای تغییر می‌کند
  • اجزای متحرک بر روی یکدیگر قرار می‌گیرند
  • تیترها و متون برای وسایل و صفحه نمایش‌های مختلف به اندازه مناسب تغییر می‌کنند

از ویژگی پاسخگو زمانی استفاده کنید که قصد اجرای نرم‌افزارتان را بر روی دستگاه‌های موبایل را دارید. برای پروژه‌های بزرگ از کدهای اختصاصی استفاده کنید و از یک لایه برای همهٔ اندازه‌های تصویر استفاده نکنید.

وسایل پشتیبانی‌شده

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

برچسب عرض لایه عرض ستون عرض Gutter
صفحه نمایش‌های بزرگ ۱۲۰۰ پیکسل و بالاتر از آن ۷۰ پیکسل ۳۰ پیکسل
پیش‌فرض ۹۸۰ پیکسل و بالاتر ۶۰ پیکسل ۲۰ پیکسل
تبلت‌های پورتره ۷۶۸ پیکسل و بالاتر ۴۲ پیکسل ۲۰ پیکسل
تلفن‌ها تا تبلت‌ها ۷۶۷ پیکسل و پایین‌تر ستون‌های متحرک، عرض ثابتی ندارند
تلفن‌ها ۴۸۰ پیکسل و پایین‌تر ستون‌های متحرک، عرض ثابتی ندارند 
/* دسکتاپ‌های بزرگ */
@media (min-width: 1200px) { ... }

/* تبلت‌های پورتره تا تا منظره‌ای و دسکتاپ‌ها */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* تلفن‌های منظره‌ای تا تبلت‌های پورتره */
@media (max-width: 767px) { ... }

/* تلفن‌های منظره‌ای و پایین‌تر از آن */
@media (max-width: 480px) { ... }

کلاس‌های کمکی پاسخگو

برای توسعه سریع‌تر بر روی موبایل، از این کلاس‌های کمکی برای نمایش و مخفی کردن محتوا براساس وسیله موردنظر استفاده کنید. در زیر کلاس‌های موجود و تاثیرشان بر لایه، براساس یک درخواست از یک وسیله خاص قرار دارند. این کلاس‌ها در فایل responsive.less هستند.

کلاس تلفن‌ها ۷۶۷ پیکسل و پایین‌تر تبلت‌ها ۹۷۹ پیکسل تا ۷۶۸ پیکسل دسکتاپ‌ها پیش‌فرض
.visible-phone نمایان
.visible-tablet نمایان
.visible-desktop نمایان
.hidden-phone نمایان نمایان
.hidden-tablet نمایان نمایان
.hidden-desktop نمایان نمایان

چه موقعی استفاده کنیم؟

در مواقع محدود و برای جلوگیری از ایجاد چندین نسخه برای یک وب‌سایت، از ویژگی پاسخگو استفاده کنید. ابزار پاسخگو نباید با جدول‌ها استفاده شود.

ابزار تست پاسخگو

اندازه مرورگرتان را تغییر دهید یا این صفحه را در یک وسیله دیگر مانند تبلت باز کنید.

نمایان بر روی...

علامت سبز نشانهٔ آن است که کلاس موردنظر بر روی این صفحه نمایش قابل دیدن است.

  • تلفن✔ تلفن
  • تبلت✔ تبلت
  • دسکتاپ✔ دسکتاپ

مخفی بر روی...

این‌جا، علامت‌های سبز نشان می‌دهد که کلاس مورد نظر بر روی این صفحه‌ها نمایش‌ها مخفی هستند.

  • تلفن✔ تلفن
  • تبلت✔ تبلت
  • دسکتاپ✔ دسکتاپ