Как установить Bootstrap 5 в Laravel 11 - Честный заработок в интернете

Как установить Bootstrap 5 в Laravel 11 с помощью Vite?

В этой статье я покажу вам, как установить Bootstrap 5 в Laravel 11 с помощью Vite.

Если вы хотите установить bootstrap 5 с помощью vite в laravel 11. Тогда я помогу вам объяснить шаг за шагом, как добавить bootstrap 5 с помощью npm vite. Итак, давайте выполним следующий шаг, чтобы добавить bootstrap в приложение laravel 11.

Шаг по установке Bootstrap 5 в Laravel 11 с Vite

Шаг 1: Установка Laravel 11

Этот шаг не является обязательным; однако, если вы еще не создали приложение Laravel, вы можете выполнить следующую команду:

composer create-project laravel/laravel example-app

Шаг 2: Установка пакета Laravel UI

Здесь мы установим пакет laravel ui, который позволит установить bootstrap с аутентификацией. Итак, давайте выполним следующую команду:

composer require laravel/ui

Шаг 3: Установка Bootstrap

Здесь мы добавим bootstrap с аутентификацией. Итак, давайте выполним следующую команду:

php artisan ui bootstrap

Шаг 4: Установка значка Bootstrap

На этом этапе мы добавим значок bootstrap. Итак, давайте выполним следующую команду:

npm install bootstrap-icons —save-dev

Теперь импортируйте css значка в файл resources\sass\app.scss, как показано в коде ниже:

ресурсы\sass\app.scss

/* Fonts */
@import url(‘https://fonts.bunny.net/css?family=Nunito’);

/* Variables */
@import ‘variables’;

/* Bootstrap */
@import ‘bootstrap/scss/bootstrap’;
@import ‘bootstrap-icons/font/bootstrap-icons.css’;

Шаг 5: Создание CSS и JS-файла

На этом этапе мы создадим файлы css и js. Итак, давайте выполним следующие две команды:

npm install
   
npm run build

Шаг 6: использование класса Bootstrap

Здесь мы обновим файл welcome.blade.php и используем класс bootstrap.

ресурсы\view\welcome.blade.php

<!doctype html>
<html lang=»{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}»>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>

<!— CSRF Token —>
<meta name=»csrf-token» content=»{{ csrf_token() }}»>

<title>{{ config(‘app.name’, ‘Laravel’) }}</title>

<!— Scripts —>
@vite([‘resources/sass/app.scss’, ‘resources/js/app.js’])

<style type=»text/css»>
i{
font-size: 50px;
}
</style>

</head>
<body>

<main>
<div class=»container py-4″>
<header class=»pb-3 mb-4 border-bottom»>
<a href=»/» class=»d-flex align-items-center text-body-emphasis text-decoration-none»>
<svg xmlns=»http://www.w3.org/2000/svg» width=»40″ height=»32″ class=»me-2″ viewBox=»0 0 118 94″ role=»img»><title>Bootstrap</title><path fill-rule=»evenodd» clip-rule=»evenodd» d=»M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z» fill=»currentColor»></path></svg>
<span class=»fs-4″>DevScriptSchool.com Tutorial</span>
</a>
</header>

<div class=»p-5 mb-4 bg-body-tertiary rounded-3″>
<div class=»container-fluid py-5″>
<h1 class=»display-5 fw-bold»>Laravel/Vite Bootstrap 5 Example</h1>
<p class=»col-md-8 fs-4″>This simple jumbotron example is based on one of the official Bootstrap 5 examples.</p>
<a class=»btn btn-primary btn-lg» href=»https://getbootstrap.com/docs/5.3/examples/jumbotron/»>
View on getbootstrap.com
</a>
</div>
</div>

<div class=»row align-items-md-stretch»>
<div class=»col-md-6″>
<div class=»h-100 p-5 bg-body-tertiary border rounded-3″>
<h2>Some borders</h2>
<i class=»bi bi-bag-heart-fill»></i>
<i class=»bi bi-app»></i>
<i class=»bi bi-arrow-right-square-fill»></i>
<i class=»bi bi-bag-check-fill»></i>
<i class=»bi bi-calendar-plus-fill»></i>
</div>
</div>
</div>

<footer class=»pt-3 mt-4 text-body-secondary border-top»>
Â© {{ date(‘Y’) }}
</footer>
</div>
</main>

</body>
</html>