صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
Buttons و Button Group در Bootstrap
دکمه‌ها تقریباً در تمام وب‌سایت‌ها و برنامه‌های تحت وب وجود دارند. از دکمه‌های ساده مانند «ثبت»، «ورود» و «لغو» گرفته تا دکمه‌های پیچیده‌تر مانند «افزودن به سبد خرید»، «ویرایش»، «حذف»، «دانلود» و «ارسال فرم». در Bootstrap مجموعه‌ای کامل از کلاس‌ها برای ساخت دکمه‌های استاندارد، رنگی، Outline، بزرگ، کوچک، غیرفعال و گروه‌بندی‌شده وجود دارد. در این مقاله ابتدا ساختار Button در Bootstrap را یاد می‌گیریم، سپس انواع رنگ‌ها، اندازه‌ها، Outline، لینک‌ها، حالت Disabled و Loading را بررسی می‌کنیم و در ادامه با Button Group و ساخت دکمه‌های کاربردی در پروژه‌های واقعی آشنا می‌شویم.
فرم‌ها در Bootstrap
فرم‌ها بخش جدایی‌ناپذیر بسیاری از وب‌سایت‌ها و برنامه‌های تحت وب هستند. ثبت‌نام، ورود، جستجو، ثبت سفارش، ارسال پیام، ایجاد محصول، ویرایش اطلاعات کاربر و بسیاری از عملیات دیگر از طریق فرم انجام می‌شوند. Bootstrap مجموعه‌ای از کلاس‌ها و Componentهای آماده برای طراحی فرم‌های حرفه‌ای و Responsive در اختیار ما قرار می‌دهد. با استفاده از این امکانات می‌توانیم ظاهر Inputها، Labelها، Selectها، Checkboxها، Radioها، Textareaها و دکمه‌های فرم را بدون نوشتن مقدار زیادی CSS مدیریت کنیم. در این مقاله ابتدا ساختار پایه فرم در Bootstrap را یاد می‌گیریم و سپس به سراغ انواع Input، اندازه‌ها، Select، Checkbox، Radio، Range، File Input، Input Group، Floating Labels، Validation و در نهایت ساخت یک فرم واقعی ثبت‌نام می‌رویم.
جداول در Bootstrap
در بسیاری از وب‌سایت‌ها و پنل‌های مدیریتی، لازم است اطلاعات مختلف را به شکل منظم و قابل خواندن به کاربر نمایش دهیم. برای مثال، در یک فروشگاه اینترنتی ممکن است بخواهیم لیست محصولات، قیمت، موجودی و وضعیت هر محصول را نمایش دهیم یا در یک پنل مدیریت کاربران، نام، ایمیل، تاریخ ثبت‌نام و وضعیت حساب کاربران را نشان دهیم. HTML به‌صورت پیش‌فرض امکان ساخت جدول را در اختیار ما قرار می‌دهد، اما Bootstrap مجموعه‌ای از کلاس‌های آماده برای زیباتر کردن، مرتب‌سازی، واکنش‌گرا کردن و مدیریت بهتر جدول‌ها ارائه می‌کند. در این مقاله با ساخت جدول در Bootstrap، کلاس‌های مختلف برای رنگ‌بندی، حاشیه، ردیف‌های راه‌راه، حالت Hover، جدول‌های کوچک و مهم‌تر از همه جدول‌های Responsive آشنا می‌شویم. همچنین در پایان یک جدول واقعی شبیه جدول‌های مورد استفاده در پنل‌های مدیریتی ایجاد خواهیم کرد.
کامپوننت‌ها در Bootstrap
تا اینجا با بخش‌های پایه Bootstrap مانند Container، Grid، Typography، Utilities، تصاویر، دکمه‌ها، فرم‌ها و جدول‌ها آشنا شدیم. اما Bootstrap فقط مجموعه‌ای از کلاس‌های CSS برای تغییر رنگ و فاصله نیست. یکی از مهم‌ترین ویژگی‌های آن وجود Componentهای آماده برای ساخت رابط کاربری است. Componentها اجزای نسبتاً کامل و قابل استفاده‌ای هستند که می‌توانند بخش‌هایی مانند پیام‌های اطلاع‌رسانی، کارت‌های محتوا، منوها، لیست‌ها، نشانگرهای وضعیت و بسیاری از قسمت‌های دیگر یک وب‌سایت یا پنل مدیریت را تشکیل دهند. استفاده صحیح از این Componentها باعث می‌شود سرعت توسعه بیشتر شود و ظاهر قسمت‌های مختلف سایت نیز هماهنگ باقی بماند. در این مقاله با مفهوم Component در Bootstrap آشنا می‌شویم، نحوه استفاده از Componentهای مختلف را یاد می‌گیریم و در پایان چند Component را با یکدیگر ترکیب می‌کنیم تا یک بخش واقعی از یک پنل مدیریتی بسازیم.
Navigation و Responsive Design در Bootstrap
تقریباً هر وب‌سایت حرفه‌ای به یک سیستم Navigation یا ناوبری نیاز دارد تا کاربر بتواند به بخش‌های مختلف سایت دسترسی پیدا کند. منوی اصلی، لینک‌های صفحات، منوی حساب کاربری، دسته‌بندی‌ها و حتی منوی موبایل همگی بخشی از سیستم Navigation هستند. اگر این منوها در صفحه‌های مختلف به‌درستی نمایش داده نشوند، کاربر تجربه خوبی نخواهد داشت؛ به‌خصوص زمانی که سایت روی موبایل یا تبلت باز می‌شود. Bootstrap مجموعه‌ای از کلاس‌ها و Componentهای آماده برای ساخت Navigation و Navbar در اختیار ما قرار می‌دهد و امکان ایجاد منوهای Responsive را بدون نوشتن مقدار زیادی CSS فراهم می‌کند. در این مقاله ابتدا با مفهوم Navigation آشنا می‌شویم، سپس ساخت Nav ساده، لینک‌های فعال، Navهای مختلف، Navbar، Brand، منوی موبایل، Dropdown و ساخت یک Header Responsive را بررسی می‌کنیم. در پایان نیز یک Header واقعی برای یک وب‌سایت ایجاد خواهیم کرد.
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 ایجاد می‌کنیم.