BuiltWithBits
BuiltWithBits

اپیزود ۱۳ : طراحی Layout با Tailwind CSS در Laravel 11

در این اپیزود از سری آموزش های Laravel 11، نحوه طراحی Layout با استفاده از Tailwind CSS را به صورت عملی در پروژه خود یاد می گیریم. با ساخت Layout های شکیل و ریسپانسیو، ظاهر برنامه خود را به طور چشمگیری ارتقا می دهیم و تجربه کاربری بهتری را برای کاربران خود رقم می زنیم. مواردی که در این اپیزود آموزش داده می شود: - طراحی Layout اولیه برای موبایل: با استفاده از رویکرد "mobile-first" Tailwind CSS، ابتدا Layout را برای نمایش در دستگاه های موبایل بهینه می کنیم. - ایجاد کامپوننت های Layout: برای هر بخش از Layout (مانند هدر، محتوا، نوار کناری و فوتر) یک کامپوننت Vue جداگانه ایجاد می کنیم. - استفاده از اسلات ها برای محتوای پویا: از اسلات ها برای قرار دادن محتوای پویا در داخل کامپوننت های Layout خود استفاده می کنیم. - ایجاد Layout ریسپانسیو: با استفاده از کلاس های ریسپانسیو Tailwind CSS، Layout خود را برای نمایش در اندازه های مختلف صفحه نمایش تنظیم می کنیم. - ادغام Layout در صفحات مختلف: از Layout ساخته شده در صفحات مختلف برنامه خود استفاده می کنیم. لینک های مفید: - مستندات رسمی Tailwind CSS: https://tailwindcss.com/docs/installation - مستندات Vue.js: https://vuejs.org/guide/introduction.html - Github repo این اپیزود : https://github.com/unknownman/laravel-boilerplate-11/tree/13