DEV Community

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

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

Pyae Sone Aung
A web developer
・1 min read

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 မှာ ထပ်မံ လေ့လာဖို့ အကြုံပြုလိုပါတယ်။

Discussion (0)