صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
Card، List Group و Badge در Bootstrap
در طراحی رابط کاربری، معمولاً لازم است اطلاعات مختلف را به شکل مرتب و قابل فهم نمایش دهیم. برای مثال ممکن است بخواهیم مشخصات یک محصول، اطلاعات یک کاربر، قیمت یک سرویس، فهرستی از فعالیت‌های اخیر یا وضعیت یک سفارش را نمایش دهیم. اگر این اطلاعات بدون ساختار مناسب در صفحه قرار بگیرند، رابط کاربری شلوغ و غیرحرفه‌ای خواهد شد. Bootstrap برای حل این مسئله کامپوننت‌هایی مانند Card ، List Group و Badge را در اختیار ما قرار می‌دهد. Card برای نمایش اطلاعات مرتبط در یک کادر مستقل بسیار کاربردی است، List Group برای نمایش مجموعه‌ای از آیتم‌ها و Badge برای نمایش وضعیت، برچسب، تعداد یا اطلاعات کوتاه استفاده می‌شود. در این مقاله ابتدا ساختار Card را یاد می‌گیریم، سپس با List Group و Badge آشنا می‌شویم و در ادامه این سه کامپوننت را با یکدیگر ترکیب می‌کنیم تا نمونه‌هایی شبیه بخش‌های واقعی یک سایت فروشگاهی، داشبورد مدیریتی و پنل کاربری ایجاد کنیم.
Alerts، Toasts و Progress در Bootstrap
در بسیاری از صفحات وب لازم است نتیجه یک عملیات یا وضعیت خاص را به کاربر اطلاع دهیم. برای مثال بعد از ثبت‌نام باید پیام موفقیت نمایش داده شود، هنگام حذف یک محصول باید هشدار مناسب نشان داده شود، اگر اطلاعات واردشده اشتباه باشد باید پیام خطا نمایش داده شود یا هنگام آپلود یک فایل میزان پیشرفت عملیات به کاربر نشان داده شود. Bootstrap برای این نیازها چند کامپوننت کاربردی در اختیار ما قرار می‌دهد. Alert برای نمایش پیام‌های مهم و قابل مشاهده در صفحه، Toast برای نمایش اعلان‌های کوتاه و موقتی و Progress برای نمایش میزان پیشرفت یک عملیات استفاده می‌شود. در این مقاله ابتدا Alertها را یاد می‌گیریم، سپس با انواع Toast و نحوه کنترل آن‌ها با JavaScript آشنا می‌شویم و در ادامه Progress Bar را بررسی می‌کنیم. در پایان نیز این سه کامپوننت را در یک سناریوی واقعی مانند داشبورد مدیریت و فرم آپلود فایل ترکیب خواهیم کرد.
Modal، Offcanvas و Collapse در Bootstrap
در بسیاری از رابط‌های کاربری لازم نیست برای هر عملیات یک صفحه جدید ایجاد کنیم. گاهی بهتر است یک فرم، پیام، منوی جانبی یا بخشی از اطلاعات را بدون ترک صفحه فعلی به کاربر نمایش دهیم. برای مثال هنگام حذف یک محصول می‌توانیم یک پنجره تأیید باز کنیم، هنگام مشاهده جزئیات یک محصول اطلاعات آن را داخل یک پنجره بازشو نمایش دهیم، در موبایل می‌توانیم منوی اصلی را از کنار صفحه باز کنیم یا بخش‌هایی مانند توضیحات و سؤالات متداول را به صورت باز و بسته‌شونده نمایش دهیم. Bootstrap برای این نیازها سه کامپوننت مهم در اختیار ما قرار می‌دهد: Modal برای پنجره‌های بازشو، Offcanvas برای پنل‌هایی که از کنار یا جهت دیگری وارد صفحه می‌شوند و Collapse برای نمایش و مخفی کردن بخش‌های مختلف. هر سه کامپوننت به JavaScript Bootstrap وابسته‌اند و می‌توانند با Attributeهای data-bs-* یا API جاوااسکریپت کنترل شوند. در این مقاله ابتدا ساختار Modal را یاد می‌گیریم، سپس Offcanvas و Collapse را بررسی می‌کنیم و در پایان این سه کامپوننت را در سناریوهایی مانند حذف محصول، فرم ورود، Sidebar و FAQ به کار خواهیم برد.
Dropdown، Tooltip و Popover در Bootstrap
در رابط‌های کاربری واقعی معمولاً لازم نیست همه امکانات و اطلاعات را به‌صورت مستقیم روی صفحه نمایش دهیم. گاهی لازم است کاربر با کلیک روی یک دکمه، مجموعه‌ای از گزینه‌ها را مشاهده کند؛ گاهی هنگام قرار گرفتن ماوس روی یک دکمه یا آیکون، توضیح کوتاهی نمایش داده شود و در بعضی مواقع نیز لازم است اطلاعات بیشتری در کنار یک عنصر به کاربر ارائه کنیم. Bootstrap برای این نیازها کامپوننت‌هایی مانند Dropdown، Tooltip و Popover را در اختیار ما قرار می‌دهد. Dropdown بیشتر برای نمایش منو و مجموعه‌ای از عملیات استفاده می‌شود، Tooltip برای نمایش توضیح کوتاه و Popover برای نمایش اطلاعات کامل‌تر و تعاملی‌تر کاربرد دارد. در این مقاله ابتدا ساخت Dropdown را یاد می‌گیریم، سپس نحوه ایجاد Tooltip و Popover را بررسی می‌کنیم و در ادامه با JavaScript API، رویدادها، جهت نمایش، حالت‌های مختلف و نکات دسترس‌پذیری آشنا می‌شویم. در پایان نیز هر سه کامپوننت را در یک صفحه واقعی و Responsive با زبان فارسی و حالت RTL ترکیب خواهیم کرد.
Accordion، Carousel و Breadcrumb در Bootstrap
در طراحی صفحات وب حرفه‌ای، گاهی لازم است حجم زیادی از اطلاعات را بدون شلوغ کردن صفحه در اختیار کاربر قرار دهیم، گاهی به نمایش چند تصویر یا محتوای متوالی نیاز داریم و در بعضی صفحات نیز باید مسیر فعلی کاربر در ساختار سایت مشخص باشد. Bootstrap برای این نیازها کامپوننت‌هایی مانند Accordion، Carousel و Breadcrumb را ارائه می‌کند. Accordion برای ایجاد بخش‌های بازشونده و نمایش یا مخفی کردن محتوا بسیار مناسب است و در صفحات پرسش‌های متداول، تنظیمات و بخش‌های راهنما کاربرد زیادی دارد. Carousel برای نمایش مجموعه‌ای از تصاویر یا محتوا به‌صورت اسلایدی استفاده می‌شود و می‌توان برای آن کنترل، Indicator و قابلیت جابه‌جایی خودکار ایجاد کرد. Breadcrumb نیز مسیر قرارگیری کاربر در ساختار سایت را نشان می‌دهد و به‌خصوص در سایت‌های فروشگاهی، پنل‌های مدیریت و سایت‌های دارای دسته‌بندی‌های متعدد اهمیت زیادی دارد. در این مقاله ابتدا Accordion را از پایه ایجاد می‌کنیم، سپس Carousel را با حالت‌های مختلف بررسی می‌کنیم و در نهایت به سراغ Breadcrumb می‌رویم. در ادامه نیز هر سه کامپوننت را در یک صفحه واقعی و Responsive ترکیب خواهیم کرد و با نکات Accessibility و اشتباهات رایج آن‌ها آشنا می‌شویم.
Navbar حرفه‌ای و ساخت Header در Bootstrap
Header یکی از مهم‌ترین بخش‌های هر وب‌سایت است، زیرا معمولاً اولین قسمت صفحه‌ای است که کاربر با آن مواجه می‌شود و وظیفه آن می‌تواند شامل نمایش لوگو، منوی اصلی، جستجو، ورود و ثبت‌نام، اعلان‌ها، سبد خرید و سایر امکانات مهم سایت باشد. Bootstrap با ارائه کامپوننت Navbar و مجموعه بزرگی از Utilityها این امکان را فراهم می‌کند که بدون نوشتن مقدار زیادی CSS، Headerهایی حرفه‌ای و Responsive طراحی کنیم. در مقالات قبلی با Navbar، Dropdown، Collapse و Responsive Design آشنا شدیم؛ در این مقاله این مفاهیم را در کنار یکدیگر قرار می‌دهیم و یک Header واقعی می‌سازیم. ابتدا ساختار استاندارد Navbar را بررسی می‌کنیم، سپس Logo، منوی اصلی، Dropdown، Search، دکمه‌های ورود و ثبت‌نام، منوی موبایل، حالت Sticky، Headerهای چندبخشی و طراحی RTL را یاد می‌گیریم. در پایان نیز چند نمونه عملی از Header برای سایت شرکتی، فروشگاهی و پنل مدیریتی ایجاد خواهیم کرد تا بتوانیم از این ساختارها در پروژه‌های واقعی استفاده کنیم.
ساخت صفحات واقعی با Bootstrap
تا اینجا در مقالات قبلی Bootstrap با مفاهیم مختلفی مانند Container، Grid، Typography، Utilities، Buttons، Forms، Tables، Cards، Navbar، Modal، Offcanvas، Accordion، Carousel، Breadcrumb، Alert، Toast، Progress و قابلیت‌های Responsive آشنا شدیم. اما یادگیری Bootstrap زمانی ارزش واقعی پیدا می‌کند که بتوانیم این ابزارها را در کنار یکدیگر قرار دهیم و یک صفحه واقعی و قابل استفاده بسازیم. در این مقاله قرار است از حالت یادگیری تک‌تک Componentها خارج شویم و چند نمونه واقعی مانند صفحه اصلی یک شرکت، صفحه لیست محصولات، صفحه جزئیات محصول و صفحه ورود کاربر را طراحی کنیم. هدف این مقاله این است که یاد بگیریم قبل از نوشتن کد، ساختار صفحه را مشخص کنیم، سپس با Container و Grid Layout را بسازیم، با Utilityها فاصله‌ها و ظاهر را تنظیم کنیم، Componentهای مناسب را اضافه کنیم و در نهایت صفحه را برای موبایل، تبلت و دسکتاپ Responsive و برای زبان فارسی RTL آماده کنیم. همچنین در طول مقاله با نکات مهمی درباره Accessibility، SEO، Performance و سازمان‌دهی فایل‌های پروژه آشنا خواهیم شد.
ساخت یک پنل مدیریت Responsive با Bootstrap
تا اینجا تقریباً تمام ابزارهای اصلی Bootstrap را به‌صورت جداگانه و همچنین در قالب صفحات واقعی بررسی کرده‌ایم. اکنون زمان آن رسیده است که همه این مفاهیم را در یک پروژه کاربردی‌تر ترکیب کنیم: ساخت یک پنل مدیریت Responsive . پنل مدیریت یکی از رایج‌ترین رابط‌های کاربری در پروژه‌های واقعی است و معمولاً شامل Sidebar، Navbar، Dashboard، کارت‌های آماری، جدول اطلاعات، فرم‌ها، اعلان‌ها و بخش‌های مختلف مدیریتی است. در این مقاله یک ساختار واقعی برای پنل مدیریت ایجاد می‌کنیم و یاد می‌گیریم چگونه با استفاده از Grid، Flexbox، Navbar، Offcanvas، Card، Table، Badge، Button، Dropdown، Alert، Modal و Utilities یک داشبورد مدیریتی طراحی کنیم که در دسکتاپ Sidebar داشته باشد و در موبایل همان Sidebar به یک منوی Offcanvas تبدیل شود. همچنین درباره ساختار فایل‌ها، Responsive Design، RTL، Accessibility، جدول‌های مدیریتی، فرم‌های مدیریت اطلاعات، حذف رکوردها، وضعیت کاربران و نکات مهم برای تبدیل این قالب به یک پروژه واقعی با Backend صحبت خواهیم کرد.
پروژه نهایی Bootstrap
در مقالات قبلی تقریباً تمام ابزارهای مهم Bootstrap را از سطح مقدماتی تا پیشرفته بررسی کردیم؛ از Container و Grid گرفته تا Flexbox، Typography، Utilities، Forms، Tables، Cards، Navbar، Modal، Offcanvas، Accordion، Carousel، Breadcrumb، Dropdown، Tooltip، Popover، Alerts، Toasts و Progress . همچنین یاد گرفتیم چگونه صفحات واقعی مانند صفحه اصلی، صفحه محصولات، صفحه جزئیات محصول، صفحه ورود و یک پنل مدیریت Responsive طراحی کنیم. در این مقاله می‌خواهیم همه این آموخته‌ها را در قالب یک پروژه نهایی واقعی کنار هم قرار دهیم. پروژه‌ای که در این مقاله طراحی می‌کنیم یک فروشگاه اینترنتی ساده و Responsive است و شامل صفحه اصلی، Header، Hero، دسته‌بندی محصولات، لیست محصولات، فیلتر، صفحه جزئیات محصول، Carousel تصاویر، سبد خرید، فرم ورود و Footer خواهد بود. هدف این پروژه صرفاً نوشتن چند خط HTML نیست؛ بلکه می‌خواهیم فرآیند واقعی ساخت یک رابط کاربری با Bootstrap را یاد بگیریم: ابتدا ساختار پروژه را مشخص می‌کنیم، سپس Layout را با Grid و Flexbox می‌سازیم، Componentها را اضافه می‌کنیم، Responsive Design و RTL را پیاده می‌کنیم و در پایان Accessibility، SEO، Performance و آماده‌سازی برای اتصال به Backend را بررسی می‌کنیم. بعد از انجام این پروژه، شما باید بتوانید Bootstrap را در پروژه‌های واقعی مانند فروشگاه، سایت شرکتی، پنل مدیریت، سامانه خدماتی و بسیاری از پروژه‌های دیگر به کار ببرید.