Laravel не работает bootstrap

Почему на домашней странице моего laravel не работает бутстрап?

Раньше он работал нормально

Когда я создал пустой проект laravel от hostinger, и я принял его, например, своим мобильным телефоном, он работал хорошо, и под этим я имел в виду, что шрифт с надписью «Laravel» имел поля, и все выглядело по центру и, как предполагается, увидеть загрузочную страницу. После того, как я создал проект по руководству и загрузил его, кошмар начался.

Показываю вам код

В базовом проекте laravel написано «Laravel», а в моем проекте — «gastiGram» (он прокомментирован как «¡¡¡ВОТ ПРОБЛЕМА . »); возможно, с меньшим количеством букв он хорошо работает на мобильном телефоне (конечно, шучу, должно быть, я где-то напортачил). Это код, парни и девушки, так что, может быть, вы мне поможете. Спасибо.

2 ответа

Как будто никто не нашел для меня ответа .

Я пробовал то, что говорили другие, и пришел к выводу, что это не проблема ни с бутстрапом, ни с vue. Я полагаю, дело в том, что классы content и title m-b-md не обеспечивали желаемое реагирование, которое я ожидал от текста.

Я готов принять ответ, демонстрирующий, что то, что я говорю, неверно, и я могу применить другое решение моей проблемы в этом проекте. Предложения Камлеша Пола были мне полезны . теперь я немного лучше понимаю, как работает laravel; все же этого было недостаточно, так как шрифт сворачивался вбок, применяя то, что он сказал, будет работать, но не работал, поэтому я просто применил стиль вручную

Источник

Почему bootstrap не работает на домашней странице моего laravel?

Раньше это работало нормально

Когда я создал пустой проект laravel из hostinger и получил доступ к нему с помощью своего мобильного телефона, например, он работал хорошо, и под этим я подразумеваю, что шрифт, который сказал «Laravel», имел поля, и все выглядело центрированным, как и положено видеть загрузочную страницу. После того, как я создал проект по учебнику и загрузил его, начался кошмар.

Показываю вам код

Базовый проект laravel говорит «Laravel», где мой проект говорит «gastiGram» (он комментируется как «¡¡¡вот в чем проблема. «); возможно, с меньшим количеством букв он хорошо работает на мобильных устройствах (конечно, я шучу, я, должно быть, где-то напутал). Это код, парни и девушки, так что, может быть, вы мне поможете. Спасибо.

welcome.blade.php

Ответы — Почему bootstrap не работает на домашней странице моего laravel? / Why is bootstrap not working in my laravel’s home page?

Поскольку никто, казалось, не нашел для меня ответа.

Я попробовал то, что говорили другие, и пришел к выводу, что это не было проблемой ни с bootstrap, ни с vue. Я предполагаю, что это был тот факт, что классы content и title m-b-md не обеспечивали желаемой отзывчивости, которую я ожидал от текста

Я готов принять ответ, который показывает, что то, что я говорю, неверно, и я могу применить другое решение своей проблемы в этом проекте. Предложения Камлеша Павла были мне полезны. теперь у меня есть немного лучшее понимание того, как работает laravel; все же этого было недостаточно, так как шрифт сворачивался вбок, применяя то, что он сказал, будет работать, но не сделал этого, поэтому я просто применил стиль вручную

Источник

Включить Bootstrap в Laravel

Я новичок в Laravel. Я только что установил некоторые сторонние пакеты и хотел бы интегрировать бутстрап Twitter в свой скрипт. Есть ли какой-нибудь способ сделать это, кроме входа в каждый пакет и добавления кода в шаблоны лезвий каждого представления?

6 ответов

Это верхняя часть главного макета моего текущего запущенного приложения:

Следуйте этому подходу и сделайте каждое ваше представление расширением основного макета следующим образом:

Это часть моего представления (верхняя часть), которая расширяет основной макет, чтобы он стал частью основного макета. Главный макет хранится в папке app/views/layouts/ , его имя — master.blade.php , поэтому @extends (‘layouts.master’) означает расширение master.blade.php из папки layouts и его (имя) может быть любым, каждое представление также должно содержать .blade в имени файла перед .php .

Выполните команду ниже, это решит проблему.

Просто создайте шаблон (можете называть его основным, если вам нравится). Включите в него Twitter Bootstrap. Расширьте из него виды для всех остальных ваших лезвий.

ДА, это так просто! = D

Laravel> 6.x представил новый подход к работе с каркасами внешнего интерфейса, laravel / ui .

Вы можете просто скачать пакет композитора:

И запустите команду artisan:

Лучшим способом было бы создать главный шаблон, и каждый из ваших шаблонов расширял бы его.

Затем в главном шаблоне каждый раз, когда вам нужно добавить что-то вроде Twitter Bootstrap, jQuery и т. Д. В свое приложение, вы просто добавляете его в главный шаблон, и тогда он будет доступен для каждой вашей страницы.

Обновление для Laravel 7. *

Затем в HTML, над которым вы работаете, вставьте как CSS, так и JavaScript:

@Svyat, надеюсь, это тоже ответит на ваш вопрос.

Я понимаю, что это старый . но это был лучший результат, который я получил в Google. Надеюсь, это поможет кому-то в будущем.

Если вы используете Laravel 6.2 ,

