web-dev-qa-db-fra.com

Utiliser bootstrap avec bower

J'essaie d'utiliser bootstrap avec bower, mais comme il copie le référentiel entier, il n'y a pas de CSS ni d'autres éléments.

Est-ce que cela signifie que je dois inclure la construction de Bootstrap dans mon propre processus de construction? Ou si je me trompe, quel est le bon flux de travail?

twitter-bootstrapbower
135
xavier.seignard

J'ai finalement fini en utilisant ce qui suit: bower install --save http://Twitter.github.com/bootstrap/assets/bootstrap.Zip

Cela me semble plus propre, car il ne clone pas la totalité du rapport, il ne fait que décompresser les ressources requises.

L'inconvénient est que cela brise la philosophie de bower, car un bower update ne mettra pas à jour le bootstrap.

Mais je pense que c'est toujours plus propre que d'utiliser bower install bootstrap puis de créer un bootstrap dans votre flux de travail.

C’est une question de choix, je suppose. </ S>

Update: semble avoir mis à jour un dossier dist (voir: https://github.com/twbs/bootstrap/pull/6342 ), utilisez donc simplement bower install bootstrap et pointez sur les actifs du dossier dist

84
xavier.seignard

Il existe un paquet bootstrap bower préconfiguré appelé bootstrap-css. Je pense que c'est ce que vous (et moi) espérions trouver.

bower install bootstrap-css

Merci Nico.

77
Terry Roe

Les fichiers css et js sont situés dans le package: bootstrap/docs/assets/

METTRE À JOUR:

depuis la v3, le paquet contient un dossier dist qui contient tous les fichiers css, js et les polices.

Une autre option (si vous voulez seulement récupérer des fichiers uniques) pourrait être: pulldown . La configuration est extrêmement simple et vous pouvez facilement ajouter vos propres fichiers/URL à la liste.

27
tborychowski

en supposant que vous avez npm installé et bower installé globalement

  1. accédez à votre projet 
  2. bower init (cela générera le fichier bower.json dans votre répertoire)
  3. (alors continuez de cliquer sur oui) ...

  4. pour définir le chemin d'installation de bootstrap:
    Créez manuellement un fichier .bowerrc à côté du fichier bower.json et ajoutez-y les éléments suivants:

    { "répertoire": "public/composants" }

  5. bower install bootstrap --save

Remarque: pour installer d'autres composants:

 bower search {component-name-here}
4
Mahmoud Zalt

Je me suis retrouvé avec un script Shell que vous ne devriez vraiment avoir à exécuter qu'une seule fois lorsque vous extrayez un projet

#!/usr/bin/env bash

mkdir -p webroot/js
mkdir -p webroot/css
mkdir -p webroot/css-min
mkdir -p webroot/img
mkdir -p webroot/font

npm i
bower i

# boostrap
pushd components/bootstrap
npm i
make bootstrap
popd
cp components/bootstrap/bootstrap/css/*.min.css webroot/css-min/
cp components/bootstrap/bootstrap/js/bootstrap.js src/js/deps/
cp components/bootstrap/bootstrap/img/* webroot/img/

# fontawesome
cp components/font-awesome/css/*.min.css webroot/css-min/
cp components/font-awesome/font/* webroot/font/
3
slf

Rappelez-vous aussi que avec une commande comme: 

bower search Twitter

Vous obtenez un résultat avec une liste de tous les packages liés à Twitter. De cette façon, vous êtes au courant de tout ce qui concerne Twitter et Bower, comme par exemple savoir s'il existe un tout nouveau composant Bower.

2
joaquindev

Vous avez installé nodeJs sur votre système pour pouvoir exécuter les commandes npm. Une fois que npm fonctionne correctement, vous pouvez visiter bower.io. Vous y trouverez une documentation complète sur ce sujet. Vous trouverez une commande $ npm install bower. ceci installera bower sur votre machine. Après avoir installé bower, vous pouvez installer Bootstrap facilement.

Voici un tutoriel vidéo à ce sujet

0
asad khan