it-roy-ru.com

Используйте bootstrap с composer

Я веб-программист-новичок,
Я пытаюсь учиться дома, чтобы создать свою собственную сеть. У меня есть понятия php, html, js и css.
Но я нашел что-то не то, что решить. Я пытаюсь использовать Composer для управления Bootstrap. Я установил Composer и ​​запустил эту строку кода

composer require twbs/bootstrap

который сбросил папку с файлами.

Я не понимаю, как я делаю html-ссылки для поиска файлов js и css, вы должны указать полный путь?

vendor / twbs / bootstrap / dist / js / bootstrap.js

Извините, если вопрос глуп, но я не знаю, как мне продолжать.
AMD извините за мой английский, я тоже учусь, но сейчас я использую Google Translate

16
James Ryan

Да, Composer по умолчанию загружает зависимости в папку vendor. Таким образом, Bootstrap также попадет в папку vendor, которая не является правильным местом для ссылки или включения.

composer require twbs/bootstrapvendor/twbs/bootstrap/dist/js/bootstrap.js


Следующим шагом будет написание небольшого вспомогательного скрипта для копирования необходимых файлов Boostrap в вашу папку public/assets. Вы можете скопировать всю папку dist, включая подпапки (vendor\twbs\bootstrap\dist), в public или public\assets

Пожалуйста, перезапишите существующие файлы, например, если файл существует, удалите его, а затем скопируйте. Это позволяет легко обновлять файлы, когда вам нужно снова обновить пакет поставщика Bootstrap.

Конечно, вы также можете просто скопировать файлы вручную или создать символическую ссылку. Это зависит. 

Это дает вам следующую структуру каталогов:

public
 \- assets
    |- css
    |- js
    \- fonts
 \- index.html

Когда ресурсы Boostrap скопированы, вы можете начать включать их в свой index.html или шаблон (assets\js\bootstrap.min.js и т.д.).


Ссылка: https://stackoverflow.com/a/34423601/1163786 которая показывает также другие решения этой проблемы, например, fxp/composer-asset-plugin, bower, grunt.

13
Jens A. Koch

Если вам не нужна настройка inside bootstrap (например, сборка scss), наиболее простым решением является использование CDN (в качестве бонуса вы получаете сверхбыстрое кэширование ресурсов)

Итак, просто назовите ваши активы так:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Composer - превосходный инструмент для backend зависимостей, но не самый лучший для внешнего интерфейса.

8
Massimiliano Arione

Если вы хотите, чтобы файлы были на вашем сервере, и вы не хотите использовать npm, grunt или другой менеджер библиотек внешнего интерфейса, вы можете просто скачать файлы, перечисленные в ответ Массимилиано и поместить их в ваш js/css папки:

Сначала загрузите эти файлы (обновленные до последней версии Bootstrap 3):

http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

И поместите их в эти папки (начиная с корня вашего проекта):

public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js

Теперь вы хотите иметь возможность вызывать их в шаблонах блэйдов для ваших представлений. Все просто: просто добавьте теги <link> и <script> как обычно для любого файла css/js, добавив следующее в свой шаблон blade-сервера:

<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>

P.s .: если вы видите консоль, она показывает что-то вроде следующего сообщения об ошибке:

Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map

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

0
Brian Hellekin