زیباسازی فرم ها با Bootstrap

جنگو

سلام

برای کار با کتابخانه‌های Front-End مثل Bootstrap لازم است تا از پکیچِ django-widget-tweaks در جنگو استفاده کنیم. اول باید آن را نصب کنیم:

مثل همیشه باید به لیست برنامه‌ها اضافه شود:

myproject/settings.py

حالا در برنامۀ خود از آن استفاده می کنیم:

templates/new_topic.html

در ابتدا باید آن را در برنامه لود کنیم . این کار با استفاده از تگِ قالبِ  {% load widget_tweaks %}  انجام می شود. نحوۀ بکارگیری از آن نیز به این شکل است:

تگِ render_field  بخشی از جنگو نبوده و داخل پکیجی است که آن را نصب کرده‌ایم.

برای استفاده از این تگ باید دو پارامتر را تنظیم کنیم. اولین پارامتر  مربوط به فیلدهای یک فرم و دومین پارامتر مربوط به تنظیم ویژگی‌های آن در HTML است. برخی از مثال های تگ render_field  را در زیر  می بینیم.

سپس برای استفاده از تگ‌های مربوط به اعتبارسنجی در بوت استرپ باید فایل new_topic.html را ویرایش کنیم.

templates/new_topic.html

که در این حالت خروجی به شکل زیر تغییر می کند:

برای فرم بالا سه حالت در زمان rendering وجود دارد:

  • Initial state: حالت اولیه بوده و درون فرم هیچ دیتایی وجود ندارد.
  • Invalid: زمانی که داده ها معتبر نباشند از کلاس .is-invalid در CSS استفاده و پیام خطای مربوط به آن نیز در کلاس .invalid-feedback پیاده سازی شده و کادر مربوط به آن به رنگ قرمز در می‌آید.
  • Valid: در حالت معتبر بودن ورودی‌ها، از کلاس .is-valid در CSS استفاده شده و کادر مربوط به آن فیلد به رنگ سبز در می آید.

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی:قالب‌های فرم با قابلیت استفادۀ مجدد یا Reusable Forms Templates

مطلب قبلی:پیاده‌سازی فرم ها به شیوۀ استاندارد

بدون دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
پیکربندی گواهینامۀ https

سلام حالا می خواهیم برنامۀ خودمان را با گواهینامۀ https امن کنیم. ساده ترین کار برای انجام آن Let’s Encrypt است. قبل از Let’s Encrypt هرگز تنظیمات https به این راحتی نبوده و مهمتر اینکه اینکار کاملاً رایگان است. آن ها راه حلی به نام certbot را ارائه داده اند …

جنگو
پیکربندی سرویس ایمیل

سلام یکی از بهتر سرویس دهنده های ایمیل Mailgun با قابلیت ۱۲ هزار ایمیل رایگان در ماه است. به صورت رایگان ثبت نام کنید. برای اینکار باید آن را با سرویس دهندۀ دامین خود تنظیم کنید که در این آموزش از tamadon.org استفاده شده است. حالا اولین رکورد DNS را …

جنگو
پیکربندی NGINX

سلام کار بعدی که قرار است انجام شود؛ تنظیمان Nginx به شکلی است که پاسخگویی و سرویس دهی مربوط به فایل های استاتیک را خود انجام دهد و سایر درخواست ها را به Gunicorn بفرستد. یک فایل پیکربندی با نام boards را درون /etc/nginx/sites-available/ و با محتوای زیر اضافه می …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.