صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش Bootstrap
۲۴ مقاله
JavaScript Components در Bootstrap
تا اینجا بیشتر با بخش‌هایی از Bootstrap کار کردیم که ظاهر عناصر صفحه را کنترل می‌کردند؛ مانند Grid، Button، Form، Table، Card و Navigation. اما بسیاری از رابط‌های کاربری مدرن فقط به ظاهر ثابت نیاز ندارند و باید بتوانند به تعامل کاربر پاسخ دهند. برای مثال، ممکن است بخواهیم با کلیک روی یک دکمه یک پنجره باز شود، یک منو نمایش داده شود، یک بخش از صفحه باز و بسته شود، یک پیام برای چند ثانیه ظاهر شود یا هنگام قرار گرفتن ماوس روی یک عنصر، توضیحی نمایش داده شود. Bootstrap برای بسیاری از این نیازها JavaScript Componentهای آماده دارد. این Componentها معمولاً همراه با HTML و کلاس‌های Bootstrap استفاده می‌شوند و بدون اینکه مجبور باشیم برای هر رفتار ساده JavaScript زیادی بنویسیم، قابلیت‌های تعاملی در اختیار ما قرار می‌دهند. در این مقاله با نحوه فعال‌سازی JavaScript Bootstrap، مفهوم Data Attributes، Componentهای تعاملی مهم، روش باز و بسته کردن آنها و نکات مهم استفاده از آنها آشنا می‌شویم.
فارسی‌سازی Bootstrap
بیشتر صفحات وب در ابتدا برای زبان‌هایی مانند انگلیسی طراحی شده‌اند که جهت نوشتار آنها از چپ به راست یا LTR (Left To Right) است؛ اما زبان‌هایی مانند فارسی و عربی دارای جهت نوشتار RTL (Right To Left) هستند. زمانی که با Bootstrap برای ساخت یک سایت فارسی کار می‌کنیم، تنها ترجمه کردن متن‌ها کافی نیست و باید جهت کلی صفحه، فاصله‌ها، چینش ستون‌ها، فرم‌ها، منوها، جداول، دکمه‌ها و بسیاری از جزئیات رابط کاربری نیز با جهت راست به چپ هماهنگ شوند. Bootstrap از RTL پشتیبانی می‌کند و با استفاده از نسخه RTL فایل CSS می‌توان بسیاری از این تغییرات را بدون نوشتن CSS پیچیده انجام داد. در این مقاله یاد می‌گیریم چگونه Bootstrap را برای یک سایت فارسی آماده کنیم، چه تفاوتی بین نسخه معمولی و RTL وجود دارد، چگونه از dir="rtl" و lang="fa" استفاده کنیم، چگونه فاصله‌ها و تراز متن را به شکل صحیح مدیریت کنیم، چگونه Navbar و فرم‌های فارسی بسازیم و در نهایت یک صفحه واقعی و Responsive فارسی با Bootstrap ایجاد خواهیم کرد.
شخصی‌سازی Bootstrap با Sass
یکی از دلایل محبوبیت Bootstrap این است که مجموعه بزرگی از کلاس‌ها و کامپوننت‌های آماده را در اختیار توسعه‌دهنده قرار می‌دهد؛ اما در یک پروژه واقعی معمولاً نمی‌خواهیم تمام سایت‌ها دقیقاً شبیه یکدیگر باشند. ممکن است رنگ سازمانی یک سایت آبی باشد، سایت دیگری از رنگ نارنجی استفاده کند، اندازه گوشه‌های کارت‌ها متفاوت باشد یا بخواهیم ظاهر دکمه‌ها، فاصله‌ها، فونت‌ها و کامپوننت‌های Bootstrap را مطابق طراحی اختصاصی پروژه تغییر دهیم. در چنین شرایطی فقط استفاده از کلاس‌های آماده Bootstrap کافی نیست و باید با روش‌های Customization و Sass آشنا شویم. Bootstrap از Sass برای مدیریت بسیاری از متغیرها، توابع و استایل‌های داخلی خود استفاده می‌کند و به ما اجازه می‌دهد قبل از تولید CSS نهایی، بخش‌هایی از Bootstrap را مطابق نیاز پروژه تغییر دهیم. در این مقاله ابتدا مفهوم شخصی‌سازی Bootstrap را بررسی می‌کنیم، سپس با تفاوت CSS و Sass آشنا می‌شویم، متغیرهای Bootstrap را بررسی می‌کنیم، یک پروژه Sass ساده ایجاد می‌کنیم، رنگ‌های اصلی Bootstrap را تغییر می‌دهیم، کامپوننت‌هایی مانند Button و Card را شخصی‌سازی می‌کنیم و در نهایت یک ساختار مناسب برای استفاده از Bootstrap در پروژه‌های واقعی ایجاد خواهیم کرد.
Bootstrap Icons و استفاده از آیکون‌ها
آیکون‌ها یکی از عناصر مهم در طراحی رابط کاربری هستند و می‌توانند درک بخش‌های مختلف یک وب‌سایت را برای کاربر ساده‌تر کنند. برای مثال، یک آیکون جستجو می‌تواند مفهوم جستجو را بدون نیاز به توضیح طولانی منتقل کند، آیکون سبد خرید می‌تواند کاربر را به بخش خرید هدایت کند و آیکون ویرایش یا حذف می‌تواند عملکرد یک دکمه را سریع‌تر قابل تشخیص کند. Bootstrap در کنار فریم‌ورک CSS خود، مجموعه‌ای از آیکون‌های متن‌باز به نام Bootstrap Icons نیز ارائه می‌کند که شامل تعداد زیادی آیکون آماده در قالب SVG و فونت آیکون است. در این مقاله یاد می‌گیریم Bootstrap Icons چیست، چگونه آن را به پروژه اضافه کنیم، چگونه یک آیکون را نمایش دهیم، اندازه و رنگ آن را تغییر دهیم، از آیکون‌ها داخل Button و Navbar و Card استفاده کنیم، آیکون‌های مناسب برای رابط RTL انتخاب کنیم، از SVG به شکل مستقیم استفاده کنیم و در نهایت یک صفحه کاربردی با Bootstrap و Bootstrap Icons ایجاد کنیم.
Flexbox و Grid پیشرفته در Bootstrap
در مقالات قبلی با سیستم Grid و تعدادی از Utilityهای Bootstrap آشنا شدیم و یاد گرفتیم چگونه عناصر را در ستون‌های مختلف قرار دهیم و صفحات Responsive بسازیم. اما در پروژه‌های واقعی معمولاً با Layoutهایی روبه‌رو می‌شویم که فقط با قرار دادن چند col ساده کامل نمی‌شوند. ممکن است بخواهیم یک کارت را دقیقاً در وسط قرار دهیم، چند دکمه را در انتهای یک ردیف نگه داریم، ارتفاع چند کارت را یکسان کنیم، ترتیب عناصر را در موبایل تغییر دهیم، یک Sidebar در کنار محتوای اصلی داشته باشیم یا داخل یک ستون دوباره یک Grid جداگانه ایجاد کنیم. Bootstrap برای انجام این کارها از امکانات قدرتمند Flexbox و CSS Grid استفاده می‌کند. در این مقاله ابتدا مفهوم Flexbox را بررسی می‌کنیم، سپس با کلاس‌های Flex در Bootstrap مانند d-flex ، flex-row ، flex-column ، justify-content-* و align-items-* کار خواهیم کرد. بعد از آن سراغ Grid پیشرفته، Nested Grid، Offset، Order، Alignment، Auto Columns و ترکیب Grid و Flexbox می‌رویم و در نهایت چند Layout واقعی و Responsive ایجاد می‌کنیم.
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 و اشتباهات رایج آنها آشنا می‌شویم.