Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:back-end_framework:laravel:laravel_bootstrap [2022/03/19 15:48] – [Kezdés] admin
+++ oktatas:web:back-end_framework:laravel:laravel_bootstrap [2025/08/01 11:30] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:back-end_framework:laravel|< Laravel]]
-====== Laravel Bootstrap ======
-  * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2021
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
-  * Web: https://szit.hu
-===== Kezdés =====
-Telepítsük a laravel ui modulját:
-  composer require laravel/ui
-Felvesszük a package.json fájlba Bootstrap-et:
-  php artisan ui bootstrap
-Telepítjük, majd futtatjuk a dev scriptet:
-  npm install && npm run dev
-Ha sikertelen, futtassuk újra.
-===== Változások =====
-A resources könyvtárban létrejön egy sass könyvtár,
-abban egy app.scss fájl. Itt találjuk linkelve a
-bootstrap-t.
-A webpack.mix.js fájl is változik .sass() függvény kerül
-meghívásra.
-===== link elem =====
-A valami.blade.php fájlban fel kell venni:
-<code html>
-<link rel="stylesheet" href="{{ asset('css/app.css') }}">
-</code>
-===== Bootstrap konténer =====
-Hozzunk létre div elemet, amely container osztályba tartozik:
-<code html>
-<div class="container">
-<h1>Helló</h1>
-</div>
-</code>
-===== Függőségek =====
-Végül telepítsük a Mix függőséget, majd nézzük meg a projektünekt.
-<code>
-npm install
-npm run dev
-</code>
-===== Megtekintés =====
-  npm run watch
-Most már megnézhető, ha fut a fejlesztői szerver:
-  php artisan serve
-===== Bootstrap és CSS együtt =====
-Ha egyszerre szeretnénk használni a Bootstrap és a saját CSS kódunkat, akkor be kell állítani
-a MIX számára, hogy együtt kezelje azokat. A MIX beállításai a projekt
-gyökérkönyvtárában a webpack.mix.js fájlban találhatók.
-Egészítsük ki a MIX beállításait a .postCss('resources/css/app.css', 'public/css')
-sorral.
-<code javascript webpack.mix.js>
-mix.js('resources/js/app.js', 'public/js')
-    .sass('resources/sass/app.scss', 'public/css')
-    .postCss('resources/css/app.css', 'public/css')
-    .sourceMaps();
-</code>
-  * .sass('resources/sass/app.scss', 'public/css')
-    * Bootstrap működéséről gondoskodik
-  * .postCss('resources/css/app.css', 'public/css')
-    * A saját CSS működéséről gondoskodik
-  * .sourceMaps()
-    * A forrás-térképfájlok aktiválásról gondoskodik.
-    * .map kiterjesztésű fájlok.
-    * Hibakereséshez hasznos, de a fordítás teljesítménycsökkenéshez vezet.
-Majd futtassuk a npm run dev parancsot, hogy a Laravel vegye
-tudomásul a változtatást:
-  npm run dev
-További információ:
-  * https://laravel.com/docs/8.x/mix