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

جنگو

سلام

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

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

myproject/settings.py

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

templates/new_topic.html

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

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

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

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

templates/new_topic.html

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

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

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

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

 

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

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

بدون دیدگاه

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

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

جنگو
ویوی شروع بازیابی پسورد

سلام نوشتن فایل قالب به ترتیب زیر: templates/password_reset_done.html {% extends ‘base_accounts.html’ %} {% block title %}Reset your password{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-4 col-md-6 col-sm-8″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Reset your password</h3> <p>Check your email for a link to reset your password. If …

جنگو
ویوی بازیابی پسورد

سلام فایل زیر را ویرایش می کنیم. templates/password_reset.html {% extends ‘base_accounts.html’ %} {% block title %}Reset your password{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-4 col-md-6 col-sm-8″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Reset your password</h3> <p>Enter your email address and we will send you a link …

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

سلام بازیابی پسورد به چهار ویو احتیاج دارد. یک صفحه با یک فرم برای شروع پروسه یک صفحه که به کاربر نشان دهد بازیابی پسورد شروع شده و مثلاً لازم است اسپم ایمیل خود را هم چک کند. صفحه ای برای چک توکن ارسال‌شده توسط ایمیل صفحه ای که به …

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