Простые способы установки пользовательского интерфейса Bootstrap в ваше приложение Laravel - Fcodenotes

Хотите улучшить пользовательский интерфейс вашего приложения Laravel с помощью Bootstrap? Не смотрите дальше! В этой статье мы рассмотрим несколько способов установки пользовательского интерфейса Bootstrap в ваше приложение Laravel, чтобы сделать его визуально привлекательным и удобным для пользователя. Итак, приступим!

Метод 1: установка вручную

Если вы предпочитаете практический подход, вы можете вручную установить пользовательский интерфейс Bootstrap в свое приложение Laravel, выполнив следующие действия:

Шаг 1. Загрузите файлы Bootstrap
Посетите официальный сайт Bootstrap ( https://getbootstrap.com ) и загрузите последнюю версию Bootstrap. Извлеките загруженные файлы в удобное вам место.

Шаг 2. Скопируйте файлы CSS и JS
Скопируйте файлы «bootstrap.min.css» и «bootstrap.min.js» из извлеченной папки Bootstrap и вставьте их в папки «public/css» и «public». /js” вашего приложения Laravel соответственно.

Шаг 3. Включите файлы начальной загрузки.
Откройте файл «resources/views/layouts/app.blade.php» в своем приложении Laravel и добавьте следующие строки в раздел <head>:

<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<script src="{{ asset('js/bootstrap.min.js') }}"></script>

Метод 2: использование Laravel Mix

Laravel Mix упрощает процесс компиляции ресурсов в Laravel. Чтобы использовать его для установки пользовательского интерфейса Bootstrap, выполните следующие действия:

Шаг 1. Установите Laravel Mix
Если вы еще этого не сделали, установите Laravel Mix, выполнив следующую команду в корневом каталоге вашего приложения Laravel:

npm install

Шаг 2. Установите Bootstrap через npm
Установите Bootstrap, выполнив следующую команду:

npm install bootstrap

Шаг 3. Настройте Laravel Mix
Откройте файл «webpack.mix.js» в корневом каталоге вашего приложения Laravel и добавьте следующий код:

mix.sass('resources/sass/app.scss', 'public/css')
   .js('resources/js/app.js', 'public/js')
   .copy('node_modules/bootstrap/dist/js/bootstrap.min.js', 'public/js');

Шаг 4. Компиляция ресурсов
Наконец, скомпилируйте ресурсы, выполнив следующую команду:

npm run dev

Метод 3. Использование пакета пользовательского интерфейса Laravel

Laravel UI – это официальный пакет Laravel, который помогает вам создавать интерфейсную часть вашего приложения. Чтобы установить пользовательский интерфейс Bootstrap с помощью пользовательского интерфейса Laravel, выполните следующие действия:

Шаг 1. Установите пользовательский интерфейс Laravel
Если у вас не установлен пользовательский интерфейс Laravel, выполните следующую команду:

composer require laravel/ui

Шаг 2. Создание пользовательского интерфейса Bootstrap
Чтобы создать структуру пользовательского интерфейса Bootstrap, выполните одну из следующих команд в зависимости от ваших предпочтений:

Для Bootstrap 4:

php artisan ui bootstrap --auth

Для Bootstrap 5:

php artisan ui bootstrap --auth --bootstrap=bootstrap5

Шаг 3. Установите зависимости NPM
Далее установите необходимые зависимости NPM, выполнив:

npm install && npm run dev

Шаг 4. Включите файлы начальной загрузки.
Откройте файл «resources/views/layouts/app.blade.php» в своем приложении Laravel и убедитесь, что в разделе <head>присутствуют следующие строки. :

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

Заключение

Следуя любому из вышеперечисленных методов, вы можете легко установить пользовательский интерфейс Bootstrap в свое приложение Laravel. Независимо от того, выберете ли вы установку вручную, Laravel Mix или пакет Laravel UI, ваши пользователи получат визуально привлекательный и удобный интерфейс!

Не забудьте скомпилировать свои ресурсы и включить необходимые файлы Bootstrap, чтобы все работало гладко. Приятного кодирования!