Utiliser bootstrap avec bower

135

J'essaie d'utiliser bootstrap avec bower, mais comme il clone tout le dépôt, il n'y a pas de CSS et d'autres choses.

Cela signifie-t-il 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-bootstrap bower xavier.seignard
la source
28
Pas du tout une question stupide. C'est le premier package que j'ai essayé d'installer avec bower. Le manque de clarté et le désordre qui en résultent m'ont fait oublier l'outil pendant longtemps.
jhappoldt

Réponses:

84

J'ai finalement fini d'utiliser ce qui suit: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

Cela me semble plus propre car il ne clone pas tout le dépôt, il ne fait que décompresser les assests requis.

L'inconvénient est que cela brise la philosophie du bower, car un bower updatebootstrap ne mettra pas à jour.

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

C'est une question de choix je suppose.

Mise à jour: il semble qu'ils utilisent maintenant la version d'un dossier dist (voir: https://github.com/twbs/bootstrap/pull/6342 ), il suffit donc d'utiliser bower install bootstrapet de pointer vers les actifs dans le distdossier

xavier.seignard
la source
2
Juste mis à jour npmet boweret ayant "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" en component.jsonsemble également travailler.
antitoxique le
8
Cela ne va-t-il pas à l'encontre de l'objectif d'utiliser Bower en premier lieu?
namuol
5
Oui, ça craint un peu. Mais ce qui est le plus nul, c'est de recréer le bootstrap dans votre propre processus de construction, car ils ne construisent pas de version dans leur dépôt.
xavier.seignard
1
@namuol, exactement, je pensais que bower avait été créé pour ceux qui ne savaient pas comment créer la structure dir pour n'importe quelle bibliothèque, comme jquery, bootstrap ... cela n'a pas de sens de fournir des fichiers source à ceux qui ne le savent pas sachez, cela les trouble davantage!
alexserver
Mettre à jour npm était la solution pour moi.
Yves Van Broekhoven
78

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

bower install bootstrap-css

Merci Nico.

Terry Roe
la source
@DanielM s'il a montré comment obtenir / installer ce paquet. Actuellement, c'est un commentaire pas une réponse.
Popnoodles
bower install bootstrap-css
Nico
1
C'est la bonne réponse. Ceci est le dépôt pré-build avec tous les fichiers .min. {Js | css}.
0x126
28

Les fichiers css et js se trouvent dans le package: bootstrap/docs/assets/

METTRE À JOUR:

depuis la v3, il existe un distdossier dans le package qui contient tous les css, js et polices.

Une autre option (si vous voulez juste 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.

Dziad Borowy
la source
Ceci est incorrect depuis au moins aujourd'hui pour Bootstrap 3. Les seuls fichiers dans bower_components / bootstrap / docs / assets / css / sont docs.css et pygments-manni.css. Ni l'un ni l'autre ne sont les fichiers css Bootstrap.
moulin à café
4

en supposant que npm soit installé et bower installé dans le monde entier

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

  4. pour définir le chemin où bootstrap sera installé:
    créez manuellement un.bowerrc fichier à côté du fichier bower.json et ajoutez-y les éléments suivants:

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

  5. bower install bootstrap --save

Remarque: pour installer d'autres composants:

 bower search {component-name-here}
Mahmoud Zalt
la source
3

J'ai fini par utiliser un script shell que vous ne devriez vraiment avoir à exécuter qu'une seule fois lors de la première vérification d'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/
slf
la source
1
@lenswipe ouais, moi non plus, pas maintenant en tout cas. trois ans plus tard, les choses ont évolué là où on ne devrait plus avoir besoin de faire cela
slf
2

Souvenez-vous également qu'avec une commande comme:

bower search twitter

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

Joaquindev
la source
Merci, cela aide à montrer tout ce qui est lié à Twitter, mais cela montre de nombreuses options à installer. Si vous souhaitez installer le dernier bootstrap de Twitter, utilisez 'bower install twitter' qui installe github.com/twbs/bootstrap et qui inclut également les sources compilées dans le répertoire dist.
AWolf
Parfait, donc avec une combinaison des deux, vous pouvez toujours savoir ce qui va être installé sur votre ordinateur.
joaquindev
0

Vous avez installé nodeJs sur votre système afin d'exécuter des npmcommandes. Une fois npmfonctionne correctement, vous pouvez visiter bower.io. Vous y trouverez une documentation complète sur ce sujet. Vous trouverez une commande $ npm install bower. cela installera bower sur votre machine. Après avoir installé Bower, vous pouvez installer Bootstrap facilement.

Voici un tutoriel vidéo à ce sujet

asad khan
la source