صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش Bootstrap
۲۴ مقاله
آشنایی و نصب Bootstrap
اگر بخواهیم یک صفحه وب حرفه‌ای طراحی کنیم، تنها نوشتن HTML کافی نیست. برای اینکه صفحه ظاهر مناسبی داشته باشد، در اندازه‌های مختلف صفحه‌نمایش به‌درستی نمایش داده شود و ساختن بخش‌هایی مانند دکمه، فرم، منو، کارت و پنل‌های مختلف سریع‌تر شود، معمولاً به یک CSS Framework نیاز داریم. Bootstrap یکی از شناخته‌شده‌ترین فریم‌ورک‌های Front-End برای طراحی رابط کاربری وب است که مجموعه‌ای بزرگ از کلاس‌های آماده CSS، ابزارهای کاربردی و کامپوننت‌های JavaScript را در اختیار توسعه‌دهنده قرار می‌دهد. در این دوره از مفاهیم پایه شروع می‌کنیم و قدم‌به‌قدم به ساخت رابط‌های کاربری واقعی و Responsive با Bootstrap می‌رسیم.
Container و Grid در Bootstrap
در مقاله قبل با Bootstrap آشنا شدیم و یاد گرفتیم چگونه آن را به یک صفحه HTML اضافه کنیم. یکی از مهم‌ترین ویژگی‌های Bootstrap، سیستم Grid آن است که به ما اجازه می‌دهد محتوای صفحه را به شکل منظم و Responsive در ستون‌های مختلف قرار دهیم. در این مقاله با مفاهیم Container، Row و Column آشنا می‌شویم و یاد می‌گیریم چگونه Layout صفحات وب را با Bootstrap ایجاد کنیم. در پایان مقاله می‌توانیم ساختارهایی مانند چند ستون کنار هم، کارت‌های Responsive، بخش‌های مختلف یک صفحه و Layoutهای متناسب با موبایل، تبلت و دسکتاپ ایجاد کنیم.
Typography و Utilities در Bootstrap
در مقاله قبل با Container و Grid System آشنا شدیم و یاد گرفتیم چگونه ساختار کلی یک صفحه را با Row و Column ایجاد کنیم. اما بعد از ساخت Layout، معمولاً لازم است ظاهر محتوای داخل آن را نیز کنترل کنیم؛ برای مثال اندازه و وزن متن، تراز کردن نوشته‌ها، فاصله بین عناصر، نمایش یا مخفی کردن یک عنصر و بسیاری موارد دیگر. Bootstrap برای این کار مجموعه بزرگی از Utility Classes و ابزارهای آماده در اختیار ما قرار می‌دهد. در این مقاله ابتدا با Typography آشنا می‌شویم و سپس مهم‌ترین Utility Classهای Bootstrap را با مثال‌های عملی بررسی می‌کنیم.
رنگ‌ها، فاصله‌ها و Layout در Bootstrap
در دو مقاله قبلی با Grid، Typography و Utility Classes آشنا شدیم. حالا وقت آن است که کنترل بیشتری روی ظاهر و چیدمان عناصر صفحه داشته باشیم. در Bootstrap ابزارهای آماده‌ای برای رنگ متن، رنگ پس‌زمینه، فاصله‌ها، Display، Flexbox، Alignment، Position و اندازه عناصر وجود دارد. این ابزارها به ما اجازه می‌دهند بسیاری از Layoutهای رایج را بدون نوشتن CSS اختصاصی ایجاد کنیم. در این مقاله ابتدا سیستم رنگ Bootstrap را بررسی می‌کنیم، سپس Spacing و در ادامه ابزارهای Layout را با مثال‌های عملی یاد می‌گیریم.
تصاویر و Media در Bootstrap
تصاویر یکی از مهم‌ترین عناصر هر وب‌سایت هستند و تقریباً در همه پروژه‌های واقعی از تصاویر استفاده می‌شود؛ از تصویر محصول و پروفایل کاربر گرفته تا تصاویر مقالات، بنرها، گالری‌ها و بخش‌های معرفی خدمات. اگر تصاویر را به شکل صحیح در صفحه قرار ندهیم، ممکن است در نمایشگرهای کوچک از محدوده صفحه خارج شوند یا ظاهر نامناسبی ایجاد کنند. Bootstrap مجموعه‌ای از کلاس‌های آماده برای مدیریت تصاویر و Media در اختیار ما قرار می‌دهد. در این مقاله یاد می‌گیریم چگونه تصاویر را Responsive کنیم، گوشه‌های آن‌ها را گرد کنیم، Border و Thumbnail ایجاد کنیم، از Figure استفاده کنیم و در نهایت یک بخش تصویری واقعی و Responsive بسازیم.
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 واقعی برای یک وب‌سایت ایجاد خواهیم کرد.