Источник

How to Properly Install and Use Bootstrap 4 in Laravel 8

We will cover the following concepts of Laravel and Bootstrap:

• How to Install Laravel/UI.
• How to install Bootstrap and its packages
• How to compile Bootstrap assets.
• How to install Bootstrap Auth Scaffolding.
• How to use complied Bootstrap CSS and JS in Laravel blade template.

Bootstrap is a CSS framework, and it provides user-friendly UI components that help to build a next-level web or mobile application. This is a step by step guide on how to use Bootstrap 4 in Laravel.

Install Laravel Project

To give you the demo of Bootstrap installation in Laravel 8, we need to execute the following command to install a new Laravel project from scratch.

Get inside the newly created Laravel app.

Install Laravel/UI

Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts.

Run the command to install Laravel/UI.

Install Bootstrap in Laravel 8

We have successfully installed a laravel/ui package using Composer, now in this step, we will understand how to easily install the Bootstrap 4 CSS Framework using the following command.

Run command to install Bootstrap in Laravel project.

Install Bootstrap Auth Scaffolding

Execute the following command to Install the auth scaffoldings with Bootstrap.

We have successfully installed the bootstrap, and you can make sure by going to resource/js/bootstrap.js. You will see that popper.js and jQuery have been added to the bootstrap’s JavaScript file.

Install Bootstrap Packages

We have placed everything at its place, and now we have to install the bootstrap packages for the associated frontend component.

Before we move forward, first, make sure you have Node installed on your local development system. Run the following command to check node installation.

Finally, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:

Compile Assets

As we can see, resources/sass folder _variables.scss and app.scss files have added along with sass variables and fonts.

Now, we have to run the below command for asset compilation.

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Automate SASS and JS Changes

If you are lazy and don’t want to run the npm run dev command every time you make changes in SASS and JS file, you should use the following command.

It keeps an eye on your files and compiles the code automatically if detects any change made in SASS and JS files.

Using Bootstrap in Laravel Blade Template

Now, sass files are complied to single CSS file inside the public folder, and we can define the js and CSS path and use the Bootstrap js and CSS in the Laravel blade template.

Источник

Использование каркаса аутентификации Bootstrap 4 в Laravel 8 вместо Tailwind

Восьмая версия Laravel была встречена с энтузиазмом. Данный выпуск отмечен несколькими радикальными изменениями. Одним из наиболее примечательных, хотя и спорных новшеств стала замена Bootstrap на Jetstream. Laravel Jetstream – каркас аутентификации со стильным дизайном. Скаффолдинг включает два стека для создания системы авторизации:

• Tailwind CSS и Livewire;
• Tailwind CSS и Inertia.js.

Оба стека сами по себе прекрасны, но они сильно отличаются от связки Bootstrap и jQuery, к которой привыкло большинство разработчиков. Генерирование системы авторизации на основе Bootstrap в Laravel больше не поддерживается, и к несчастью, разработчикам предстоит изучать новый скаффолдинг.

К счастью, фреймворк Laravel относится к проектам с открытым исходным кодом: любой заинтересованный разработчик имеет возможность создавать свои плагины или интеграции для этой платформы. В этой статье мы рассмотрим способ использования привычного каркаса для аутентификации на основе Bootstrap в Laravel 8.

Создаем новый проект Laravel

Если вы уже установили Laravel Installer (инструкцию по инсталляции можно посмотреть здесь),выполните команду:

Если Laravel еще не установлен, команда будет выглядеть так:

Затем перейдите в каталог с проектом командой:

Устанавливаем Laravel UI

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

Добавляем Bootstrap в Laravel

Laravel UI предусматривает три опции для создания каркаса аутентификации: Bootstrap, Vue и React. Нам понадобится Bootstrap. Давайте установим соответствующий компонент с помощью следующей команды:

Обратите внимание, что мы используем параметр auth, который помимо установки Bootstrap и базового каркаса авторизации также добавит генераторы страниц для входа и регистрации.

Устанавливаем нужные пакеты npm

Параметры конфигурации Bootstrap были внесены в файл package.json на предыдущем этапе, теперь все готово к установке npm пакетов. Убедитесь, что Node.js и менеджер пакетов npm установлены в вашей системе, используя следующие команды:

Если все в порядке, устанавливаем пакеты:

Миграция базы данных

Прежде всего, укажите конфигурационные параметры базы данных в файле окружения .env, который находится в корневом каталоге проекта. Если соответствующего файла там не оказалось, создайте его вручную и внесите в него ваши данные по приведенному образцу:

С помощью приведенной ниже команды мы создадим таблицы в базе данных:

Запускаем сервер в производство

Мы, наконец, готовы запустить Laravel с поддержкой скаффолдинга на основе Bootstrap: иногда старые технологии лучше новых:

Надеюсь, эта статья вам пригодилась. Трудно сказать, что лучше – Bootstrap или Tailwind. На самом деле это вопрос личных предпочтений. Но поскольку Laravel 8 по умолчанию использует только Tailwind в связке с Livewire или Inertia, это обескураживает разработчиков, привыкших к Bootstrap. После интеграции Bootstrap в Laravel 8 можно работать над проектами, как раньше.

Пожалуйста, опубликуйте свои мнения по текущей теме материала. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

Источник