نام کاربری
  • برای صفحاتی که باید جستجو انجام شود تا صفحه بارگذاری شود، از فرم سطری در ابتدای صفحه با خط جداکننده استفاده شود. (راهنمای فرم سطری) (نمونه)
  • دکمه هایی که پس از جستجو فعال می شوند سمت چپ فرم جستجو قرار گیرند. (نمونه)
  • دکمه هایی که پس از انجام عملیات در صفحه کلیک می شوند در footer کاشی قرار گیرد. (نمونه)
  • برای صفحاتی که به صورت جدول هستند و فرمی برای ویرایش یا افزودن دارند:
    • از دو کاشی مجزا برای فرم و فیلد استفاده شود.
    • فرم به صورت ستونی قرار گیرد.
    • کاشی فرم قابلیت کوچک نمایی داشته باشد. (راهنما)
    • کاشی فرم های کم کاربرد به صورت پیش فرض بسته باشد.
    • عنوان کاشی فرم: «افزودن/ویرایش ...» و عنوان کاشی جدول: «لیست ...»
    • برای صفحات خاص (مثل کیت) که فرم بسیار پیچیده است، از صفحه مجزا استفاده شود.
  • برای صفحاتی که غیر از افزودن یا ویرایش کاشی دیگری دارند (مثل تخصیص روش به تست) از مدال برای فرم استفاده شود.
  • ترجیحا کاشی ها عنوان داشته باشد.
  • برای تمام منوهای انتخابی از پلاگین Select2 استفاده شود.
  • جلوی label هر فیلد در تمام فرم ها از «:» استفاده شود.
  • برای آدرس از فیلد textarea استفاده شود.
  • دکمه های تأیید و انصراف فرم یا مدال باید از چپ به راست و نخست تأیید قرار گیرد.
  • دکمه تأیید، افزودن، ارسال و ... با عرض متوسط (btn-medium) و انصراف و ... با عرض کوچک (btn-small) باشد.
  • فیلدهای روبرو در فرم ها به همراه آیکن باشند: ایمیل، تاریخ، تلفن
  • برای فرم های بزرگ که تعدادی از فیلدها اجباری نبوده و کم کاربرد هستند، از دکمه نمایش بیشتر استفاده شود. (راهنما)
  • برای فرم های نمایشی از کلاس bg-info-light برای رنگ پس زمینه و مشخصه readonly برای فیلدها استفاده شود.
  • در فرم جستجو برای تعیین نوع جستجو از منوی انتخابی و کلاس select-inline استفاده شود. (نمونه)
  • تمام دکمه ها در جدول باید به صورت منوی شناور باشد. (راهنمای منوی شناور)
  • برای فیلتر کردن یک ستون از جدول از منوی انتخابی پیش از فیلد جستجوی جدول استفاده شود. (راهنما)
  • در صورت استفاده از مدال برای فرم افزودن، دکمه افزودن در نوار ابزار جدول قرار گیرد.
  • دکمه های حذف و ویرایش علاوه بر منوی شناور در نوار ابزار جدول نیز قرار گیرد. ترتیب قرار گیری دکمه ها از راست به چپ به این صورت باید باشد: افزودن، ویرایش، حذف.
  • قابلیت select برای جدول هایی استفاده شود که امکان حذف دارند. در این صورت دکمه حذف و ویرایش در نوار ابزار هم قرار گیرد.
  • برای فعال سازی دکمه انتخاب همه از این تابع استفاده شود.
  • برای دکمه های روبرو فقط از آیکن استفاده شود: پرینت، ذخیره، افزودن، ویرایش، حذف، جستجو
  • برا فعال / غیر فعال کردن (مثلا یک نمونه کنترل) از دکمه دوحالته استفاده شود نه چکباکس. (نمونه)
  • لینک به صفحات دیگر از این الگو استفاده شود.
  • تمام دکمه ها به رنگ primary باشد مگر موارد زیر:
    • دکمه های تأیید، ثبت و ...: success
    • دکمه تأیید عملیات حذف: danger
    • دکمه های انصراف یا بستن: light
  • دکمه تأیید، افزودن، ارسال و ... با عرض متوسط (btn-medium) و انصراف و ... با عرض کوچک (btn-small) باشد.
  • دکمه هایی که پس از جستجو فعال می شوند سمت چپ فرم جستجو قرار گیرند. (نمونه)
  • دکمه هایی که پس از انجام عملیات در صفحه کلیک می شوند در footer کاشی قرار گیرد. (نمونه)