Bootstrap – это популярная интерфейсная платформа, которая предоставляет набор предварительно оформленных компонентов и классов CSS, помогающих разработчикам создавать адаптивные и визуально привлекательные веб-приложения. Laravel, с другой стороны, — это мощный PHP-фреймворк, известный своим элегантным синтаксисом и обширными функциями. В этом руководстве мы рассмотрим различные способы установки Bootstrap в Laravel 8 с использованием встроенной системы аутентификации.
Метод 1: использование диспетчера пакетов (Composer)
Один из самых простых способов установить Bootstrap в Laravel 8 — использовать менеджер пакетов, например Composer. Выполните следующие действия:
Шаг 1. Создайте новый проект Laravel
Откройте интерфейс командной строки и выполните следующую команду, чтобы создать новый проект Laravel:
composer create-project --prefer-dist laravel/laravel myproject
Замените «myproject» на желаемое имя вашего проекта.
Шаг 2. Установите пакет пользовательского интерфейса Laravel
Выполните следующую команду, чтобы установить пакет пользовательского интерфейса Laravel, который предоставляет необходимые инструменты для формирования системы аутентификации и интеграции Bootstrap:
composer require laravel/ui
Шаг 3. Создайте ресурсы Bootstrap
Далее сгенерируйте необходимые ресурсы для Bootstrap с помощью команды пользовательского интерфейса Laravel:
php artisan ui bootstrap --auth
Эта команда установит файлы Bootstrap CSS и JavaScript, а также представления и маршруты, необходимые для аутентификации.
Шаг 4. Компиляция ресурсов
Чтобы скомпилировать ресурсы и сделать их пригодными для использования в вашем приложении, выполните следующую команду:
npm install && npm run dev
Это позволит установить необходимые зависимости и скомпилировать ресурсы с помощью Laravel Mix.
Способ 2: установка вручную
Если вы предпочитаете установку вручную, выполните следующие действия:
Шаг 1. Загрузите файлы Bootstrap
Посетите веб-сайт Bootstrap ( https://getbootstrap.com/ ) и загрузите скомпилированные файлы CSS и JavaScript.
Шаг 2. Скопируйте файлы в проект Laravel
Скопируйте загруженные файлы CSS и JavaScript в соответствующий каталог вашего проекта Laravel. Например, вы можете разместить их в каталогах public/cssи public/jsсоответственно.
Шаг 3. Включите файлы начальной загрузки
В основной файл макета вашего проекта Laravel (например, resources/views/layouts/app.blade.php
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
Метод 3. Использование CDN
Альтернативный метод — связать файлы Bootstrap непосредственно из сети доставки контента (CDN). Выполните следующие действия:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
В этом руководстве мы рассмотрели три различных метода установки Bootstrap в Laravel 8 с аутентификацией. Вы можете выбрать метод, который соответствует вашим предпочтениям и требованиям проекта. Используя Composer, ручную установку или CDN, вы можете легко интегрировать Bootstrap в свое приложение Laravel и начать создавать адаптивные и визуально привлекательные пользовательские интерфейсы.
Не забудьте выполнить необходимые команды и включить необходимые файлы или ссылки, чтобы Bootstrap беспрепятственно работал с Laravel 8.
Следуя этому руководству, вы сможете установить Bootstrap в Laravel 8 и использовать его мощные возможности внешнего интерфейса, используя при этом встроенную систему аутентификации Laravel.