DEV Community

Cover image for Laravel Jetstream ကို Bootstrap နဲ့ တွဲသုံးမယ်။
Pyae Sone Aung
Pyae Sone Aung

Posted on

Laravel Jetstream ကို Bootstrap နဲ့ တွဲသုံးမယ်။

#myanmar #laravel #bootstrap

Laravel Jetstream မှာတော့ ui အတွက် Tailwind css ကို default အနေနဲ့သုံးထားပါတယ်။ Tailwind css ဆိုတာ utility-first framework ဖြစ်ပြီး တော်တော်ရေးလို့ကောင်းတာမို့ tailwind ကို သုံးစေချင်ပါတယ်။

Bootstrap ရဲ့ အသင့်သုံး components တွေ၊ ရိုးရှင်းတဲ့ layouts တွေ သုံးပြီး Admin Panel တည်ဆောက်ဖို့ ကျွန်တော်အသုံးပြုတဲ့ နည်းလမ်းကို ပြောချင်ပါတယ်။

အရင်ဆုံး laravel 8 project တစ်ခု create လုပ်ပါမယ်။

composer create-project --prefer-dist laravel/laravel blog
Enter fullscreen mode Exit fullscreen mode

Jetstream ကို install လုပ်ပါမယ်။ Jetstream မှာ livewire နဲ့ inertia.js ဆိုပြီး frontend stack နှစ်ခုရှိပါတယ်။ ကျွန်တော်ကတော့ အခုပြမယ့် နမူနာမှာ inertia ကိုပဲသုံးပါမယ်။

composer require laravel/jetstream php artisan jetstream:install inertia
Enter fullscreen mode Exit fullscreen mode

Jetstream မှာ bootstrap ကိုသုံးဖို့အတွက် Jetstrap ဆိုတဲ့ package ကိုသုံးပါမယ်။

composer require nascent-africa/jetstrap --dev
Enter fullscreen mode Exit fullscreen mode

Jetstrap ရဲ့ အလုပ်လုပ်ပုံက jetstream သွင်းကတည်းက အသင့်ပါလာတဲ့ tailwind နဲ့ရေးထားတဲ့ class တွေကို bootstrap ရဲ့ class တွေနဲ့ အစားထိုးလိုက်တာပါ။

အခု tailwind ရဲ့ class တွေကို bootstrap ရဲ့ class တွေနဲ့ အစားထိုးပါမယ်။

php artisan jetstrap:swap inertia npm install npm run dev php artisan migrate
Enter fullscreen mode Exit fullscreen mode

ဒါဆို Laravel Jetstream ကို bootstrap နဲ့သုံးလို့ရပါပြီ။

Jetstream Documentation နဲ့ Jetstrap Documentation မှာ ထပ်မံ လေ့လာဖို့ အကြုံပြုလိုပါတယ်။

Top comments (0)