Комплексное решение Laravel для интеграции Bootstrap 4

задняя часть JavaScript Laravel Bootstrap

Оригинальная ссылка:Woohoo.Thunder God.com/posts/Я женщина-агент…

Обновление от 23 января 2018 г.: Если вы хотите использовать bootstrap 4 непосредственно на laravel 5.5, это должно быть относительно разумно, потому что была выпущена окончательная версия bootstrap 4, так что хорошая новость в том, что вам не нужно следовать приведенным ниже шагам, вы можете быстро используйте boostrap 4, установив плагин, ссылка на плагин:laravelnews/laravel-twbs4, я не буду вдаваться в подробности того, как его использовать, просто следуйте документации плагина. Если вы интегрируете bootstrap 4 до laravel 5.5, вам все равно нужно пройти следующий процесс:

(1) Установите начальную загрузку и соответствующие зависимости

npm install bootstrap@4.0.0-beta popper.js --save-dev

Будуbootstrap-sassотpackage.jsonудалить, а затем выполнитьnpm install

(2) в вашемapp.scssВставьте новый файл bootstrap sass в файл

//替换掉之前bootstrap-sass的引入
//如果你是laravel 5.5及以后的版本，这里的node_modules换成~符号
@import "node_modules/bootstrap/scss/bootstrap";

(3) Скомпилируйте файл js начальной загрузки

На этом шаге вы можете захотеть сделать прямую копию вашегоbootstrap.min.jsфайл в общедоступный каталог, а затем сослаться на него, но на самом деле это невозможно, потому что js-компонент бутстрапа 4 также зависит отjqueryа такжеPopper.js,По умолчаниюbootstrap.min.jsФайл не компилируется.

Способ 1 использованияbootstrap.min.jsкомпилировать

В это время нам нужноwebpack.mix.jsДобавьте эти строки:

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
    'popper.js/dist/umd/popper.js': ['Popper']
});
mix.js([
        'node_modules/bootstrap/dist/js/bootstrap.min.js'
        ],'public/js/bootstrap.min.js')

Видно, что мы проходимmix.autoload()автозагрузка методаjqueryа такжеPopper.js, как это нижеmix.js()компиляция методаbootstrap.min.jsСоответствующие зависимости компилируются в файл, и, наконец, мы отправляем скомпилированный файл вpublic/js/каталог, а затем вызывать его там, где это необходимо.

Использование второго методаbootstrap.bundle.min.jsкомпилировать

Если вы переходите на бутстрапnode_modules/bootstrap/dist/js/В каталоге вы найдете ещеbootstrap.bundle.min.jsфайл, который на самом деле предварительно скомпилированPopper.jsзайти, но нетjquery, так простоwebpack.mix.jsВ файле мы можем написать это так:

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});
mix.js([
        'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
        ],'public/js/bootstrap.min.js')

Окончательные сжатые файлы одинаковы, если вы используетеnpm run devДля компиляции файл, сжатый вторым способом, меньше, но если он находится в производственной среде, то естьnpm run production, то оба имеют одинаковый размер.

Конечно, помимо написания на одну строку меньше, второй способ имеет еще и то преимущество, что в самом начале нет необходимостиnpm install popper.jsНу это и понятно, просто компонент меньше скачивать.

(4) Загрузите лезвие разбиения на страницы бутстрапа 4

На этом этапе вы можете фактически использовать его в представлении лезвия в соответствии с документацией bootstrap 4 или изменить существующий загрузчик 3 на 4, потому что это относительно подрывное обновление бутстрапа, поэтому он не может быть обратно совместим, в зависимости от размера вашего проекта, но в целом изменение начальной загрузки 3 на 4 занимает некоторое время.

Про конкретику рассказывать не буду.В этот период я ​​могу больше заморочиться как обновить стиль пагинации бутстрапа 4.Существует много способов.Вот самый простой и быстрый:

Во-первых, найдите свойresources/views/vendor/paginationКаталог, это файл представления стиля подкачки laravel по умолчанию, если он не выполняетсяphp artisan vendor:publishесть

default.blade.php
bootstrap-4.blade.php

simple-default.blade.php
simple-bootstrap-4.blade.php

Видно, что laravel по умолчанию уже подготовил для нас файл шаблона подкачки bootstrap 4. На данный момент проще всего изменить имя файла.default.bladeЭто оригинальный бутстрап 3, поэтому мы можем изменить его наbootstrap-3.blade.php,Потомbootstrap-4.bladeизменить на значение по умолчаниюdefault.blade, чтобы laravel использовал стиль 4 при загрузке пагинации.

Конечно, вы также можете указать конкретный файл представления подкачки каждый раз при отображении подкачки, как сказано в документации laravel, например:

$paginator->links('vendor.pagination.bootstrap-4')

Но это слишком хлопотно, ты же знаешь.

Категории