web-dev-qa-db-fra.com

Utiliser bootstrap avec composer

Je suis un programmeur novice sur le Web, 
J'essaie d'apprendre de chez moi pour créer mon propre site Web ... J'ai des notions de php, html, js et css. 
Mais j'ai trouvé quelque chose qui ne résout pas le problème… .. J'essaie d'utiliser Composer pour gérer Bootstrap. J'ai installé Composer et j'ai exécuté cette ligne de code 

composer require twbs/bootstrap

qui a laissé tomber un dossier avec des fichiers.

Je ne comprends pas comment je crée des liens HTML pour trouver les fichiers JS et CSS, vous devez indiquer le chemin complet?

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

Excusez-moi si la question est stupide mais je ne sais pas comment je devrais continuer. 
AMD excuse mon anglais, j’apprends aussi mais j’utilise maintenant google translate

phptwitter-bootstrapcomposer-php
16
James Ryan

Oui, Composer télécharge les dépendances par défaut dans le dossier vendor. Ainsi, Bootstrap atterrira également dans le dossier du fournisseur, ce qui n’est pas le bon endroit pour le référencer ou l’inclure.

composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js

Votre prochaine étape serait d'écrire un petit script d'assistance pour copier les fichiers Boostrap dont vous avez besoin dans votre dossier public/assets. Vous pouvez copier le dossier dist complet, y compris les sous-dossiers (vendor\twbs\bootstrap\dist) dans public ou public\assets. 

Veuillez écraser les fichiers existants, par exemple si un fichier existe, supprimez-le, puis copiez-le. Cela permet de mettre facilement à jour les fichiers lorsque vous devez à nouveau mettre à jour le package du fournisseur Bootstrap.

Bien sûr, vous pouvez également simplement copier les fichiers manuellement ou créer un lien symbolique. Ça dépend. 

Cela vous donne la structure de répertoire suivante:

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

Lorsque les ressources Boostrap sont copiées, vous pouvez commencer à les inclure, dans votre index.html ou votre modèle (assets\js\bootstrap.min.js, etc.).

Référencement: https://stackoverflow.com/a/34423601/1163786 qui indique également d'autres solutions à ce problème, par exemple. fxp/composer-asset-plugin, bower, grunt.

13
Jens A. Koch

À moins que vous n'ayez besoin de personnalisation inside bootstrap (par exemple, building scss), la solution la plus simple consiste à utiliser un CDN (en prime, la mise en cache des ressources est extrêmement rapide).

Alors, appelez simplement vos actifs comme suit:

<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 est un excellent outil pour backend / dependencies, mais pas le meilleur pour frontend.

8
Massimiliano Arione

Si vous voulez avoir les fichiers sur votre serveur et que vous ne voulez pas utiliser npm, grunt ou un autre gestionnaire de bibliothèque frontend, vous pouvez simplement télécharger les fichiers listés dans Massimiliano's answer et les placer dans votre js/css Dossiers:

Commencez par télécharger ces fichiers (mis à jour vers la version la plus récente de 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

Et mettez-les dans ces dossiers (à partir de la racine de votre projet):

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

Maintenant, vous voulez pouvoir les appeler dans les modèles de lames pour vos vues. C'est simple: ajoutez simplement les balises <link> et <script> comme d'habitude pour tout fichier css/js, en ajoutant les éléments suivants à votre modèle de lame:

<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 .: si vous voyez la console, elle affiche quelque chose comme le message d'erreur suivant:

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

Cela n'affectera pas le style de votre page et vous pouvez simplement ignorer ce message ou supprimer une ligne du fichier d'amorçage en tant que réponses à cette question suggérez. Cette réponse expliquer un peu plus.

0
Brian Hellekin