Laravel 11 ułatwia rozwój backendu, podczas gdy Bootstrap oferuje komponenty projektowe i style frontendowe. Razem pozwalają na tworzenie solidnych i atrakcyjnych wizualnie aplikacji internetowych.
W tym samouczku przeprowadzę Cię przez proces instalacji Bootstrapa 5 w Laravelu 11. Zacznijmy od zainstalowania świeżej kopii frameworka Laravel 11.
Krok 1: Instalacja Świeżej Kopii Laravela 11
Otwórz terminal i wykonaj następujące polecenie, aby zainstalować Laravel 11 pod nazwą projektu laravel-with-bootstrap:
composer create-project laravel/laravel laravel-with-bootstrap
Alternatywnie, jeśli masz instalator Laravel 11, możesz użyć tego polecenia:
laravel new laravel-with-bootstrap
Po zainstalowaniu Laravela, przejdź do katalogu projektu w terminalu:
cd laravel-with-bootstrap
Krok 2: Instalacja Pakietu Laravel UI
W tym kroku zainstaluj pakiet Laravel UI, wykonując następujące polecenie:
composer require laravel/ui --dev
Krok 3: Instalacja Autentykacji Bootstrap
Następnie zainstaluj framework Bootstrap wraz z konstrukcją autentykacji, wykonując polecenie:
php artisan ui bootstrap --auth
To polecenie wprowadza kilka zmian w aplikacji Laravel dotyczących autentykacji:
- Generuje trasy w pliku routes/web.php.
- Tworzy kontrolery do rejestracji użytkownika, logowania i resetowania hasła.
- Generuje widoki Blade dla stron autentykacji.
- Tworzy migrację dla tabeli użytkowników.
Krok 4: Instalacja Ikony Bootstrapa
Po zainstalowaniu Bootstrapa, zainstaluj pakiet ikon Bootstrapa, wykonując:
npm install bootstrap-icons --save-dev
Po zainstalowaniu zaimportuj ikony w pliku app.scss znajdującym się w katalogu resources/sass/:
@import 'bootstrap-icons/font/bootstrap-icons.css';
Następnie skompiluj pliki CSS i JS za pomocą:
npm install
npm run dev
Krok Końcowy
W pliku welcome.blade.php w katalogu widoków, zastąp istniejący kod następującym:
<!DOCTYPE html>
<html lang="">
<head>
<style type="text/css">.bt-icons i{font-size:30px}</style></head>
<body>
<main class="container">
<div class="flex justify-center">
<h1>Zainstaluj Bootstrapa w Laravelu z CoderAdvise.com</h1>
</div>
<div class="bt-icons">
<i class="bi bi-airplane-fill"></i>
<i class="bi bi-apple"></i>
<i class="bi bi-balloon-heart"></i>
</div>
</main> <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><script defer src="https://rafalmajkowski.pl/wp-content/cache/autoptimize/js/autoptimize_a91fe4368765a23bc56a6eb3e9051fd3.js"></script></body>
</html>
Aby zobaczyć wynik, uruchom aplikację Laravel na serwerze deweloperskim:
php artisan serve
Odwiedź następujący adres URL w swojej przeglądarce, aby zobaczyć rezultat:
Ten artykuł przedstawia praktyczny przewodnik instalacji frameworka Bootstrap 5 w aplikacji Laravel 11. Poprzez kroki od instalacji Laravela, poprzez dodanie autentykacji Bootstrapa, aż po instalację ikon Bootstrapa, czytelnik otrzymuje kompletny przewodnik, który pozwala na szybkie uruchomienie aplikacji internetowej opartej na tych technologiach. Dzięki temu artykułowi czytelnik zdobędzie solidne podstawy do tworzenia atrakcyjnych wizualnie aplikacji webowych.